Skip to content

Commit

Permalink
Interactivity API: migration to the new store() API (#55459)
Browse files Browse the repository at this point in the history 
* Copy new `store()` implementation

* Enable TS for the interactivity API

* Update directive bind tests

* Update runtime with latest changes

* Replace wp-effect tests with wp-watch tests

* Update wp-body tests

* Update wp-class tests

* Update wp-context tests

* Update wp-init tests

* Fix wp-key assignment

* Update wp-key tests

* Update wp-on tests

* Update directive priorities tests

* Update directive slot tests

* Update wp-style tests

* Update wp-text tests

* Update negation operator tests

* Update router navigate tests

* Refactor tests for router regions

* Removed afterLoad tests

* Fix initial state tag id

* Update initial state tests

* Update tovdom-islands tests

* Update tovdom tests

* Replace store with initial state in PHP

* Fix wp prefixes in initial state

* Add types declaration to package.json so that TS works

* Add `wp-each` directive in the new store API

* Add workaround for store API SDR

* Modify children instead of replacing the element

* Migrate File block to the new store API

* Refactor Image block to use the new store API

* Update runtime

* Fix file namespace

* Finish migrating the Image block

* Update Navigation block

* Replace effect with watch in Image

* Fix namespace assignment

* Fix image state getter names

* Fix getters in navigation state

* Update Query block

* Fix directives for Navigation block

* Add missing store namespace

* Allow forward slashes in namespaces

* Migrate Search block

* Update Initial State and its tests

* Revert "Add `wp-each` directive in the new store API"

This reverts commit 51bf723.

* Revert "Update Initial State and its tests"

This reverts commit 7e5580c.

* Revert "Replace store with initial state in PHP"

This reverts commit 519880f.

* Revert "Add workaround for store API SDR"

This reverts commit 933c4ac.

* Fix phpcs errors

* Update Query phpunit tests

* Fix Query's Interactivity API context definition

* Fix action name in Navigation

* Make `double()` prop a getter

Co-authored-by: Luis Herranz <[email protected]>

* Fix `double()` prop definition

* Rename effects to callbacks in tests

* Rename effects to callbacks in blocks

* Rename effects to callbacks in unit tests

* Move callbacks at the end of the store definition

* Remove `layout-init` directive

* Add default args for `openMenu` and  `closeMenu`

* Change Interactivity Store script tag ID

---------

Co-authored-by: Michal Czaplinski <[email protected]>
Co-authored-by: Mario Santos <[email protected]>
Co-authored-by: Luis Herranz <[email protected]>
  • Loading branch information
@DAreRodz @michalczaplinski
@SantosGuillamot @luisherranz @derekblank
4 people authored and derekblank committed Dec 7, 2023
1 parent 9b95b63 commit 5d41abe
Show file tree
Hide file tree
Showing 70 changed files with 1,573 additions and 1,486 deletions.
38 changes: 17 additions & 21 deletions lib/compat/wordpress-6.5/class-wp-navigation-block-renderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -429,25 +429,25 @@ private static function get_responsive_container_markup( $attributes, $inner_blo
$close_button_directives = '';
if ( $should_load_view_script ) {
$open_button_directives = '
data-wp-on--click="actions.core.navigation.openMenuOnClick"
data-wp-on--keydown="actions.core.navigation.handleMenuKeydown"
data-wp-on--click="actions.openMenuOnClick"
data-wp-on--keydown="actions.handleMenuKeydown"
';
$responsive_container_directives = '
data-wp-class--has-modal-open="selectors.core.navigation.isMenuOpen"
data-wp-class--is-menu-open="selectors.core.navigation.isMenuOpen"
data-wp-effect="effects.core.navigation.initMenu"
data-wp-on--keydown="actions.core.navigation.handleMenuKeydown"
data-wp-on--focusout="actions.core.navigation.handleMenuFocusout"
data-wp-class--has-modal-open="state.isMenuOpen"
data-wp-class--is-menu-open="state.isMenuOpen"
data-wp-watch="callbacks.initMenu"
data-wp-on--keydown="actions.handleMenuKeydown"
data-wp-on--focusout="actions.handleMenuFocusout"
tabindex="-1"
';
$responsive_dialog_directives = '
data-wp-bind--aria-modal="selectors.core.navigation.ariaModal"
data-wp-bind--aria-label="selectors.core.navigation.ariaLabel"
data-wp-bind--role="selectors.core.navigation.roleAttribute"
data-wp-effect="effects.core.navigation.focusFirstElement"
data-wp-bind--aria-modal="state.ariaModal"
data-wp-bind--aria-label="state.ariaLabel"
data-wp-bind--role="state.roleAttribute"
data-wp-watch="callbacks.focusFirstElement"
';
$close_button_directives = '
data-wp-on--click="actions.core.navigation.closeMenuOnClick"
data-wp-on--click="actions.closeMenuOnClick"
';
}

Expand Down Expand Up @@ -521,19 +521,15 @@ private static function get_nav_element_directives( $should_load_view_script ) {
// When adding to this array be mindful of security concerns.
$nav_element_context = wp_json_encode(
array(
'core' => array(
'navigation' => array(
'overlayOpenedBy' => array(),
'type' => 'overlay',
'roleAttribute' => '',
'ariaLabel' => __( 'Menu' ),
),
),
'overlayOpenedBy' => array(),
'type' => 'overlay',
'roleAttribute' => '',
'ariaLabel' => __( 'Menu' ),
),
JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
);
return '
data-wp-interactive
data-wp-interactive=\'{"namespace":"core/navigation"}\'
data-wp-context=\'' . $nav_element_context . '\'
';
}
Expand Down
2 changes: 1 addition & 1 deletion lib/experimental/interactivity-api/class-wp-interactivity-store.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ public static function render() {
return;
}
echo sprintf(
'<script id="wp-interactivity-store-data" type="application/json">%s</script>',
'<script id="wp-interactivity-initial-state" type="application/json">%s</script>',
wp_json_encode( self::$store, JSON_HEX_TAG | JSON_HEX_AMP )
);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/file/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ static function ( $matches ) {
if ( $should_load_view_script ) {
$processor = new WP_HTML_Tag_Processor( $content );
$processor->next_tag();
$processor->set_attribute( 'data-wp-interactive', '' );
$processor->set_attribute( 'data-wp-interactive', '{"namespace":"core/file"}' );
$processor->next_tag( 'object' );
$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
$processor->set_attribute( 'hidden', true );
return $processor->get_updated_html();
}
Expand Down
12 changes: 5 additions & 7 deletions packages/block-library/src/file/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,12 @@ import { store } from '@wordpress/interactivity';
/**
* Internal dependencies
*/
import { browserSupportsPdfs as hasPdfPreview } from './utils';
import { browserSupportsPdfs } from './utils';

store( {
selectors: {
core: {
file: {
hasPdfPreview,
},
store( 'core/file', {
state: {
get hasPdfPreview() {
return browserSupportsPdfs();
},
},
} );
80 changes: 38 additions & 42 deletions packages/block-library/src/image/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,27 +187,23 @@ function block_core_image_render_lightbox( $block_content, $block ) {
$w = new WP_HTML_Tag_Processor( $block_content );
$w->next_tag( 'figure' );
$w->add_class( 'wp-lightbox-container' );
$w->set_attribute( 'data-wp-interactive', true );
$w->set_attribute( 'data-wp-interactive', '{"namespace":"core/image"}' );

$w->set_attribute(
'data-wp-context',
sprintf(
'{ "core":
{ "image":
{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "%s",
"imageUploadedSrc": "%s",
"imageCurrentSrc": "",
"targetWidth": "%s",
"targetHeight": "%s",
"scaleAttr": "%s",
"dialogLabel": "%s"
}
}
'{ "imageLoaded": false,
"initialized": false,
"lightboxEnabled": false,
"hideAnimationEnabled": false,
"preloadInitialized": false,
"lightboxAnimation": "%s",
"imageUploadedSrc": "%s",
"imageCurrentSrc": "",
"targetWidth": "%s",
"targetHeight": "%s",
"scaleAttr": "%s",
"dialogLabel": "%s"
}',
$lightbox_animation,
$img_uploaded_src,
Expand All @@ -218,14 +214,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
)
);
$w->next_tag( 'img' );
$w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
$w->set_attribute( 'data-wp-init', 'callbacks.initOriginImage' );
$w->set_attribute( 'data-wp-on--load', 'actions.handleLoad' );
$w->set_attribute( 'data-wp-watch', 'callbacks.setButtonStyles' );
// We need to set an event callback on the `img` specifically
// because the `figure` element can also contain a caption, and
// we don't want to trigger the lightbox when the caption is clicked.
$w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
$w->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );
$w->set_attribute( 'data-wp-watch--setStylesOnResize', 'callbacks.setStylesOnResize' );
$body_content = $w->get_updated_html();

// Add a button alongside image in the body content.
Expand All @@ -239,9 +235,9 @@ class="lightbox-trigger"
type="button"
aria-haspopup="dialog"
aria-label="' . esc_attr( $aria_label ) . '"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
data-wp-on--click="actions.showLightbox"
data-wp-style--right="context.imageButtonRight"
data-wp-style--top="context.imageButtonTop"
>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
Expand All @@ -267,8 +263,8 @@ class="lightbox-trigger"
// use the exact same image as in the content when the lightbox is first opened while
// we wait for the larger image to load.
$m->set_attribute( 'src', '' );
$m->set_attribute( 'data-wp-bind--src', 'context.core.image.imageCurrentSrc' );
$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
$m->set_attribute( 'data-wp-bind--src', 'context.imageCurrentSrc' );
$m->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
$initial_image_content = $m->get_updated_html();

$q = new WP_HTML_Tag_Processor( $block_content );
Expand All @@ -283,8 +279,8 @@ class="lightbox-trigger"
// and Chrome (see https://github.com/WordPress/gutenberg/pull/52765#issuecomment-1674008151). Until that
// is resolved, manually setting the 'src' seems to be the best solution to load the large image on demand.
$q->set_attribute( 'src', '' );
$q->set_attribute( 'data-wp-bind--src', 'selectors.core.image.enlargedImgSrc' );
$q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
$q->set_attribute( 'data-wp-bind--src', 'state.enlargedImgSrc' );
$q->set_attribute( 'data-wp-style--object-fit', 'state.lightboxObjectFit' );
$enlarged_image_content = $q->get_updated_html();

// If the current theme does NOT have a `theme.json`, or the colors are not defined,
Expand All @@ -307,21 +303,21 @@ class="lightbox-trigger"

$lightbox_html = <<<HTML
<div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
data-wp-bind--role="selectors.core.image.roleAttribute"
data-wp-bind--aria-label="selectors.core.image.dialogLabel"
data-wp-class--initialized="context.core.image.initialized"
data-wp-class--active="context.core.image.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
data-wp-bind--aria-modal="selectors.core.image.ariaModal"
data-wp-effect="effects.core.image.initLightbox"
data-wp-on--keydown="actions.core.image.handleKeydown"
data-wp-on--touchstart="actions.core.image.handleTouchStart"
data-wp-on--touchmove="actions.core.image.handleTouchMove"
data-wp-on--touchend="actions.core.image.handleTouchEnd"
data-wp-on--click="actions.core.image.hideLightbox"
data-wp-bind--role="state.roleAttribute"
data-wp-bind--aria-label="state.dialogLabel"
data-wp-class--initialized="context.initialized"
data-wp-class--active="context.lightboxEnabled"
data-wp-class--hideAnimationEnabled="context.hideAnimationEnabled"
data-wp-bind--aria-modal="state.ariaModal"
data-wp-watch="callbacks.initLightbox"
data-wp-on--keydown="actions.handleKeydown"
data-wp-on--touchstart="actions.handleTouchStart"
data-wp-on--touchmove="actions.handleTouchMove"
data-wp-on--touchend="actions.handleTouchEnd"
data-wp-on--click="actions.hideLightbox"
tabindex="-1"
>
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.core.image.hideLightbox">
<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button" data-wp-on--click="actions.hideLightbox">
$close_button_icon
</button>
<div class="lightbox-image-container">$initial_image_content</div>
Expand Down
Loading

0 comments on commit 5d41abe

Please sign in to comment.