diff --git a/assets/wizards/popups/components/segment-group/SegmentGroup.test.js b/assets/wizards/popups/components/segment-group/SegmentGroup.test.js index 017f6c5358..3b0cd21b46 100644 --- a/assets/wizards/popups/components/segment-group/SegmentGroup.test.js +++ b/assets/wizards/popups/components/segment-group/SegmentGroup.test.js @@ -242,6 +242,7 @@ describe( 'A segment with conflicting prompts', () => { custom_placements: { custom1: 'Custom Placement 1', }, + overlay_placements: [ 'center' ], }; } ); diff --git a/assets/wizards/popups/components/settings-modal/index.js b/assets/wizards/popups/components/settings-modal/index.js index 078bb7308f..722cc97191 100644 --- a/assets/wizards/popups/components/settings-modal/index.js +++ b/assets/wizards/popups/components/settings-modal/index.js @@ -17,7 +17,12 @@ import { Settings, hooks, } from '../../../../components/src'; -import { frequenciesForPopup, isOverlay, placementsForPopups } from '../../utils'; +import { + frequenciesForPopup, + isOverlay, + placementsForPopups, + overlaySizesForPopups, +} from '../../utils'; const { SettingsCard } = Settings; @@ -58,7 +63,7 @@ const PromptSettingsModal = ( { prompt, disabled, onClose, segments, updatePopup + { isOverlay( prompt ) && ( + { + setPromptConfig( { options: { overlay_size: value } } ); + } } + options={ overlaySizesForPopups( prompt ) } + value={ promptConfig.options.overlay_size } + /> + ) } overlayPlacements.indexOf( popup.options.placement ) >= 0; +export const isOverlay = popup => { + const overlayPlacements = window.newspack_popups_wizard_data?.overlay_placements || []; + return -1 < overlayPlacements.indexOf( popup.options.placement ); +}; /** * Check whether the given popup is above-header. @@ -47,9 +45,15 @@ export const isCustomPlacement = popup => { export const isInline = prompt => ! isOverlay( prompt ); const placementMap = { - center: __( 'Center Overlay', 'newspack' ), top: __( 'Top Overlay', 'newspack' ), + top_left: __( 'Top Left Overlay', 'newspack' ), + top_right: __( 'Top Right Overlay', 'newspack' ), + center: __( 'Center Overlay', 'newspack' ), + center_left: __( 'Center Left Overlay', 'newspack' ), + center_right: __( 'Center Right Overlay', 'newspack' ), bottom: __( 'Bottom Overlay', 'newspack' ), + bottom_left: __( 'Bottom Left Overlay', 'newspack' ), + bottom_right: __( 'Bottom Right Overlay', 'newspack' ), inline: __( 'Inline', 'newspack' ), archives: __( 'In archive pages', 'newspack' ), above_header: __( 'Above Header', 'newspack' ), @@ -66,6 +70,7 @@ export const placementForPopup = ( { options: { frequency, placement } } ) => { export const placementsForPopups = prompt => { const customPlacements = window.newspack_popups_wizard_data?.custom_placements; + const overlayPlacements = window.newspack_popups_wizard_data?.overlay_placements; const options = Object.keys( placementMap ) .filter( key => isOverlay( prompt ) @@ -98,6 +103,10 @@ export const frequenciesForPopup = popup => { .map( key => ( { label: frequencyMap[ key ], value: key } ) ); }; +export const overlaySizesForPopups = () => { + return window.newspack_popups_wizard_data?.overlay_sizes; +}; + export const getCardClassName = ( { status } ) => { if ( 'publish' !== status ) { return 'newspack-card__is-disabled'; diff --git a/includes/configuration_managers/class-newspack-popups-configuration-manager.php b/includes/configuration_managers/class-newspack-popups-configuration-manager.php index e783a0aee3..7bc8844601 100644 --- a/includes/configuration_managers/class-newspack-popups-configuration-manager.php +++ b/includes/configuration_managers/class-newspack-popups-configuration-manager.php @@ -108,6 +108,24 @@ public function get_custom_placement_values() { $this->unconfigured_error(); } + /** + * Get overlay placements. + */ + public function get_overlay_placements() { + return $this->is_configured() ? + \Newspack_Popups_Model::get_overlay_placements() : + $this->unconfigured_error(); + } + + /** + * Get overlay sizes. + */ + public function get_overlay_sizes() { + return $this->is_configured() ? + \Newspack_Popups_Model::get_popup_size_options() : + $this->unconfigured_error(); + } + /** * Set plugin settings. * diff --git a/includes/wizards/class-popups-wizard.php b/includes/wizards/class-popups-wizard.php index 5ff033c97f..6cdaa945d2 100644 --- a/includes/wizards/class-popups-wizard.php +++ b/includes/wizards/class-popups-wizard.php @@ -469,15 +469,19 @@ public function enqueue_scripts_and_styles() { $newspack_popups_configuration_manager = Configuration_Managers::configuration_manager_class_for_plugin_slug( 'newspack-popups' ); $custom_placements = $newspack_popups_configuration_manager->get_custom_placements(); + $overlay_placements = $newspack_popups_configuration_manager->get_overlay_placements(); + $overlay_sizes = $newspack_popups_configuration_manager->get_overlay_sizes(); \wp_localize_script( 'newspack-popups-wizard', 'newspack_popups_wizard_data', [ - 'preview_post' => $preview_post, - 'preview_archive' => $preview_archive, - 'frontend_url' => get_site_url(), - 'custom_placements' => $custom_placements, + 'preview_post' => $preview_post, + 'preview_archive' => $preview_archive, + 'frontend_url' => get_site_url(), + 'custom_placements' => $custom_placements, + 'overlay_placements' => $overlay_placements, + 'overlay_sizes' => $overlay_sizes, ] );