diff --git a/blueprint.json b/blueprint.json index 1ae7783..c7f29a3 100644 --- a/blueprint.json +++ b/blueprint.json @@ -1,6 +1,6 @@ { "$schema": "https://playground.wordpress.net/blueprint-schema.json", - "landingPage": "/wp-admin/post.php?post=4&action=edit", + "landingPage": "/blockparty-modal-demo/", "preferredVersions": { "php": "8.1", "wp": "latest" @@ -26,7 +26,7 @@ }, { "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; ?>" + "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?>" } ] } diff --git a/src/blockparty-modal/block.json b/src/blockparty-modal/block.json index 9b0b3a8..a81fc3b 100644 --- a/src/blockparty-modal/block.json +++ b/src/blockparty-modal/block.json @@ -26,11 +26,7 @@ "closedBy": { "type": "string", "default": "any", - "enum": [ - "any", - "closerequest", - "none" - ] + "enum": [ "any", "closerequest", "none" ] }, "enableCloseButton": { "type": "boolean", @@ -47,10 +43,7 @@ }, "example": {}, "supports": { - "align": [ - "wide", - "full" - ], + "align": [ "wide", "full" ], "dimensions": { "height": true, "minHeight": true diff --git a/src/blockparty-modal/deprecated.js b/src/blockparty-modal/deprecated.js deleted file mode 100644 index a44d79d..0000000 --- a/src/blockparty-modal/deprecated.js +++ /dev/null @@ -1,74 +0,0 @@ -/** - * Prior save output for validation of existing post content. - * - * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/ - */ -import { __ } from '@wordpress/i18n'; -import { useBlockProps, InnerBlocks, RichText } from '@wordpress/block-editor'; -import { Icon, close } from '@wordpress/icons'; - -const MODAL_ID_PREFIX = 'modal-'; - -/** - * Save markup before `screen-reader-text` was added to the close label span (v1.0.4+). - * - * @param {Object} props Block props. - * @param {Object} props.attributes Block attributes. - * @return {JSX.Element} Element to render. - */ -function saveV1CloseLabelSrOnly( { attributes } ) { - const { - closedBy, - displayIconOnly, - enableCloseButton, - headingLevel: HeadingTag, - modalId, - preventScroll, - title, - } = attributes; - - const dialogId = modalId ? MODAL_ID_PREFIX + modalId : undefined; - const customProps = {}; - - if ( preventScroll ) { - customProps.className = 'wp-block-blockparty-modal--prevent-scroll'; - } - - return ( - -
- -
-
- -
- { enableCloseButton && closedBy !== 'none' && ( - - ) } - - ); -} - -export default [ - { - save: saveV1CloseLabelSrOnly, - }, -]; diff --git a/src/blockparty-modal/edit.js b/src/blockparty-modal/edit.js index aab2bf6..90c72e5 100644 --- a/src/blockparty-modal/edit.js +++ b/src/blockparty-modal/edit.js @@ -209,13 +209,7 @@ export default function Edit( { clientId, attributes, setAttributes } ) { type="button" className="wp-block-blockparty-modal__close-button" > - + { __( 'Close this dialog window', 'blockparty-modal' diff --git a/src/blockparty-modal/index.js b/src/blockparty-modal/index.js index 691889d..78a4b7a 100644 --- a/src/blockparty-modal/index.js +++ b/src/blockparty-modal/index.js @@ -18,7 +18,6 @@ import './style.scss'; import Edit from './edit'; import save from './save'; -import deprecated from './deprecated'; import metadata from './block.json'; import { @@ -28,12 +27,11 @@ import { addLinkedModalAttribute, } from './utils'; -registerBlockType( metadata.name, { +registerBlockType(metadata.name, { icon: modal, edit: Edit, save, - deprecated, -} ); +}); /** * Returns the list of block names allowed as modal triggers (same as filter blockparty_modal_trigger_allowed_blocks). @@ -43,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']; } } @@ -55,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); } ); @@ -68,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' - ) } + )} /> diff --git a/src/blockparty-modal/save.js b/src/blockparty-modal/save.js index 326fc1f..aba72eb 100644 --- a/src/blockparty-modal/save.js +++ b/src/blockparty-modal/save.js @@ -68,11 +68,7 @@ export default function save( { attributes } ) { type="button" className="wp-block-blockparty-modal__close-button" > - + { __( 'Close this dialog window', 'blockparty-modal' ) } diff --git a/src/blockparty-modal/style.scss b/src/blockparty-modal/style.scss index 2894156..5385ef2 100644 --- a/src/blockparty-modal/style.scss +++ b/src/blockparty-modal/style.scss @@ -54,6 +54,20 @@ padding: 0; border: none; cursor: pointer; + + /* Visually hidden label when icon-only (same role as Core `.screen-reader-text`). */ + .sr-only { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + word-wrap: normal !important; + } } }