From 3382e3d1b0ffd9f02e39e100e114abd6244f083b Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 28 Apr 2023 18:07:22 -0400 Subject: [PATCH 1/6] New Block: Try a modal/popover block --- mu-plugins/blocks/modal/icons/chevron.svg | 3 + mu-plugins/blocks/modal/icons/close.svg | 3 + mu-plugins/blocks/modal/index.php | 133 ++++++++++++++++++ .../blocks/modal/postcss/editor-style.pcss | 4 + mu-plugins/blocks/modal/postcss/style.pcss | 93 ++++++++++++ .../blocks/modal/src/inner-content/block.json | 45 ++++++ .../blocks/modal/src/inner-content/index.js | 25 ++++ mu-plugins/blocks/modal/src/modal/block.json | 43 ++++++ mu-plugins/blocks/modal/src/modal/index.js | 79 +++++++++++ mu-plugins/blocks/modal/src/modal/view.js | 108 ++++++++++++++ mu-plugins/loader.php | 1 + package.json | 4 +- 12 files changed, 540 insertions(+), 1 deletion(-) create mode 100644 mu-plugins/blocks/modal/icons/chevron.svg create mode 100644 mu-plugins/blocks/modal/icons/close.svg create mode 100644 mu-plugins/blocks/modal/index.php create mode 100644 mu-plugins/blocks/modal/postcss/editor-style.pcss create mode 100644 mu-plugins/blocks/modal/postcss/style.pcss create mode 100644 mu-plugins/blocks/modal/src/inner-content/block.json create mode 100644 mu-plugins/blocks/modal/src/inner-content/index.js create mode 100644 mu-plugins/blocks/modal/src/modal/block.json create mode 100644 mu-plugins/blocks/modal/src/modal/index.js create mode 100644 mu-plugins/blocks/modal/src/modal/view.js diff --git a/mu-plugins/blocks/modal/icons/chevron.svg b/mu-plugins/blocks/modal/icons/chevron.svg new file mode 100644 index 000000000..7b3dbf992 --- /dev/null +++ b/mu-plugins/blocks/modal/icons/chevron.svg @@ -0,0 +1,3 @@ + diff --git a/mu-plugins/blocks/modal/icons/close.svg b/mu-plugins/blocks/modal/icons/close.svg new file mode 100644 index 000000000..1c7123ec0 --- /dev/null +++ b/mu-plugins/blocks/modal/icons/close.svg @@ -0,0 +1,3 @@ + diff --git a/mu-plugins/blocks/modal/index.php b/mu-plugins/blocks/modal/index.php new file mode 100644 index 000000000..5356ada5d --- /dev/null +++ b/mu-plugins/blocks/modal/index.php @@ -0,0 +1,133 @@ + __NAMESPACE__ . '\render', + ) + ); + register_block_type( + __DIR__ . '/build/inner-content', + array( + 'render_callback' => __NAMESPACE__ . '\render_inner_content', + ) + ); +} + +/** + * Returns a local SVG icon. + * + * @param string $icon Name of the icon to render, corresponds to file name. + * @return string + */ +function render_icon( $icon ) { + $file_path = __DIR__ . '/icons/' . $icon . '.svg'; + if ( file_exists( $file_path ) ) { + return file_get_contents( $file_path ); + } +} + +/** + * Render the block content for the modal/popover/inline container. + * + * The modal requires more HTML for micromodal support, but inline and popover + * use the same markup with slightly different CSS. + * + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. + * + * @return string Returns the block markup. + */ +function render_inner_content( $attributes, $content, $block ) { + // Fetch the type from the parent block. + $type = $block->context['wporg/modal/type']; + if ( ! $type ) { + return; + } + + if ( 'inline' === $type || 'popover' === $type ) { + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'wporg-modal__modal alignwide' ) ); + return sprintf( + '
%2$s
', + $wrapper_attributes, + $content + ); + } + + $wrapper_attributes = get_block_wrapper_attributes(); + $close_icon = render_icon( 'close' ); + + return << +
+ +
+ +HTML; +} + +/** + * Render the block content for the parent Modal block (button). The modal + * container itself is rendered by the child block. + * + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. + * + * @return string Returns the block markup. + */ +function render( $attributes, $content, $block ) { + $type = $attributes['type']; + $label = $attributes['label']; + $class = 'is-type-' . $type; + + // Add the chevron if this is not a modal. + if ( 'inline' === $type || 'popover' === $type ) { + $icon = render_icon( 'chevron' ); + $label .= ' ' . $icon; + } + + $toggle_button = ''; + + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) ); + return sprintf( + '
%2$s%3$s
', + $wrapper_attributes, + $toggle_button, + $content + ); +} diff --git a/mu-plugins/blocks/modal/postcss/editor-style.pcss b/mu-plugins/blocks/modal/postcss/editor-style.pcss new file mode 100644 index 000000000..b3fadd9b7 --- /dev/null +++ b/mu-plugins/blocks/modal/postcss/editor-style.pcss @@ -0,0 +1,4 @@ +.wporg-modal__modal { + border: 1px dashed black; + padding: 8px; +} diff --git a/mu-plugins/blocks/modal/postcss/style.pcss b/mu-plugins/blocks/modal/postcss/style.pcss new file mode 100644 index 000000000..9225c4244 --- /dev/null +++ b/mu-plugins/blocks/modal/postcss/style.pcss @@ -0,0 +1,93 @@ +.wporg-modal__modal { + display: none; +} + +.wporg-modal__modal.is-open { + display: block; +} + +.wporg-modal__overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 99999; /* Needs to be at leas this to overlay admin bar. */ + background: rgba(0,0,0,0.6); + display: flex; + justify-content: center; + align-items: center; +} + +.wporg-modal__container { + background-color: var(--wp--preset--color--white); + width: 100%; + max-width: var(--wp--style--global--content-size); + max-height: 100vh; + overflow-y: auto; + box-sizing: border-box; + + /* This extra div is needed to prevent clicks inside the container padding from closing the modal. */ + & > div { + position: relative; + padding: var(--wp--preset--spacing--40); + + & > button + * { + margin-top: 0; + } + + & > *:last-child { + margin-bottom: 0; + } + } +} + +.wporg-modal__button[data-micromodal-close] { + position: absolute; + top: var(--wp--preset--spacing--10); + right: var(--wp--preset--spacing--10); + width: calc(24px + var(--wp--preset--spacing--10)); + height: calc(24px + var(--wp--preset--spacing--10)); + line-height: 1; + padding: 0; + box-shadow: none; + text-decoration: none; + border: none; + color: currentColor; + background-color: transparent; + background-image: none; + cursor: pointer; + z-index: 10; /* Just enough to raise it above the other modal content. */ + + & svg { + vertical-align: middle; + fill: currentColor; + } +} + +.wp-block-wporg-modal.is-type-popover { + position: relative; + + & .wporg-modal__modal { + position: absolute; + top: 100%; + left: 0; + z-index: 2; + + opacity: 0; + overflow: hidden; + visibility: hidden; + height: 0; + width: 0; + + &.is-open { + opacity: 1; + overflow: visible; + visibility: visible; + + height: auto; + min-width: 200px; + width: 100%; + } + } +} \ No newline at end of file diff --git a/mu-plugins/blocks/modal/src/inner-content/block.json b/mu-plugins/blocks/modal/src/inner-content/block.json new file mode 100644 index 000000000..d8eb55464 --- /dev/null +++ b/mu-plugins/blocks/modal/src/inner-content/block.json @@ -0,0 +1,45 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "wporg/modal-inner-content", + "title": "Modal Content", + "icon": "text-page", + "category": "layout", + "description": "Hidden content which appears when a button is clicked.", + "textdomain": "wporg", + "attributes": {}, + "usesContext": [ "wporg/modal/type" ], + "parent": [ "wporg/modal" ], + "supports": { + "color": { + "text": true, + "background": true, + "link": true + }, + "spacing": { + "margin": true, + "padding": true, + "__experimentalDefaultControls": { + "margin": true, + "padding": true + } + }, + "typography": { + "fontSize": true, + "lineHeight": true + }, + "__experimentalBorder": { + "color": true, + "radius": true, + "style": true, + "width": true, + "__experimentalDefaultControls": { + "color": true, + "radius": true, + "style": true, + "width": true + } + } + }, + "editorScript": "file:./index.js" +} diff --git a/mu-plugins/blocks/modal/src/inner-content/index.js b/mu-plugins/blocks/modal/src/inner-content/index.js new file mode 100644 index 000000000..4eb1f696f --- /dev/null +++ b/mu-plugins/blocks/modal/src/inner-content/index.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; + +function Edit() { + return ( +
+ +
+ ); +} + +registerBlockType( metadata.name, { + edit: Edit, + save: () => { + return ; + }, +} ); diff --git a/mu-plugins/blocks/modal/src/modal/block.json b/mu-plugins/blocks/modal/src/modal/block.json new file mode 100644 index 000000000..26cb9787d --- /dev/null +++ b/mu-plugins/blocks/modal/src/modal/block.json @@ -0,0 +1,43 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "wporg/modal", + "title": "Modal", + "icon": "button", + "category": "layout", + "description": "A container hidden behind a button, which pops up on click.", + "textdomain": "wporg", + "attributes": { + "label": { + "type": "string" + }, + "type": { + "type": "string", + "default": "modal", + "enum": [ "inline", "modal", "popover" ] + } + }, + "supports": { + "align": true, + "color": { + "text": true, + "background": true, + "link": true + }, + "spacing": { + "margin": true, + "padding": true + }, + "typography": { + "fontSize": true, + "lineHeight": true + } + }, + "providesContext": { + "wporg/modal/type": "type" + }, + "editorScript": "file:./index.js", + "editorStyle": "file:../editor-style.css", + "style": "file:../style.css", + "viewScript": "file:./view.js" +} diff --git a/mu-plugins/blocks/modal/src/modal/index.js b/mu-plugins/blocks/modal/src/modal/index.js new file mode 100644 index 000000000..9724af42a --- /dev/null +++ b/mu-plugins/blocks/modal/src/modal/index.js @@ -0,0 +1,79 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { registerBlockType } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; +import { InnerBlocks, RichText, useBlockProps, store as blockEditorStore } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; + +function Edit( { attributes, setAttributes, isSelected, clientId } ) { + const { label } = attributes; + const isInnerBlockSelected = useSelect( + ( select ) => select( blockEditorStore ).hasSelectedInnerBlock( clientId, true ), + [ clientId ] + ); + + const onChangeContent = ( newValue ) => { + setAttributes( { label: newValue } ); + }; + const modalClass = isSelected || isInnerBlockSelected ? ' is-open' : ''; + + return ( +
+ +
+ +
+
+ ); +} + +registerBlockType( metadata.name, { + edit: Edit, + save: () => { + return ; + }, + variations: [ + { + name: 'default', + title: metadata.title, + attributes: { type: 'modal' }, + scope: [ 'inserter', 'transform' ], + isDefault: true, + isActive: [ 'type' ], + }, + { + name: 'inline', + title: __( 'Collapsed', 'wporg' ), + attributes: { type: 'inline' }, + scope: [ 'inserter', 'transform' ], + isActive: [ 'type' ], + }, + { + name: 'popover', + title: __( 'Popover', 'wporg' ), + attributes: { type: 'popover' }, + scope: [ 'inserter', 'transform' ], + isActive: [ 'type' ], + }, + ], +} ); diff --git a/mu-plugins/blocks/modal/src/modal/view.js b/mu-plugins/blocks/modal/src/modal/view.js new file mode 100644 index 000000000..92a365797 --- /dev/null +++ b/mu-plugins/blocks/modal/src/modal/view.js @@ -0,0 +1,108 @@ +/** + * External dependencies + */ +import MicroModal from 'micromodal'; + +let idCounter = 0; +function getModalId( prefix = 'modal-' ) { + idCounter++; + return prefix + idCounter; +} + +/** + * Set up the modal behavior for the modal type. + * + * @param {HTMLElement} container + */ +function intializeModal( container ) { + const modalId = getModalId( 'wporg-modal-' ); + container.querySelector( 'button' ).setAttribute( 'data-micromodal-trigger', modalId ); + container.querySelector( '.wporg-modal__modal' ).id = modalId; + + MicroModal.init( { + onShow: ( modal ) => { + const button = container.querySelector( `button[data-micromodal-trigger=${ modal.id }]` ); + button.setAttribute( 'aria-expanded', true ); + }, + onClose: ( modal ) => { + const button = container.querySelector( `button[data-micromodal-trigger=${ modal.id }]` ); + button.setAttribute( 'aria-expanded', false ); + }, + } ); +} + +/** + * Set up the handlers for opening/closing the popover drawer. + * Uses the click handler from `intializeInline`, then adds handlers for + * closing when click or focus moves out of the popover. + * See the navigation block submenu behavior. + * + * @param {HTMLElement} container + */ +function intializePopover( container ) { + const button = container.querySelector( '* > .wporg-modal__button' ); + const content = container.querySelector( '.wporg-modal__modal' ); + + if ( ! button || ! content ) { + return; + } + + intializeInline( container ); + + // Close on click outside. + document.addEventListener( 'click', function ( event ) { + if ( ! container.contains( event.target ) ) { + button.setAttribute( 'aria-expanded', false ); + content.classList.remove( 'is-open' ); + } + } ); + + // Close on focus outside or escape key. + document.addEventListener( 'keyup', function ( event ) { + if ( event.key === 'Escape' || ! container.contains( event.target ) ) { + button.setAttribute( 'aria-expanded', false ); + content.classList.remove( 'is-open' ); + } + } ); +} + +/** + * Set up the click handler for opening/closing the inline drawer. + * This is also used by the "popover" style. + * + * @param {HTMLElement} container + */ +function intializeInline( container ) { + const button = container.querySelector( '* > .wporg-modal__button' ); + const content = container.querySelector( '.wporg-modal__modal' ); + + if ( ! button || ! content ) { + return; + } + + button.addEventListener( 'click', () => { + if ( button.getAttribute( 'aria-expanded' ) === 'true' ) { + button.setAttribute( 'aria-expanded', false ); + content.classList.remove( 'is-open' ); + } else { + button.setAttribute( 'aria-expanded', true ); + content.classList.add( 'is-open' ); + } + } ); +} + +function init() { + const containers = document.querySelectorAll( '.wp-block-wporg-modal' ); + + containers.forEach( ( container ) => { + if ( container.classList.contains( 'is-type-modal' ) ) { + intializeModal( container ); + } else if ( container.classList.contains( 'is-type-popover' ) ) { + intializePopover( container ); + } else { + intializeInline( container ); + } + } ); +} + +window.addEventListener( 'load', init ); diff --git a/mu-plugins/loader.php b/mu-plugins/loader.php index c92cb8d0c..08812897b 100644 --- a/mu-plugins/loader.php +++ b/mu-plugins/loader.php @@ -19,6 +19,7 @@ require_once __DIR__ . '/blocks/global-header-footer/blocks.php'; require_once __DIR__ . '/blocks/horizontal-slider/horizontal-slider.php'; require_once __DIR__ . '/blocks/language-suggest/language-suggest.php'; +require_once __DIR__ . '/blocks/modal/index.php'; require_once __DIR__ . '/blocks/latest-news/latest-news.php'; require_once __DIR__ . '/blocks/notice/index.php'; require_once __DIR__ . '/blocks/screenshot-preview/block.php'; diff --git a/package.json b/package.json index 5ca2130e9..8ba682876 100644 --- a/package.json +++ b/package.json @@ -64,5 +64,7 @@ "selector-class-pattern": null } }, - "dependencies": {} + "dependencies": { + "micromodal": "0.4.10" + } } From 49d9801366055b63cda5aab34751d3aee37d5b4d Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 1 May 2023 16:55:52 -0400 Subject: [PATCH 2/6] Fix linter issues --- mu-plugins/blocks/modal/postcss/style.pcss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/mu-plugins/blocks/modal/postcss/style.pcss b/mu-plugins/blocks/modal/postcss/style.pcss index 9225c4244..d6913dde2 100644 --- a/mu-plugins/blocks/modal/postcss/style.pcss +++ b/mu-plugins/blocks/modal/postcss/style.pcss @@ -13,14 +13,13 @@ right: 0; bottom: 0; z-index: 99999; /* Needs to be at leas this to overlay admin bar. */ - background: rgba(0,0,0,0.6); + background: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; } .wporg-modal__container { - background-color: var(--wp--preset--color--white); width: 100%; max-width: var(--wp--style--global--content-size); max-height: 100vh; @@ -31,6 +30,7 @@ & > div { position: relative; padding: var(--wp--preset--spacing--40); + background-color: var(--wp--preset--color--white); & > button + * { margin-top: 0; @@ -84,10 +84,10 @@ opacity: 1; overflow: visible; visibility: visible; - + height: auto; min-width: 200px; width: 100%; - } + } } -} \ No newline at end of file +} From 2c7abf3a380de96a35bc7178d14adb847a9e18d6 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 1 May 2023 16:56:04 -0400 Subject: [PATCH 3/6] Use the button block for the toggle button --- mu-plugins/blocks/modal/index.php | 24 ++++++----- .../blocks/modal/postcss/editor-style.pcss | 7 +++- .../blocks/modal/src/inner-content/index.js | 6 ++- mu-plugins/blocks/modal/src/modal/block.json | 9 ---- mu-plugins/blocks/modal/src/modal/index.js | 42 +++++++------------ mu-plugins/blocks/modal/src/modal/view.js | 10 +++-- 6 files changed, 45 insertions(+), 53 deletions(-) diff --git a/mu-plugins/blocks/modal/index.php b/mu-plugins/blocks/modal/index.php index 5356ada5d..527f61d7a 100644 --- a/mu-plugins/blocks/modal/index.php +++ b/mu-plugins/blocks/modal/index.php @@ -69,7 +69,7 @@ function render_icon( $icon ) { */ function render_inner_content( $attributes, $content, $block ) { // Fetch the type from the parent block. - $type = $block->context['wporg/modal/type']; + $type = $block->context['wporg/modal/type'] ?? ''; if ( ! $type ) { return; } @@ -112,22 +112,26 @@ function render_inner_content( $attributes, $content, $block ) { */ function render( $attributes, $content, $block ) { $type = $attributes['type']; - $label = $attributes['label']; $class = 'is-type-' . $type; - // Add the chevron if this is not a modal. - if ( 'inline' === $type || 'popover' === $type ) { - $icon = render_icon( 'chevron' ); - $label .= ' ' . $icon; + // Replace the button block's link with an HTML button, retain all block styles. + // This only replaces the first link, so the modal can still contain links/buttons. + if ( preg_match( '/(]*)>)(.*?)(<\/a>)/i', $content, $matches ) ) { + $link = $matches[0]; // full match. + // Add in the modal button class, used by the view script. + $attributes = str_replace( 'class="', 'class="wporg-modal__button ', $matches[2] ); + $button = sprintf( + '', + $attributes, + $matches[3] // innerText. + ); + $content = str_replace( $link, $button, $content ); } - $toggle_button = ''; - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) ); return sprintf( - '
%2$s%3$s
', + '
%2$s
', $wrapper_attributes, - $toggle_button, $content ); } diff --git a/mu-plugins/blocks/modal/postcss/editor-style.pcss b/mu-plugins/blocks/modal/postcss/editor-style.pcss index b3fadd9b7..cc7892e3a 100644 --- a/mu-plugins/blocks/modal/postcss/editor-style.pcss +++ b/mu-plugins/blocks/modal/postcss/editor-style.pcss @@ -1,4 +1,9 @@ .wporg-modal__modal { - border: 1px dashed black; + border: 1px dashed #000; padding: 8px; } + +.wp-block-wporg-modal.is-selected .wporg-modal__modal, +.wp-block-wporg-modal.has-child-selected .wporg-modal__modal { + display: block; +} diff --git a/mu-plugins/blocks/modal/src/inner-content/index.js b/mu-plugins/blocks/modal/src/inner-content/index.js index 4eb1f696f..538bc71c2 100644 --- a/mu-plugins/blocks/modal/src/inner-content/index.js +++ b/mu-plugins/blocks/modal/src/inner-content/index.js @@ -11,8 +11,10 @@ import metadata from './block.json'; function Edit() { return ( -
- +
+
+ +
); } diff --git a/mu-plugins/blocks/modal/src/modal/block.json b/mu-plugins/blocks/modal/src/modal/block.json index 26cb9787d..cc2e745c9 100644 --- a/mu-plugins/blocks/modal/src/modal/block.json +++ b/mu-plugins/blocks/modal/src/modal/block.json @@ -19,18 +19,9 @@ }, "supports": { "align": true, - "color": { - "text": true, - "background": true, - "link": true - }, "spacing": { "margin": true, "padding": true - }, - "typography": { - "fontSize": true, - "lineHeight": true } }, "providesContext": { diff --git a/mu-plugins/blocks/modal/src/modal/index.js b/mu-plugins/blocks/modal/src/modal/index.js index 9724af42a..d4b8a15bb 100644 --- a/mu-plugins/blocks/modal/src/modal/index.js +++ b/mu-plugins/blocks/modal/src/modal/index.js @@ -3,46 +3,32 @@ */ import { __ } from '@wordpress/i18n'; import { registerBlockType } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; -import { InnerBlocks, RichText, useBlockProps, store as blockEditorStore } from '@wordpress/block-editor'; +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; /** * Internal dependencies */ import metadata from './block.json'; -function Edit( { attributes, setAttributes, isSelected, clientId } ) { - const { label } = attributes; - const isInnerBlockSelected = useSelect( - ( select ) => select( blockEditorStore ).hasSelectedInnerBlock( clientId, true ), - [ clientId ] - ); - - const onChangeContent = ( newValue ) => { - setAttributes( { label: newValue } ); - }; - const modalClass = isSelected || isInnerBlockSelected ? ' is-open' : ''; - +function Edit() { return (
- -
- -
+ ], + ] } + templateLock="all" + />
); } diff --git a/mu-plugins/blocks/modal/src/modal/view.js b/mu-plugins/blocks/modal/src/modal/view.js index 92a365797..4462a91ee 100644 --- a/mu-plugins/blocks/modal/src/modal/view.js +++ b/mu-plugins/blocks/modal/src/modal/view.js @@ -16,16 +16,20 @@ function getModalId( prefix = 'modal-' ) { */ function intializeModal( container ) { const modalId = getModalId( 'wporg-modal-' ); - container.querySelector( 'button' ).setAttribute( 'data-micromodal-trigger', modalId ); + container.querySelector( '.wporg-modal__button' ).setAttribute( 'data-micromodal-trigger', modalId ); container.querySelector( '.wporg-modal__modal' ).id = modalId; MicroModal.init( { onShow: ( modal ) => { - const button = container.querySelector( `button[data-micromodal-trigger=${ modal.id }]` ); + const button = container.querySelector( + `.wporg-modal__button[data-micromodal-trigger=${ modal.id }]` + ); button.setAttribute( 'aria-expanded', true ); }, onClose: ( modal ) => { - const button = container.querySelector( `button[data-micromodal-trigger=${ modal.id }]` ); + const button = container.querySelector( + `.wporg-modal__button[data-micromodal-trigger=${ modal.id }]` + ); button.setAttribute( 'aria-expanded', false ); }, } ); From 9242b6c7ff467302ea9e64d332859680cde6c96b Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 1 May 2023 16:58:44 -0400 Subject: [PATCH 4/6] Fix template glitch where innerblock content is lost on copy/paste --- .../blocks/modal/src/inner-content/index.js | 10 +++++++++- mu-plugins/blocks/modal/src/modal/index.js | 17 +---------------- 2 files changed, 10 insertions(+), 17 deletions(-) diff --git a/mu-plugins/blocks/modal/src/inner-content/index.js b/mu-plugins/blocks/modal/src/inner-content/index.js index 538bc71c2..bb0165bf4 100644 --- a/mu-plugins/blocks/modal/src/inner-content/index.js +++ b/mu-plugins/blocks/modal/src/inner-content/index.js @@ -13,7 +13,15 @@ function Edit() { return (
- +
); diff --git a/mu-plugins/blocks/modal/src/modal/index.js b/mu-plugins/blocks/modal/src/modal/index.js index d4b8a15bb..71495f5cc 100644 --- a/mu-plugins/blocks/modal/src/modal/index.js +++ b/mu-plugins/blocks/modal/src/modal/index.js @@ -13,22 +13,7 @@ import metadata from './block.json'; function Edit() { return (
- +
); } From dfd7af119d4847576019e17b0a6a8ab810bf01cb Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 1 May 2023 17:23:19 -0400 Subject: [PATCH 5/6] Update the logic for shared code in inline/popover --- mu-plugins/blocks/modal/src/modal/view.js | 55 +++++++++++------------ 1 file changed, 26 insertions(+), 29 deletions(-) diff --git a/mu-plugins/blocks/modal/src/modal/view.js b/mu-plugins/blocks/modal/src/modal/view.js index 4462a91ee..f92124ac1 100644 --- a/mu-plugins/blocks/modal/src/modal/view.js +++ b/mu-plugins/blocks/modal/src/modal/view.js @@ -37,46 +37,25 @@ function intializeModal( container ) { /** * Set up the handlers for opening/closing the popover drawer. - * Uses the click handler from `intializeInline`, then adds handlers for - * closing when click or focus moves out of the popover. - * See the navigation block submenu behavior. * * @param {HTMLElement} container */ function intializePopover( container ) { - const button = container.querySelector( '* > .wporg-modal__button' ); - const content = container.querySelector( '.wporg-modal__modal' ); - - if ( ! button || ! content ) { - return; - } - - intializeInline( container ); - - // Close on click outside. - document.addEventListener( 'click', function ( event ) { - if ( ! container.contains( event.target ) ) { - button.setAttribute( 'aria-expanded', false ); - content.classList.remove( 'is-open' ); - } - } ); - - // Close on focus outside or escape key. - document.addEventListener( 'keyup', function ( event ) { - if ( event.key === 'Escape' || ! container.contains( event.target ) ) { - button.setAttribute( 'aria-expanded', false ); - content.classList.remove( 'is-open' ); - } - } ); + intializeInline( container, true ); } /** * Set up the click handler for opening/closing the inline drawer. - * This is also used by the "popover" style. + * + * If `shouldAutoClose` is true (for the "popover" style), it adds handlers + * for closing when click or focus moves out of the popover. + * + * See the navigation block submenu behavior. * * @param {HTMLElement} container + * @param {boolean} shouldAutoClose */ -function intializeInline( container ) { +function intializeInline( container, shouldAutoClose = false ) { const button = container.querySelector( '* > .wporg-modal__button' ); const content = container.querySelector( '.wporg-modal__modal' ); @@ -93,6 +72,24 @@ function intializeInline( container ) { content.classList.add( 'is-open' ); } } ); + + if ( shouldAutoClose ) { + // Close on click outside. + document.addEventListener( 'click', function ( event ) { + if ( ! container.contains( event.target ) ) { + button.setAttribute( 'aria-expanded', false ); + content.classList.remove( 'is-open' ); + } + } ); + + // Close on focus outside or escape key. + document.addEventListener( 'keyup', function ( event ) { + if ( event.key === 'Escape' || ! container.contains( event.target ) ) { + button.setAttribute( 'aria-expanded', false ); + content.classList.remove( 'is-open' ); + } + } ); + } } function init() { From 9d81d7e0038451aba575bb45348bf987f78452e4 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 2 May 2023 16:19:03 -0400 Subject: [PATCH 6/6] Remove unused chevron --- mu-plugins/blocks/modal/icons/chevron.svg | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 mu-plugins/blocks/modal/icons/chevron.svg diff --git a/mu-plugins/blocks/modal/icons/chevron.svg b/mu-plugins/blocks/modal/icons/chevron.svg deleted file mode 100644 index 7b3dbf992..000000000 --- a/mu-plugins/blocks/modal/icons/chevron.svg +++ /dev/null @@ -1,3 +0,0 @@ -