diff --git a/blueprint.json b/blueprint.json index 956ea21..32e2777 100644 --- a/blueprint.json +++ b/blueprint.json @@ -1,6 +1,6 @@ { "$schema": "https://playground.wordpress.net/blueprint-schema.json", - "landingPage": "/blockparty-modal-demo/", + "landingPage": "/wp-admin/post.php?post=4&action=edit", "preferredVersions": { "php": "8.1", "wp": "latest" @@ -26,7 +26,11 @@ }, { "step": "runPHP", - "code": " 'Blockparty Modal',\n\t'post_name' => 'blockparty-modal-demo',\n\t'post_content' => $page_content,\n\t'post_status' => 'publish',\n\t'post_type' => 'page',\n) );\necho 'Page created with ID: ' . $page_id;\n?>" + "code": "" + }, + { + "step": "runPHP", + "code": "\n
\n
Open my modal window
\n
\n\n\n\n

My Modal

\n

Blockparty Modal is a WordPress plugin that lets you add accessible modal dialogs to your content via the Gutenberg block editor. You define the modal content and behaviour in the editor; on the frontend, the modal is shown when the user activates a linked trigger (such as a button block).

\n
\n'; $page_id = wp_insert_post(array('post_title' => 'Blockparty Modal', 'post_content' => $page_content, 'post_status' => 'publish', 'post_type' => 'page')); echo 'Page created with ID: ' . $page_id; ?>'; $page_id = wp_insert_post(array('post_title' => 'Blockparty Modal', 'post_content' => $page_content, 'post_status' => 'publish', 'post_type' => 'page')); echo 'Page created with ID: ' . $page_id; ?>" } ] } diff --git a/src/blockparty-modal/index.js b/src/blockparty-modal/index.js index 78a4b7a..d17d1a6 100644 --- a/src/blockparty-modal/index.js +++ b/src/blockparty-modal/index.js @@ -27,11 +27,11 @@ import { addLinkedModalAttribute, } from './utils'; -registerBlockType(metadata.name, { +registerBlockType( metadata.name, { icon: modal, edit: Edit, save, -}); +} ); /** * Returns the list of block names allowed as modal triggers (same as filter blockparty_modal_trigger_allowed_blocks). @@ -41,11 +41,11 @@ registerBlockType(metadata.name, { */ function getModalTriggerAllowedBlocks() { try { - const settings = select('core/block-editor').getSettings(); + const settings = select( 'core/block-editor' ).getSettings(); const list = settings?.blockpartyModalTriggerAllowedBlocks; - return Array.isArray(list) ? list : ['core/button']; + return Array.isArray( list ) ? list : [ 'core/button' ]; } catch { - return ['core/button']; + return [ 'core/button' ]; } } @@ -53,12 +53,12 @@ function getModalTriggerAllowedBlocks() { addFilter( 'blocks.registerBlockType', 'blockparty-modal/add-linked-modal-attribute', - (settings, blockName) => { + ( settings, blockName ) => { const allowedBlocks = getModalTriggerAllowedBlocks(); - if (!allowedBlocks.includes(blockName)) { + if ( ! allowedBlocks.includes( blockName ) ) { return settings; } - return addLinkedModalAttribute(settings); + return addLinkedModalAttribute( settings ); } ); @@ -66,74 +66,74 @@ addFilter( // filter — re-register only allowed blocks so linkedModalId is persisted on save. const allowedBlocks = getModalTriggerAllowedBlocks(); const blockTypes = getBlockTypes(); -blockTypes.forEach((blockType) => { +blockTypes.forEach( ( blockType ) => { if ( - allowedBlocks.includes(blockType.name) && - !blockType.attributes?.[LINKED_MODAL_ATTR] + allowedBlocks.includes( blockType.name ) && + ! blockType.attributes?.[ LINKED_MODAL_ATTR ] ) { registerBlockType( blockType.name, - addLinkedModalAttribute(blockType) + addLinkedModalAttribute( blockType ) ); } -}); +} ); // Add "Attached modal" panel with Combobox only to blocks allowed as modal triggers (see filter blockparty_modal_trigger_allowed_blocks). addFilter( 'editor.BlockEdit', 'blockparty-modal/with-modal-trigger-control', - (BlockEdit) => (props) => { + ( BlockEdit ) => ( props ) => { const { name, attributes, setAttributes } = props; - if (name === MODAL_BLOCK_NAME) { - return ; + if ( name === MODAL_BLOCK_NAME ) { + return ; } - const triggerAllowedBlocks = useSelect((storeSelect) => { - const settings = storeSelect('core/block-editor').getSettings(); + const triggerAllowedBlocks = useSelect( ( storeSelect ) => { + const settings = storeSelect( 'core/block-editor' ).getSettings(); const list = settings?.blockpartyModalTriggerAllowedBlocks; - return Array.isArray(list) ? list : ['core/button']; - }, []); + return Array.isArray( list ) ? list : [ 'core/button' ]; + }, [] ); - if (!triggerAllowedBlocks.includes(name)) { - return ; + if ( ! triggerAllowedBlocks.includes( name ) ) { + return ; } - const modalOptions = useSelect((storeSelect) => { - return getModalOptionsFromEditor(storeSelect); - }, []); + const modalOptions = useSelect( ( storeSelect ) => { + return getModalOptionsFromEditor( storeSelect ); + }, [] ); const options = [ - { value: '', label: __('None', 'blockparty-modal') }, + { value: '', label: __( 'None', 'blockparty-modal' ) }, ...modalOptions, ]; - const value = attributes[LINKED_MODAL_ATTR] || ''; + const value = attributes[ LINKED_MODAL_ATTR ] || ''; return ( <> - + - setAttributes({ - [LINKED_MODAL_ATTR]: newValue || '', - }) + ) } + value={ value } + options={ options } + onChange={ ( newValue ) => + setAttributes( { + [ LINKED_MODAL_ATTR ]: newValue || '', + } ) } - placeholder={__( + placeholder={ __( 'Select a modal…', 'blockparty-modal' - )} + ) } />