diff --git a/assets/js/blocks/linked-cover.js b/assets/js/blocks/linked-cover.js new file mode 100644 index 00000000..7e6f516c --- /dev/null +++ b/assets/js/blocks/linked-cover.js @@ -0,0 +1,94 @@ +// assets/js/blocks/linked-cover.js + +// Destructure necessary WordPress packages +const { addFilter } = wp.hooks; +const { createHigherOrderComponent } = wp.compose; +const { Fragment, createElement } = wp.element; +const { InspectorControls } = wp.blockEditor || wp.editor; +const { PanelBody, TextControl, ToggleControl } = wp.components; + +// Add new attributes to the core/cover block +function addLinkAttributes(settings, name) { + if (name !== 'core/cover') { + return settings; + } + + // Add new attributes + settings.attributes = Object.assign({}, settings.attributes, { + linkUrl: { + type: 'string', + default: '' + }, + linkTarget: { + type: 'string', + default: '_self' // '_self' for same tab, '_blank' for new tab + } + }); + + return settings; +} + +addFilter('blocks.registerBlockType', 'lsx/cover/add-link-attributes', addLinkAttributes); + +// Extend the edit component to include new controls +const withLinkInspectorControl = createHigherOrderComponent(function (BlockEdit) { + return function (props) { + if (props.name !== 'core/cover') { + return createElement(BlockEdit, props); + } + + const { attributes, setAttributes } = props; + const { linkUrl, linkTarget } = attributes; + + return createElement( + Fragment, + null, + createElement(BlockEdit, props), + createElement( + InspectorControls, + null, + createElement( + PanelBody, + { title: 'Cover Link Settings', initialOpen: true }, + createElement(TextControl, { + label: 'Link URL', + value: linkUrl, + onChange: function (value) { + setAttributes({ linkUrl: value }); + } + }), + createElement(ToggleControl, { + label: 'Open link in a new tab', + checked: linkTarget === '_blank', + onChange: function (value) { + setAttributes({ linkTarget: value ? '_blank' : '_self' }); + } + }) + ) + ) + ); + }; +}, 'withLinkInspectorControl'); + +addFilter('editor.BlockEdit', 'lsx/cover/with-link-inspector-control', withLinkInspectorControl); + +// Modify the save element to wrap content in a link +function modifyCoverSaveElement(element, blockType, attributes) { + if (blockType.name !== 'core/cover') { + return element; + } + + const { linkUrl, linkTarget } = attributes; + + if (linkUrl) { + return createElement( + 'a', + { href: linkUrl, target: linkTarget }, + element + ); + } + + return element; +} + +addFilter('blocks.getSaveElement', 'lsx/cover/modify-save-element', modifyCoverSaveElement); diff --git a/includes/classes/blocks/class-variations.php b/includes/classes/blocks/class-variations.php index b8aaa2d4..83c609b4 100644 --- a/includes/classes/blocks/class-variations.php +++ b/includes/classes/blocks/class-variations.php @@ -44,6 +44,14 @@ public function enqueue_block_variations_script() { true // Enqueue in the footer. ); + // Enqueue linked-cover.js + wp_enqueue_script( + 'lsx-linked-cover', + plugins_url( 'assets/js/blocks/linked-cover.js', dirname( __FILE__ ) ), + array( 'wp-blocks', 'wp-element', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-hooks' ), + filemtime( plugin_dir_path( dirname( __FILE__ ) ) . 'assets/js/blocks/linked-cover.js' ) + ); + if ( array_key_exists( get_post_type(), tour_operator()->get_post_types() ) ) { wp_enqueue_script( 'lsx-to-slotfills', // Handle for the script. diff --git a/src/init.php b/src/init.php index 851f3aac..0f76734c 100644 --- a/src/init.php +++ b/src/init.php @@ -64,7 +64,8 @@ function to_block_block_assets() { * @since 1.16.0 */ register_block_type( - 'tour-operator/block-post-types', array( + 'tour-operator/block-post-types', + array( // Enqueue blocks.style.build.css on both frontend & backend. 'style' => 'to_block-style-css', // Enqueue blocks.build.js in the editor only.