From da130a76b753e579db282832d71ca18a1f37d8fe Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Thu, 25 Jan 2024 18:37:57 -0500 Subject: [PATCH 1/4] Query Filter: Update to match new Interactivity API format --- mu-plugins/blocks/query-filter/render.php | 32 +-- mu-plugins/blocks/query-filter/src/block.json | 4 +- mu-plugins/blocks/query-filter/src/index.js | 1 + .../{postcss/style.pcss => src/style.scss} | 0 mu-plugins/blocks/query-filter/src/view.js | 253 +++++++++--------- 5 files changed, 140 insertions(+), 150 deletions(-) rename mu-plugins/blocks/query-filter/{postcss/style.pcss => src/style.scss} (100%) diff --git a/mu-plugins/blocks/query-filter/render.php b/mu-plugins/blocks/query-filter/render.php index 08711b53d..7fee55532 100644 --- a/mu-plugins/blocks/query-filter/render.php +++ b/mu-plugins/blocks/query-filter/render.php @@ -41,7 +41,7 @@ 'hasHover' => false, 'hasMultiple' => $has_multiple, ]; -$encoded_state = wp_json_encode( [ 'wporg' => [ 'queryFilter' => $init_state ] ] ); +$encoded_state = wp_json_encode( $init_state ); // Set up a unique ID for this filter. $html_id = wp_unique_id( "filter-{$settings['key']}-" ); @@ -66,43 +66,43 @@ ?>
- data-wp-interactive + data-wp-interactive="" data-wp-context="" - data-wp-effect="effects.wporg.queryFilter.init" - data-wp-class--is-modal-open="context.wporg.queryFilter.isOpen" - data-wp-on--keydown="actions.wporg.queryFilter.handleKeydown" + data-wp-watch="effects.init" + data-wp-class--is-modal-open="context.isOpen" + data-wp-on--keydown="actions.handleKeydown" >

@@ -147,7 +147,7 @@ class="wporg-query-filter__modal-close" type="button" class="wporg-query-filter__modal-action-clear" value="" - data-wp-on--click="actions.wporg.queryFilter.clearSelection" + data-wp-on--click="actions.clearSelection" aria-disabled="" /> { + const filtersElement = document.querySelector( '.wporg-query-filters' ); - if ( filtersElement ) { - const currentOverflowX = window.getComputedStyle( filtersElement ).overflowX; + if ( filtersElement ) { + const currentOverflowX = window.getComputedStyle( filtersElement ).overflowX; - if ( 'hidden' === currentOverflowX ) { - filtersElement.style.overflowX = 'scroll'; - } else if ( 'scroll' === currentOverflowX || 'auto' === currentOverflowX ) { - filtersElement.style.overflowX = 'hidden'; - } - } -} + if ( 'hidden' === currentOverflowX ) { + filtersElement.style.overflowX = 'scroll'; + } else if ( 'scroll' === currentOverflowX || 'auto' === currentOverflowX ) { + filtersElement.style.overflowX = 'hidden'; + } + } + }, -function closeDropdown( store ) { - const { context } = store; - context.wporg.queryFilter.isOpen = false; - context.wporg.queryFilter.form?.reset(); + closeDropdown: () => { + const context = getContext(); + context.isOpen = false; + context.form?.reset(); - const count = context.wporg.queryFilter.form?.querySelectorAll( 'input:checked' ).length; - updateButtons( store, count ); - document.documentElement.classList.remove( 'is-query-filter-open' ); + const count = context.form?.querySelectorAll( 'input:checked' ).length; + actions.updateButtons( count ); + document.documentElement.classList.remove( 'is-query-filter-open' ); - toggleOverflowX(); -} + actions.toggleOverflowX(); + }, -function updateButtons( store, count ) { - const { context } = store; - if ( ! context.wporg.queryFilter.form ) { - return; - } + updateButtons: ( count ) => { + const context = getContext(); + if ( ! context.form ) { + return; + } - const applyButton = context.wporg.queryFilter.form.querySelector( 'input[type="submit"]' ); - const clearButton = context.wporg.queryFilter.form.querySelector( '.wporg-query-filter__modal-action-clear' ); + const applyButton = context.form.querySelector( 'input[type="submit"]' ); + const clearButton = context.form.querySelector( '.wporg-query-filter__modal-action-clear' ); - // Only update the apply button if multiple selections are allowed. - if ( context.wporg.queryFilter.hasMultiple ) { - if ( count ) { - /* translators: %s is count of currently selected filters. */ - applyButton.value = sprintf( __( 'Apply (%s)', 'wporg' ), count ); - } else { - applyButton.value = __( 'Apply', 'wporg' ); - } - } + // Only update the apply button if multiple selections are allowed. + if ( context.hasMultiple ) { + if ( count ) { + /* translators: %s is count of currently selected filters. */ + applyButton.value = 'Apply (%s)'; + } else { + applyButton.value = 'Apply'; + } + } - clearButton.setAttribute( 'aria-disabled', count ? 'false' : 'true' ); -} + clearButton.setAttribute( 'aria-disabled', count ? 'false' : 'true' ); + }, -wpStore( { - actions: { - wporg: { - queryFilter: { - toggle: ( store ) => { - const { context } = store; - if ( context.wporg.queryFilter.isOpen ) { - closeDropdown( store ); - } else { - context.wporg.queryFilter.isOpen = true; - document.documentElement.classList.add( 'is-query-filter-open' ); - toggleOverflowX(); - } - }, - handleKeydown: ( store ) => { - const { context, event } = store; - // If Escape close the dropdown. - if ( event.key === 'Escape' ) { - closeDropdown( store ); - context.wporg.queryFilter.toggleButton.focus(); - return; - } + toggle: () => { + const context = getContext(); + if ( context.isOpen ) { + actions.closeDropdown(); + } else { + context.isOpen = true; + document.documentElement.classList.add( 'is-query-filter-open' ); + actions.toggleOverflowX(); + } + }, + handleKeydown: ( event ) => { + const context = getContext(); + // If Escape close the dropdown. + if ( event.key === 'Escape' ) { + actions.closeDropdown(); + context.toggleButton.focus(); + return; + } - // Trap focus. - if ( event.key === 'Tab' ) { - // If shift + tab it change the direction. - if ( - event.shiftKey && - window.document.activeElement === context.wporg.queryFilter.firstFocusableElement - ) { - event.preventDefault(); - context.wporg.queryFilter.lastFocusableElement.focus(); - } else if ( - ! event.shiftKey && - window.document.activeElement === context.wporg.queryFilter.lastFocusableElement - ) { - event.preventDefault(); - context.wporg.queryFilter.firstFocusableElement.focus(); - } - } - }, - handleFormChange: ( store ) => { - const { context } = store; - const count = context.wporg.queryFilter.form.querySelectorAll( 'input:checked' ).length; - updateButtons( store, count ); - }, - clearSelection: ( store ) => { - const { context, ref } = store; - if ( 'true' === ref.getAttribute( 'aria-disabled' ) ) { - return; - } - context.wporg.queryFilter.form - .querySelectorAll( 'input' ) - .forEach( ( input ) => ( input.checked = false ) ); - updateButtons( store, 0 ); - }, - }, + // Trap focus. + if ( event.key === 'Tab' ) { + // If shift + tab it change the direction. + if ( event.shiftKey && window.document.activeElement === context.firstFocusableElement ) { + event.preventDefault(); + context.lastFocusableElement.focus(); + } else if ( ! event.shiftKey && window.document.activeElement === context.lastFocusableElement ) { + event.preventDefault(); + context.firstFocusableElement.focus(); + } + } + }, + handleFormChange: () => { + const context = getContext(); + const count = context.form.querySelectorAll( 'input:checked' ).length; + actions.updateButtons( count ); + }, + clearSelection: () => { + const context = getContext(); + const { ref } = getElement(); + if ( 'true' === ref.getAttribute( 'aria-disabled' ) ) { + return; + } + context.form.querySelectorAll( 'input' ).forEach( ( input ) => ( input.checked = false ) ); + actions.updateButtons( 0 ); }, }, effects: { - wporg: { - queryFilter: { - init: ( { context, ref } ) => { - context.wporg.queryFilter.toggleButton = ref.querySelector( '.wporg-query-filter__toggle' ); - context.wporg.queryFilter.form = ref.querySelector( 'form' ); + init: () => { + const context = getContext(); + const { ref } = getElement(); + context.toggleButton = ref.querySelector( '.wporg-query-filter__toggle' ); + context.form = ref.querySelector( 'form' ); - if ( context.wporg.queryFilter.isOpen ) { - const focusableElements = ref.querySelectorAll( focusableSelectors ); - context.wporg.queryFilter.firstFocusableElement = focusableElements[ 0 ]; - context.wporg.queryFilter.lastFocusableElement = - focusableElements[ focusableElements.length - 1 ]; - } - }, - checkPosition: ( { context, ref } ) => { - if ( context.wporg.queryFilter.isOpen ) { - const position = ref.getBoundingClientRect(); - if ( position.left < 0 ) { - ref.style.left = 0; - } - } - }, - focusFirstElement: ( { context, ref } ) => { - if ( context.wporg.queryFilter.isOpen ) { - ref.querySelector( 'form input:first-child' ).focus(); - } - }, - }, + if ( context.isOpen ) { + const focusableElements = ref.querySelectorAll( focusableSelectors ); + context.firstFocusableElement = focusableElements[ 0 ]; + context.lastFocusableElement = focusableElements[ focusableElements.length - 1 ]; + } + }, + checkPosition: () => { + const context = getContext(); + const { ref } = getElement(); + if ( context.isOpen ) { + const position = ref.getBoundingClientRect(); + if ( position.left < 0 ) { + ref.style.left = 0; + } + } + }, + focusFirstElement: () => { + const context = getContext(); + const { ref } = getElement(); + if ( context.isOpen ) { + ref.querySelector( 'form input:first-child' ).focus(); + } }, }, } ); From 38c050b767a33227475f0c8ba9d70dfd116a40b4 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 26 Jan 2024 13:04:21 -0500 Subject: [PATCH 2/4] Pass translations from PHP This is a workaround for i18n functions, since they can't be imported into a module --- mu-plugins/blocks/query-filter/render.php | 5 +++++ mu-plugins/blocks/query-filter/src/view.js | 5 ++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/mu-plugins/blocks/query-filter/render.php b/mu-plugins/blocks/query-filter/render.php index 7fee55532..848460604 100644 --- a/mu-plugins/blocks/query-filter/render.php +++ b/mu-plugins/blocks/query-filter/render.php @@ -152,6 +152,11 @@ class="wporg-query-filter__modal-action-clear" /> value="" />
diff --git a/mu-plugins/blocks/query-filter/src/view.js b/mu-plugins/blocks/query-filter/src/view.js index bfa38f7a7..6017effd9 100644 --- a/mu-plugins/blocks/query-filter/src/view.js +++ b/mu-plugins/blocks/query-filter/src/view.js @@ -64,10 +64,9 @@ const { actions } = store( 'wporg/query-filter', { // Only update the apply button if multiple selections are allowed. if ( context.hasMultiple ) { if ( count ) { - /* translators: %s is count of currently selected filters. */ - applyButton.value = 'Apply (%s)'; + applyButton.value = applyButton.dataset.labelWithCount.replace( '%s', count ); } else { - applyButton.value = 'Apply'; + applyButton.value = applyButton.dataset.label; } } From d77ef00d52ce818c0068822a01c1f42307ae2b4a Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Fri, 26 Jan 2024 15:03:54 -0500 Subject: [PATCH 3/4] Fix linter issue --- mu-plugins/blocks/query-filter/render.php | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/mu-plugins/blocks/query-filter/render.php b/mu-plugins/blocks/query-filter/render.php index 848460604..e0beab420 100644 --- a/mu-plugins/blocks/query-filter/render.php +++ b/mu-plugins/blocks/query-filter/render.php @@ -140,6 +140,9 @@ class="wporg-query-filter__modal-close" * @param WP_Block $block The current block being rendered. */ do_action( 'wporg_query_filter_in_form', $settings['key'], $block ); + + /* translators: %s is count of currently selected filters. */ + $label_count = __( 'Apply (%s)', 'wporg' ); ?>
@@ -152,10 +155,7 @@ class="wporg-query-filter__modal-action-clear" /> value="" /> From 1c94cdf4bd02e149a446a99b21048b11a27d1189 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 29 Jan 2024 16:43:05 -0500 Subject: [PATCH 4/4] Switch back to PostCSS --- mu-plugins/blocks/query-filter/src/index.js | 2 +- mu-plugins/blocks/query-filter/src/{style.scss => style.pcss} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename mu-plugins/blocks/query-filter/src/{style.scss => style.pcss} (100%) diff --git a/mu-plugins/blocks/query-filter/src/index.js b/mu-plugins/blocks/query-filter/src/index.js index 4f6215058..66e617e60 100644 --- a/mu-plugins/blocks/query-filter/src/index.js +++ b/mu-plugins/blocks/query-filter/src/index.js @@ -9,7 +9,7 @@ import { useBlockProps } from '@wordpress/block-editor'; * Internal dependencies */ import metadata from './block.json'; -import './style.scss'; +import './style.pcss'; function Edit( { attributes, name } ) { return ( diff --git a/mu-plugins/blocks/query-filter/src/style.scss b/mu-plugins/blocks/query-filter/src/style.pcss similarity index 100% rename from mu-plugins/blocks/query-filter/src/style.scss rename to mu-plugins/blocks/query-filter/src/style.pcss