From 80efd9ed5b8b73f871001065fe1e5297e7bedb01 Mon Sep 17 00:00:00 2001 From: Dan Tovbein Date: Wed, 17 Jan 2024 10:05:13 -0300 Subject: [PATCH] PLANET-7306: Move Take Action Boxout block into master-theme (#2183) * PLANET-7306: Move Take Action Boxout block into master-theme Ref: https://jira.greenpeace.org/browse/PLANET-7306 Same behavior as the one from the plugin - Include stylesheet updated with tokens - Include ImageHoverControls component - Include ImagePlaceholder component - Render block when the plugin is disabled --------- Co-authored-by: Dan Tovbein --- .../block-editor/ImageHoverControls/index.js | 36 +++ .../TakeActionBoxout/ImagePlaceholder.js | 7 + .../TakeActionBoxout/TakeActionBoxoutBlock.js | 64 ++++ .../TakeActionBoxoutEditor.js | 291 ++++++++++++++++++ .../TakeActionBoxoutFrontend.js | 55 ++++ .../deprecated/takeActionBoxoutV1.js | 47 +++ assets/src/blocks/editorIndex.js | 2 + assets/src/scss/blocks.scss | 1 + .../TakeActionBoxoutEditorStyle.scss | 36 +++ .../TakeActionBoxoutStyle.scss | 212 +++++++++++++ assets/src/scss/editorStyle.scss | 1 + src/Blocks/BaseBlock.php | 3 - src/Blocks/TakeActionBoxout.php | 170 ++++++++++ src/Loader.php | 1 + src/MasterBlocks.php | 2 + src/MasterSite.php | 2 +- templates/blocks/take-action-boxout.twig | 61 ++++ 17 files changed, 987 insertions(+), 4 deletions(-) create mode 100644 assets/src/block-editor/ImageHoverControls/index.js create mode 100644 assets/src/blocks/TakeActionBoxout/ImagePlaceholder.js create mode 100644 assets/src/blocks/TakeActionBoxout/TakeActionBoxoutBlock.js create mode 100644 assets/src/blocks/TakeActionBoxout/TakeActionBoxoutEditor.js create mode 100644 assets/src/blocks/TakeActionBoxout/TakeActionBoxoutFrontend.js create mode 100644 assets/src/blocks/TakeActionBoxout/deprecated/takeActionBoxoutV1.js create mode 100644 assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle.scss create mode 100644 assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutStyle.scss create mode 100644 src/Blocks/TakeActionBoxout.php create mode 100644 templates/blocks/take-action-boxout.twig diff --git a/assets/src/block-editor/ImageHoverControls/index.js b/assets/src/block-editor/ImageHoverControls/index.js new file mode 100644 index 0000000000..80b9ef195e --- /dev/null +++ b/assets/src/block-editor/ImageHoverControls/index.js @@ -0,0 +1,36 @@ +import {Button} from '@wordpress/components'; +const {__} = wp.i18n; + +export const ImageHoverControls = props => { + const { + onEdit, + onRemove, + isCompact, + isAdd, + } = props; + + return
+ { isAdd && } + + { !isAdd && } + { !isAdd &&
; +}; diff --git a/assets/src/blocks/TakeActionBoxout/ImagePlaceholder.js b/assets/src/blocks/TakeActionBoxout/ImagePlaceholder.js new file mode 100644 index 0000000000..af2010056b --- /dev/null +++ b/assets/src/blocks/TakeActionBoxout/ImagePlaceholder.js @@ -0,0 +1,7 @@ +import {ImagePlaceholderIcon} from '../../block-editor/ImagePlaceholderIcon/ImagePlaceholderIcon'; + +export const ImagePlaceholder = ({children}) => +
+ + {children} +
; diff --git a/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutBlock.js b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutBlock.js new file mode 100644 index 0000000000..7793475bd1 --- /dev/null +++ b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutBlock.js @@ -0,0 +1,64 @@ +import {TakeActionBoxoutEditor} from './TakeActionBoxoutEditor.js'; +import {takeActionBoxoutV1} from './deprecated/takeActionBoxoutV1'; + +const {registerBlockType} = wp.blocks; + +const BLOCK_NAME = 'planet4-blocks/take-action-boxout'; + +export const registerTakeActionBoxoutBlock = () => registerBlockType(BLOCK_NAME, { + title: 'Take Action Boxout', + icon: 'welcome-widgets-menus', + category: 'planet4-blocks', + supports: { + html: false, // Disable "Edit as HTMl" block option. + }, + // This attributes definition mimics the one in the PHP side. + attributes: { + take_action_page: { + type: 'number', + }, + title: { + type: 'string', + }, + excerpt: { + type: 'string', + }, + link: { + type: 'string', + }, + linkText: { + type: 'string', + }, + newTab: { + type: 'boolean', + default: false, + }, + tag_ids: { + type: 'array', + default: [], + }, + imageId: { + type: 'number', + default: '', + }, + imageUrl: { + type: 'string', + default: '', + }, + imageAlt: { + type: 'string', + default: '', + }, + stickyOnMobile: { + type: 'boolean', + default: false, + }, + }, + edit: TakeActionBoxoutEditor, + save() { + return null; + }, + deprecated: [ + takeActionBoxoutV1, + ], +}); diff --git a/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutEditor.js b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutEditor.js new file mode 100644 index 0000000000..0d0a4eafd2 --- /dev/null +++ b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutEditor.js @@ -0,0 +1,291 @@ +import {useSelect} from '@wordpress/data'; +import { + SelectControl, + PanelBody, + CheckboxControl, + ToolbarGroup, + ToolbarButton, + Button, + ToggleControl, +} from '@wordpress/components'; +import { + RichText, + BlockControls, + MediaUpload, + MediaUploadCheck, + InspectorControls, +} from '@wordpress/block-editor'; +import {URLInput} from '../../block-editor/URLInput/URLInput'; +import {ImageHoverControls} from '../../block-editor/ImageHoverControls'; +import {TakeActionBoxoutFrontend} from './TakeActionBoxoutFrontend'; +import {ImagePlaceholder} from './ImagePlaceholder'; + +const {__} = wp.i18n; + +// Planet 4 settings (Planet 4 >> Defaults content >> Take Action Covers default button text). +const DEFAULT_BUTTON_TEXT = window.p4_vars.take_action_covers_button_text || __('Take action', 'planet4-blocks'); + +export const TakeActionBoxoutEditor = ({ + attributes, + isSelected, + setAttributes, +}) => { + const { + take_action_page, + title: customTitle, + excerpt: customExcerpt, + link: customLink, + linkText: customLinkText, + newTab, + imageId: customImageId, + className, + stickyOnMobile, + } = attributes; + + const { + loading, + actPageList, + title, + excerpt, + link, + linkText, + imageId, + imageUrl, + imageAlt, + } = useSelect(select => { + const args = { + per_page: -1, + sort_order: 'asc', + sort_column: 'post_title', + parent: window.p4_vars.take_action_page, + post_status: 'publish', + }; + + const actionsArgs = { + per_page: -1, + sort_order: 'asc', + sort_column: 'post_title', + post_status: 'publish', + }; + + // eslint-disable-next-line no-shadow + const actPageList = [].concat( + select('core').getEntityRecords('postType', 'page', args) || [], + select('core').getEntityRecords('postType', 'p4_action', actionsArgs) || [] + ).sort((a, b) => { + if (a.title.raw === b.title.raw) { + return 0; + } + return a.title.raw > b.title.raw ? 1 : -1; + }); + const actPage = actPageList.find(actPageFound => take_action_page === actPageFound.id); + + // Because `useSelect` does an API call to fetch data, the actPageList will be empty the first time it's called. + // Or first few times. + if (take_action_page && !actPage) { + return {loading: true}; + } + const actPageImageId = actPage?.featured_media; + + const customImage = customImageId && select('core').getMedia(customImageId); + const customImageFromId = customImage?.source_url; + + const title = !take_action_page ? customTitle : actPage.title.raw; // eslint-disable-line no-shadow + const excerpt = !take_action_page ? customExcerpt : actPage.excerpt.raw; // eslint-disable-line no-shadow + const link = !take_action_page ? customLink : actPage.link; // eslint-disable-line no-shadow + + const linkText = !take_action_page ? customLinkText : actPage?.meta?.action_button_text || DEFAULT_BUTTON_TEXT; // eslint-disable-line no-shadow + + const imageId = !take_action_page ? customImageId : actPageImageId; // eslint-disable-line no-shadow + const imageUrl = !take_action_page ? customImageFromId : select('core').getMedia(actPageImageId)?.source_url; // eslint-disable-line no-shadow + const imageAlt = !take_action_page ? customImage?.alt_text : ''; // eslint-disable-line no-shadow + + return { + actPageList, + title, + excerpt, + link, + linkText, + imageId, + imageUrl, + imageAlt, + }; + }, [take_action_page, customTitle, customExcerpt, customLink, customLinkText, customImageId]); + + const takeActionPageSelected = take_action_page && parseInt(take_action_page) > 0; + + if (loading || !actPageList.length) { + return __('Populating block\'s fields…', 'planet4-blocks-backend'); + } + + const toAttribute = attributeName => value => setAttributes({ + [attributeName]: value, + }); + + const removeImage = () => setAttributes({imageId: null}); + + const selectImage = ({id}) => setAttributes({imageId: id}); + + const actPageOptions = actPageList.map(actPage => ({label: actPage.title.raw, value: actPage.id})); + + const postHasStickyBoxoutAlready = document.querySelector('#action-card'); + + const renderEditInPlace = () => (takeActionPageSelected ? + : +
+
+ + } + /> + + {!imageUrl ? : {imageAlt}} +
+
+ + +
+ +
+ ); + + const renderSidebar = () => ( + <> + + +
+ +
+ + + setAttributes({take_action_page: parseInt(page)})} + /> + {!takeActionPageSelected && { + if (!take_action_page) { + setAttributes({link: value}); + } + }} + />} + {!takeActionPageSelected && } + {!takeActionPageSelected && + + ( + + )} + /> + + } + + + {!takeActionPageSelected && imageId && + + + + ( + + )} + /> + + + + + } + + ); + + return ( + <> + {isSelected && renderSidebar()} + {renderEditInPlace()} + + ); +}; diff --git a/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutFrontend.js b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutFrontend.js new file mode 100644 index 0000000000..16eb5413ee --- /dev/null +++ b/assets/src/blocks/TakeActionBoxout/TakeActionBoxoutFrontend.js @@ -0,0 +1,55 @@ +export const TakeActionBoxoutFrontend = ({ + title, + excerpt, + link, + linkText, + newTab, + imageUrl, + imageAlt, + className, + stickyOnMobile, +}) => ( +
+ {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} + + {imageAlt} +
+ {title && + + } + {excerpt && +

+ } +

+ {link && linkText && + + {linkText} + + } +
+); diff --git a/assets/src/blocks/TakeActionBoxout/deprecated/takeActionBoxoutV1.js b/assets/src/blocks/TakeActionBoxout/deprecated/takeActionBoxoutV1.js new file mode 100644 index 0000000000..cd57a566d6 --- /dev/null +++ b/assets/src/blocks/TakeActionBoxout/deprecated/takeActionBoxoutV1.js @@ -0,0 +1,47 @@ +export const takeActionBoxoutV1 = { + attributes: { + take_action_page: { + type: 'number', + }, + custom_title: { + type: 'string', + }, + custom_excerpt: { + type: 'string', + }, + custom_link: { + type: 'string', + }, + custom_link_text: { + type: 'string', + }, + custom_link_new_tab: { + type: 'boolean', + default: false, + }, + tag_ids: { + type: 'array', + default: [], + }, + background_image: { + type: 'number', + default: '', + }, + }, + isEligible({custom_excerpt, custom_link, custom_link_text, custom_link_new_tab, custom_title, background_image}) { + return custom_link || custom_excerpt || custom_link_new_tab || custom_link_text || custom_title || background_image; + }, + migrate({custom_excerpt, custom_link, custom_link_text, custom_link_new_tab, custom_title, background_image, ...attributes}) { + attributes.title = custom_title; + attributes.link = custom_link; + attributes.linkText = custom_link_text; + attributes.newTab = custom_link_new_tab; + attributes.excerpt = custom_excerpt; + attributes.imageId = background_image; + + return attributes; + }, + save() { + return null; + }, +}; diff --git a/assets/src/blocks/editorIndex.js b/assets/src/blocks/editorIndex.js index 7c78e77c2c..77e987d661 100644 --- a/assets/src/blocks/editorIndex.js +++ b/assets/src/blocks/editorIndex.js @@ -1,6 +1,7 @@ import {registerPostsListBlock} from './PostsList'; import {registerActionsList} from './ActionsList'; import {registerSubmenuBlock} from './Submenu/SubmenuBlock'; +import {registerTakeActionBoxoutBlock} from './TakeActionBoxout/TakeActionBoxoutBlock'; wp.domReady(() => { // Make sure to unregister the posts-list native variation before registering planet4-blocks/posts-list-block @@ -8,6 +9,7 @@ wp.domReady(() => { // Blocks registerSubmenuBlock(); + registerTakeActionBoxoutBlock(); // Beta blocks registerActionsList(); diff --git a/assets/src/scss/blocks.scss b/assets/src/scss/blocks.scss index ae678444f0..67707c28df 100644 --- a/assets/src/scss/blocks.scss +++ b/assets/src/scss/blocks.scss @@ -6,3 +6,4 @@ @import "blocks/Counter/CounterStyle"; @import "blocks/Spreadsheet"; @import "blocks/Submenu/SubmenuStyle"; +@import "blocks/TakeActionBoxout/TakeActionBoxoutStyle.scss"; diff --git a/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle.scss b/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle.scss new file mode 100644 index 0000000000..ee4c2b2546 --- /dev/null +++ b/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle.scss @@ -0,0 +1,36 @@ +.boxout { + position: relative; + + a { + pointer-events: none; + } + + .btn { + min-width: auto !important; + } + + // Prevent line clamp on editable stuff, because it's very buggy. + [contenteditable] { + -webkit-line-clamp: unset !important; + } +} + +// I had to put these styles on the container to get the image controls to work, and remove some from the image itself. +.boxout-image-container { + position: relative; + background: var(--grey-500); + height: 100%; + width: 336px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + + img { + width: 100%; + } +} + +.sticky-boxout-checkbox .components-base-control__field { + display: flex; +} diff --git a/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutStyle.scss b/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutStyle.scss new file mode 100644 index 0000000000..e065dc5496 --- /dev/null +++ b/assets/src/scss/blocks/TakeActionBoxout/TakeActionBoxoutStyle.scss @@ -0,0 +1,212 @@ +.boxout { + background: var(--white); + padding: $sp-2; + width: 100%; + height: 128px; + display: flex; + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.16); + transition: box-shadow 0.2s; + border-radius: 4px; + position: relative; + + .cover-card-overlay { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + } + + &:hover { + box-shadow: 0 1px 14px rgba(0, 0, 0, 0.3); + + .boxout-heading { + text-decoration: underline; + } + + .btn { + background-color: var(--button-primary--hover--background); + } + } + + .not-now { + display: none; + } + + img { + width: 96px; + min-width: 96px; + height: 100%; + pointer-events: none; + object-fit: cover; + } + + .boxout-content { + padding: $sp-1; + flex: auto; + } + + &::before, + &::after { + display: none; + } + + .boxout-heading { + _-- { + font-family: var(--font-family-heading); + font-size: var(--font-size-m--font-family-primary); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-l--font-family-primary); + color: var(--color-text-body); + } + margin-bottom: 0; + display: -webkit-box; + -webkit-line-clamp: 2; + /* stylelint-disable property-no-vendor-prefix */ + /*! autoprefixer: off */ + -webkit-box-orient: vertical; + /*! autoprefixer: on */ + /* stylelint-enable property-no-vendor-prefix */ + overflow: hidden; + word-break: break-word; + } + + .btn { + _-- { + font-size: 12px; + line-height: 2.5; + } + white-space: nowrap; + position: absolute; + bottom: $sp-2; + right: $sp-2; + + html[dir="rtl"] & { + right: auto; + left: $sp-2; + } + } + + .boxout-excerpt { + display: none; + } + + @include medium-and-up { + .boxout-heading { + margin-bottom: $sp-1; + font-size: var(--font-size-m--font-family-primary); + } + + .boxout-excerpt { + _-- { + font-family: var(--font-family-paragraph-secondary); + font-size: var(--font-size-xs--font-family-tertiary); + line-height: var(--line-height-m--font-family-tertiary); + } + color: var(--color-text-body); + display: -webkit-box; + -webkit-line-clamp: 1; + /* stylelint-disable property-no-vendor-prefix */ + /*! autoprefixer: off */ + -webkit-box-orient: vertical; + /*! autoprefixer: on */ + /* stylelint-enable property-no-vendor-prefix */ + overflow: hidden; + margin: 0; + } + + .btn { + _-- { + font-size: 15px; + } + align-self: flex-end; + position: unset; + } + } + + @include large-and-up { + height: 210px; + padding: 0; + + img { + min-width: 336px; + border-top-left-radius: $sp-x; + border-bottom-left-radius: $sp-x; + + html[dir="rtl"] & { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: $sp-x; + border-bottom-right-radius: $sp-x; + } + } + + .boxout-content { + padding: $sp-3; + } + + .boxout-excerpt { + -webkit-line-clamp: 3; + } + + .btn { + position: absolute; + right: $sp-3; + bottom: $sp-3; + + html[dir="rtl"] & { + right: auto; + left: $sp-3; + } + } + } +} + +@media screen and (max-width: $large-width) { + .sticky-bottom-mobile { + z-index: 9999; + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 128px; + border-radius: 0; + transition: all 0.5s; + + .boxout-heading { + margin-inline-end: $sp-3; + } + + .cover-card-overlay, + .boxout-excerpt { + display: none; + } + + .not-now { + display: block; + background: url("../../public/images/close-boxout.svg"); + background-position: bottom right; + background-size: cover; + position: absolute; + width: 16px; + height: 16px; + top: $sp-2; + right: $sp-2; + + html[dir="rtl"] & { + right: auto; + left: $sp-2; + } + } + + @include medium-and-up { + .boxout-content { + padding-top: $sp-2; + } + + .boxout-heading { + margin-inline-end: 0; + } + } + } +} diff --git a/assets/src/scss/editorStyle.scss b/assets/src/scss/editorStyle.scss index 3265d5e3c7..25ca1885e1 100644 --- a/assets/src/scss/editorStyle.scss +++ b/assets/src/scss/editorStyle.scss @@ -35,3 +35,4 @@ @import "blocks/Accordion/AccordionEditorStyle"; @import "blocks/Cookies/CookiesEditorStyle"; @import "blocks/Submenu/SubmenuEditorStyle.scss"; +@import "blocks/TakeActionBoxout/TakeActionBoxoutEditorStyle.scss"; diff --git a/src/Blocks/BaseBlock.php b/src/Blocks/BaseBlock.php index c2116d41e2..eda0e2af81 100644 --- a/src/Blocks/BaseBlock.php +++ b/src/Blocks/BaseBlock.php @@ -33,11 +33,8 @@ abstract public function prepare_data(array $fields): array; */ public function render(array $attributes) { - $data = $this->prepare_data($attributes); - \Timber::$locations = '/block_templates/blocks'; - $block_output = \Timber::compile(static::BLOCK_NAME . '.twig', $data); // phpcs:ignore WordPress.WP.I18n.NonSingularStringLiteralText diff --git a/src/Blocks/TakeActionBoxout.php b/src/Blocks/TakeActionBoxout.php new file mode 100644 index 0000000000..a264dcad62 --- /dev/null +++ b/src/Blocks/TakeActionBoxout.php @@ -0,0 +1,170 @@ +register_takeactionboxout_block(); + } + + /** + * Register Take action boxout block. + */ + public function register_takeactionboxout_block(): void + { + register_block_type( + self::get_full_block_name(), + [ + 'editor_script' => 'planet4-blocks', + 'render_callback' => [ $this, 'render' ], + 'attributes' => [ + 'take_action_page' => [ + 'type' => 'integer', + ], + 'title' => [ + 'type' => 'string', + ], + 'excerpt' => [ + 'type' => 'string', + ], + 'link' => [ + 'type' => 'string', + ], + 'linkText' => [ + 'type' => 'string', + ], + 'newTab' => [ + 'type' => 'boolean', + 'default' => false, + ], + 'tag_ids' => [ + 'type' => 'array', + 'items' => [ + 'type' => 'integer', // Array definitions require an item type. + ], + ], + 'imageId' => [ + 'type' => 'integer', + ], + 'imageUrl' => [ + 'type' => 'string', + ], + 'imageAlt' => [ + 'type' => 'string', + ], + 'stickyOnMobile' => [ + 'type' => 'boolean', + 'default' => false, + ], + ], + ] + ); + } + + /** + * Get all the data that will be needed to render the block correctly. + * + * @param array $fields This is the array of fields of this block. + * + * @return array The data to be passed in the View. + */ + public function prepare_data(array $fields): array + { + + $page_id = $fields['take_action_page'] ?? ''; + + if (empty($page_id)) { + $img_id = $fields['imageId'] ?? $fields['background_image'] ?? null; + if (! empty($img_id)) { + [ $src ] = wp_get_attachment_image_src($img_id, 'large'); + + $src_set = wp_get_attachment_image_srcset($img_id); + $alt_text = get_post_meta($img_id, '_wp_attachment_image_alt', true); + } + + return [ + 'boxout' => [ + 'title' => $fields['custom_title'] ?? $fields['title'] ?? '', + 'excerpt' => $fields['custom_excerpt'] ?? $fields['excerpt'] ?? '', + 'link' => $fields['custom_link'] ?? $fields['link'] ?? '', + 'new_tab' => $fields['custom_link_new_tab'] ?? $fields['newTab'] ?? false, + 'link_text' => $fields['custom_link_text'] ?? $fields['linkText'] ?? '', + 'image' => $src ?? '', + 'image_alt' => $alt_text ?? '', + 'image_srcset' => $src_set ?? '', + 'stickyMobile' => $fields['stickyOnMobile'] ?? false, + ], + ]; + } + + $args = [ + 'p' => (int) $page_id, // ID of a page, post. + 'post_type' => 'any', + 'post_status' => 'publish', + ]; + + // Try to find the page that the user selected. + $query = new \WP_Query($args); + + if (! $query->have_posts()) { + return []; + } + + // Populate the necessary fields for the block. + $posts = $query->get_posts(); + $page = $posts[0]; + $options = get_option('planet4_options'); + + if (has_post_thumbnail($page)) { + $image = get_the_post_thumbnail_url($page, 'large'); + $img_id = get_post_thumbnail_id($page); + $src_set = wp_get_attachment_image_srcset($img_id); + $image_alt = get_post_meta($img_id, '_wp_attachment_image_alt', true); + } + + $meta = get_post_meta($page_id); + if (isset($meta['action_button_text']) && $meta['action_button_text'][0]) { + $cover_button_text = $meta['action_button_text'][0]; + } else { + $cover_button_text = $options['take_action_covers_button_text'] ?? __('Take action', 'planet4-blocks'); + } + + return [ + 'boxout' => [ + 'title' => null === $page ? '' : $page->post_title, + 'excerpt' => null === $page ? '' : $page->post_excerpt, + 'link' => null === $page ? '' : get_permalink($page), + 'new_tab' => false, + 'link_text' => $cover_button_text, + 'image' => $image ?? '', + 'image_alt' => $image_alt ?? '', + 'image_srcset' => $src_set ?? '', + 'stickyMobile' => $fields['stickyOnMobile'] ?? false, + ], + ]; + } +} diff --git a/src/Loader.php b/src/Loader.php index 6e3bdfc4d4..b4e8332584 100644 --- a/src/Loader.php +++ b/src/Loader.php @@ -163,6 +163,7 @@ public static function add_blocks(): void new Blocks\GuestBook();//NOSONAR new Blocks\Spreadsheet();//NOSONAR new Blocks\Submenu();//NOSONAR + new Blocks\TakeActionBoxout();//NOSONAR if (!BetaBlocks::is_active()) { return; diff --git a/src/MasterBlocks.php b/src/MasterBlocks.php index 28292708d8..3784f5c07b 100644 --- a/src/MasterBlocks.php +++ b/src/MasterBlocks.php @@ -113,6 +113,8 @@ private function get_p4_options(): array 'enable_analytical_cookies' => $option_values['enable_analytical_cookies'] ?? '', 'enable_google_consent_mode' => $option_values['enable_google_consent_mode'] ?? '', 'cookies_default_copy' => $cookies_default_copy, + 'take_action_covers_button_text' => $option_values['take_action_covers_button_text'] ?? '', + 'take_action_page' => $option_values['take_action_page'] ?? '', ]; } diff --git a/src/MasterSite.php b/src/MasterSite.php index 6af2f21d1c..e34cbd9131 100644 --- a/src/MasterSite.php +++ b/src/MasterSite.php @@ -81,7 +81,7 @@ public function __construct() protected function settings(): void { Timber::$autoescape = true; - Timber::$dirname = ['templates', 'views']; + Timber::$dirname = ['templates', 'templates/blocks', 'views']; $this->theme_dir = get_template_directory_uri(); $this->theme_images_dir = $this->theme_dir . '/images/'; $this->sort_options = [ diff --git a/templates/blocks/take-action-boxout.twig b/templates/blocks/take-action-boxout.twig new file mode 100644 index 0000000000..f7c94cc0bf --- /dev/null +++ b/templates/blocks/take-action-boxout.twig @@ -0,0 +1,61 @@ +{% block take_action_boxout %} + {% if ( boxout ) %} +
+ + {% if boxout.image %} + {{ boxout.image_alt }} + {% endif %} +
+ {% if ( boxout.title ) %} + + {{ boxout.title|e('wp_kses_post')|raw }} + + {% endif %} + {% if ( boxout.excerpt ) %} +

{{ boxout.excerpt|e('wp_kses_post')|raw }}

+ {% endif %} +
+ {% if ( boxout.link and boxout.link_text ) %} + + {{ boxout.link_text }} + + {% endif %} + {% if boxout.stickyMobile %} + + {% endif %} +
+ {% endif %} +{% endblock %}