diff --git a/README.md b/README.md index 41bcc26..eeeebed 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # Blockparty — Modal [![Test with WordPress Playground](https://img.shields.io/badge/Test%20with-WordPress%20Playground-0073aa?style=for-the-badge&logo=wordpress&logoColor=white)](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/beapi/blockparty-modal/refs/heads/main/blueprint.json) + [![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-blue.svg)](https://www.gnu.org/licenses/gpl-2.0) [![WordPress: 6.8+](https://img.shields.io/badge/WordPress-6.8+-green.svg)](https://wordpress.org/) [![PHP: 8.1+](https://img.shields.io/badge/PHP-8.1+-purple.svg)](https://php.net/) diff --git a/blueprint.json b/blueprint.json index 35831f6..4ac5102 100644 --- a/blueprint.json +++ b/blueprint.json @@ -1,6 +1,6 @@ { "$schema": "https://playground.wordpress.net/blueprint-schema.json", - "landingPage": "/wp-admin/post-new.php", + "landingPage": "/wp-admin/post.php?post=4&action=edit", "preferredVersions": { "php": "8.1", "wp": "latest" @@ -23,6 +23,10 @@ "activate": true, "targetFolderName": "blockparty-modal" } + }, + { + "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/deprecated.js b/src/blockparty-modal/deprecated.js new file mode 100644 index 0000000..a44d79d --- /dev/null +++ b/src/blockparty-modal/deprecated.js @@ -0,0 +1,74 @@ +/** + * 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 90c72e5..aab2bf6 100644 --- a/src/blockparty-modal/edit.js +++ b/src/blockparty-modal/edit.js @@ -209,7 +209,13 @@ 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 d17d1a6..691889d 100644 --- a/src/blockparty-modal/index.js +++ b/src/blockparty-modal/index.js @@ -18,6 +18,7 @@ import './style.scss'; import Edit from './edit'; import save from './save'; +import deprecated from './deprecated'; import metadata from './block.json'; import { @@ -31,6 +32,7 @@ registerBlockType( metadata.name, { icon: modal, edit: Edit, save, + deprecated, } ); /** diff --git a/src/blockparty-modal/save.js b/src/blockparty-modal/save.js index aba72eb..326fc1f 100644 --- a/src/blockparty-modal/save.js +++ b/src/blockparty-modal/save.js @@ -68,7 +68,11 @@ export default function save( { attributes } ) { type="button" className="wp-block-blockparty-modal__close-button" > - + { __( 'Close this dialog window', 'blockparty-modal' ) }