- { __(
- 'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
- ) }
+ if ( blockEditingMode !== 'default' ) {
+ return null;
+ }
- { isWeb && (
-
- { __( 'Learn more about anchors' ) }
-
- ) }
-
- }
- value={ anchor || '' }
- placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
- onChange={ ( nextValue ) => {
- nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
- setAttributes( {
- anchor: nextValue,
- } );
- } }
- autoCapitalize="none"
- autoComplete="off"
- />
- );
+ const isWeb = Platform.OS === 'web';
return (
- <>
- { isWeb && blockEditingMode === 'default' && (
-
- { textControl }
-
- ) }
- { /*
- * We plan to remove scoping anchors to 'core/heading' to support
- * anchors for all eligble blocks. Additionally we plan to explore
- * leveraging InspectorAdvancedControls instead of a custom
- * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363
- */ }
- { ! isWeb && blockName === 'core/heading' && (
-
-
- { textControl }
-
-
- ) }
-
+
+
+ { __(
+ 'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'
+ ) }
+
+ { isWeb && (
+
+ { __( 'Learn more about anchors' ) }
+
+ ) }
+
+ }
+ value={ anchor || '' }
+ placeholder={ ! isWeb ? __( 'Add an anchor' ) : null }
+ onChange={ ( nextValue ) => {
+ nextValue = nextValue.replace( ANCHOR_REGEX, '-' );
+ setAttributes( {
+ anchor: nextValue,
+ } );
+ } }
+ autoCapitalize="none"
+ autoComplete="off"
+ />
+
);
}
diff --git a/packages/block-editor/src/hooks/position.js b/packages/block-editor/src/hooks/position.js
index e1e26d54aa2420..89b7a2d6b23b44 100644
--- a/packages/block-editor/src/hooks/position.js
+++ b/packages/block-editor/src/hooks/position.js
@@ -152,7 +152,7 @@ export function hasPositionValue( props ) {
* @return {boolean} Whether or not the block is set to a sticky or fixed position.
*/
export function hasStickyOrFixedPositionValue( attributes ) {
- const positionType = attributes.style?.position?.type;
+ const positionType = attributes?.style?.position?.type;
return positionType === 'sticky' || positionType === 'fixed';
}
diff --git a/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap b/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap
new file mode 100644
index 00000000000000..03407a1fe55d85
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/__snapshots__/anchor.native.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`anchor should set the ID attribute on the block 1`] = `
+"
+
+"
+`;
diff --git a/packages/block-editor/src/hooks/test/anchor.native.js b/packages/block-editor/src/hooks/test/anchor.native.js
new file mode 100644
index 00000000000000..d6d2de845cbf48
--- /dev/null
+++ b/packages/block-editor/src/hooks/test/anchor.native.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import {
+ addBlock,
+ changeTextOfTextInput,
+ getEditorHtml,
+ initializeEditor,
+ openBlockSettings,
+ screen,
+ setupCoreBlocks,
+} from 'test/helpers';
+
+setupCoreBlocks( [ 'core/paragraph' ] );
+
+describe( 'anchor', () => {
+ it( 'should set the ID attribute on the block', async () => {
+ // Arrange
+ await initializeEditor();
+ const block = await addBlock( screen, 'Paragraph' );
+ await openBlockSettings( screen, block );
+
+ // Act
+ await changeTextOfTextInput(
+ await screen.getByPlaceholderText( 'Add an anchor' ),
+ 'my-anchor'
+ );
+
+ // Assert
+ expect( getEditorHtml() ).toMatchSnapshot();
+ } );
+} );
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 8382ad1e7da32d..f09f5ffc8b619d 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -2,11 +2,6 @@
// @todo: this particular minimal style of placeholder could be componentized further.
.wp-block-image.wp-block-image {
- &:not(.is-selected) .components-placeholder__fieldset {
- // Show only is selected.
- display: none;
- }
-
// Show Placeholder style on-select.
&.is-selected .components-placeholder {
// Block UI appearance.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
index e2a18c4bec8d23..bcb1076baed54a 100644
--- a/packages/block-library/src/navigation-link/edit.js
+++ b/packages/block-library/src/navigation-link/edit.js
@@ -333,6 +333,9 @@ export default function NavigationLinkEdit( {
isKeyboardEvent.primary( event, 'k' ) ||
( ( ! url || isDraft || isInvalid ) && event.keyCode === ENTER )
) {
+ // Required to prevent the command center from opening,
+ // as it shares the CMD+K shortcut.
+ // See https://github.com/WordPress/gutenberg/pull/59845.
event.preventDefault();
setIsLinkOpen( true );
}
diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js
index 401d9512797b09..f8d9b0eaaedb84 100644
--- a/packages/block-library/src/navigation-submenu/edit.js
+++ b/packages/block-library/src/navigation-submenu/edit.js
@@ -279,6 +279,9 @@ export default function NavigationSubmenuEdit( {
function onKeyDown( event ) {
if ( isKeyboardEvent.primary( event, 'k' ) ) {
+ // Required to prevent the command center from opening,
+ // as it shares the CMD+K shortcut.
+ // See https://github.com/WordPress/gutenberg/pull/59845.
event.preventDefault();
setIsLinkOpen( true );
}
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index dc2850df12e04a..3b526ddb85dc69 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -342,16 +342,7 @@ function Navigation( {
const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
const onSelectClassicMenu = async ( classicMenu ) => {
- const navMenu = await convertClassicMenu(
- classicMenu.id,
- classicMenu.name,
- 'draft'
- );
- if ( navMenu ) {
- handleUpdateMenu( navMenu.id, {
- focusNavigationBlock: true,
- } );
- }
+ return convertClassicMenu( classicMenu.id, classicMenu.name, 'draft' );
};
const onSelectNavigationMenu = ( menuId ) => {
@@ -402,6 +393,9 @@ function Navigation( {
showClassicMenuConversionNotice(
__( 'Classic menu imported successfully.' )
);
+ handleUpdateMenu( createNavigationMenuPost?.id, {
+ focusNavigationBlock: true,
+ } );
}
if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR ) {
@@ -414,6 +408,8 @@ function Navigation( {
classicMenuConversionError,
hideClassicMenuConversionNotice,
showClassicMenuConversionNotice,
+ createNavigationMenuPost?.id,
+ handleUpdateMenu,
] );
useEffect( () => {
@@ -866,50 +862,52 @@ function Navigation( {
) }
- { isLoading && (
-
+
+ { isLoading && (
-
- ) }
+ ) }
- { ! isLoading && (
-
-
-
- { isEntityAvailable && (
-
- ) }
-
-
- ) }
+ { ! isLoading && (
+ <>
+
+
+ { isEntityAvailable && (
+
+ ) }
+
+
+ ) }
+
);
diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index 75f5bec3ff451d..05c2fb1f28b135 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -77,6 +77,9 @@
"width": true
}
},
+ "shadow": {
+ "__experimentalSkipSerialization": true
+ },
"html": false,
"spacing": {
"margin": true,
@@ -86,6 +89,9 @@
"clientNavigation": true
}
},
+ "selectors": {
+ "shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder"
+ },
"editorStyle": "wp-block-post-featured-image-editor",
"style": "wp-block-post-featured-image"
}
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 5e3843fcedbaeb..a37322467d1f52 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -24,6 +24,7 @@ import {
useBlockProps,
store as blockEditorStore,
__experimentalUseBorderProps as useBorderProps,
+ __experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
useBlockEditingMode,
} from '@wordpress/block-editor';
import { useMemo } from '@wordpress/element';
@@ -144,6 +145,7 @@ export default function PostFeaturedImageEdit( {
style: { width, height, aspectRatio },
} );
const borderProps = useBorderProps( attributes );
+ const shadowProps = getShadowClassesAndStyles( attributes );
const blockEditingMode = useBlockEditingMode();
const placeholder = ( content ) => {
@@ -158,6 +160,7 @@ export default function PostFeaturedImageEdit( {
height: !! aspectRatio && '100%',
width: !! aspectRatio && '100%',
...borderProps.style,
+ ...shadowProps.style,
} }
>
{ content }
@@ -267,6 +270,7 @@ export default function PostFeaturedImageEdit( {
const label = __( 'Add a featured image' );
const imageStyles = {
...borderProps.style,
+ ...shadowProps.style,
height: aspectRatio ? '100%' : height,
width: !! aspectRatio && '100%',
objectFit: !! ( height || aspectRatio ) && scale,
diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index 347425c23a4a08..815da4ee63fe19 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -50,6 +50,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
if ( ! empty( $attributes['scale'] ) ) {
$extra_styles .= "object-fit:{$attributes['scale']};";
}
+ if ( ! empty( $attributes['style']['shadow'] ) ) {
+ $shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ) );
+
+ if ( ! empty( $shadow_styles['css'] ) ) {
+ $extra_styles .= $shadow_styles['css'];
+ }
+ }
if ( ! empty( $extra_styles ) ) {
$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index e788f62c1eff1b..cfb9d418ffbaa8 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,7 +1,8 @@
## Unreleased
-- `Drowdown` : Add styling support for `MenuGroup` ([#59723](https://github.com/WordPress/gutenberg/pull/59723)).
+- `Dropdown` : Add styling support for `MenuGroup` ([#59723](https://github.com/WordPress/gutenberg/pull/59723)).
+- `Placeholder` : Allow overflow but only when placeholder is selected, to fix a layout shift. `MenuGroup` ([#59857](https://github.com/WordPress/gutenberg/pull/59857)).
### Enhancements
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 8c6ca721123004..eda0dd3329d39c 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -212,7 +212,11 @@
// By painting the borders here, we enable them to be replaced by the Border control.
@include placeholder-style();
- overflow: auto;
+
+ overflow: hidden;
+ .is-selected & {
+ overflow: auto;
+ }
}
// Position the spinner.
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/block.json b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/block.json
new file mode 100644
index 00000000000000..088572086f000c
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/block.json
@@ -0,0 +1,15 @@
+{
+ "$schema": "https://schemas.wp.org/trunk/block.json",
+ "apiVersion": 2,
+ "name": "test/deferred-store",
+ "title": "E2E Interactivity tests - deferred store",
+ "category": "text",
+ "icon": "heart",
+ "description": "",
+ "supports": {
+ "interactivity": true
+ },
+ "textdomain": "e2e-interactivity",
+ "viewScriptModule": "file:./view.js",
+ "render": "file:./render.php"
+}
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/render.php b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/render.php
new file mode 100644
index 00000000000000..0d8c2cbeb5125d
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/render.php
@@ -0,0 +1,15 @@
+
+
+ '!dlrow ,olleH' ) ); ?>
+>
+
+
+
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.asset.php b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.asset.php
new file mode 100644
index 00000000000000..db23afdf657a19
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.asset.php
@@ -0,0 +1 @@
+ array( '@wordpress/interactivity' ) );
diff --git a/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js
new file mode 100644
index 00000000000000..8474757a0bd8bf
--- /dev/null
+++ b/packages/e2e-tests/plugins/interactive-blocks/deferred-store/view.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+document.addEventListener( 'DOMContentLoaded', () => {
+ setTimeout( () => {
+ store( 'test/deferred-store', {
+ state: {
+ reversedText() {
+ return [ ...getContext().text ].reverse().join( '' );
+ },
+
+ get reversedTextGetter() {
+ return [ ...getContext().text ].reverse().join( '' );
+ },
+ },
+ } );
+ }, 50 );
+} );
diff --git a/packages/editor/src/components/error-boundary/index.native.js b/packages/editor/src/components/error-boundary/index.native.js
index 6f76a4fbdccfe5..d627bfa0e7893c 100644
--- a/packages/editor/src/components/error-boundary/index.native.js
+++ b/packages/editor/src/components/error-boundary/index.native.js
@@ -147,7 +147,7 @@ class ErrorBoundary extends Component {
{ __(
- 'The editor has encountered an unexpected error.'
+ 'The editor has encountered an unexpected error'
) }
diff --git a/packages/editor/src/components/error-boundary/style.native.scss b/packages/editor/src/components/error-boundary/style.native.scss
index 6c461207768679..f3f26ba4c0b200 100644
--- a/packages/editor/src/components/error-boundary/style.native.scss
+++ b/packages/editor/src/components/error-boundary/style.native.scss
@@ -32,7 +32,7 @@
}
.error-boundary__icon-container--dark {
- background-color: $gray-20;
+ background-color: rgba(235, 235, 245, 0.3);
}
.error-boundary__icon {
@@ -64,7 +64,7 @@
}
.error-boundary__message--dark {
- color: $white;
+ color: rgba(235, 235, 245, 0.6);
}
.error-boundary__actions-container {
@@ -82,7 +82,7 @@
}
.copy-button__container--dark {
- background-color: $gray-20;
+ background-color: $white;
}
.copy-button__container--secondary {
@@ -91,6 +91,7 @@
}
.copy-button__container--secondary-dark {
+ border-color: rgba(255, 255, 255, 0.3);
background-color: $black;
}
diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md
index cb3f2fc97dac1d..c8e3432e862c89 100644
--- a/packages/interactivity/CHANGELOG.md
+++ b/packages/interactivity/CHANGELOG.md
@@ -4,6 +4,7 @@
### Bug Fixes
+- Ensure that stores are available for subscription before hydration. ([#59842](https://github.com/WordPress/gutenberg/pull/59842))
- Ensure scope is restored when catching exceptions thrown in async generator actions. ([#59708](https://github.com/WordPress/gutenberg/pull/59708))
## 5.2.0 (2024-03-06)
diff --git a/packages/interactivity/docs/api-reference.md b/packages/interactivity/docs/api-reference.md
index 78aefe7823d0fa..c8ffc64fbac3eb 100644
--- a/packages/interactivity/docs/api-reference.md
+++ b/packages/interactivity/docs/api-reference.md
@@ -1011,7 +1011,7 @@ It returns an object with two keys:
##### ref
-`ref` is the reference to the DOM element as an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)
+`ref` is the reference to the DOM element as an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). It is equivalent to `useRef` in Preact or React, so it can be `null` when `ref` has not been attached to the actual DOM element yet, i.e., when it is being hydrated or mounted.
##### attributes
diff --git a/packages/interactivity/src/hooks.tsx b/packages/interactivity/src/hooks.tsx
index 0b869dee4fda8e..00c3c0d6d1729d 100644
--- a/packages/interactivity/src/hooks.tsx
+++ b/packages/interactivity/src/hooks.tsx
@@ -15,7 +15,7 @@ import type { VNode, Context, RefObject } from 'preact';
/**
* Internal dependencies
*/
-import { stores } from './store';
+import { store, stores, universalUnlock } from './store';
interface DirectiveEntry {
value: string | Object;
namespace: string;
@@ -259,8 +259,14 @@ export const directive = (
// Resolve the path to some property of the store object.
const resolve = ( path, namespace ) => {
+ let resolvedStore = stores.get( namespace );
+ if ( typeof resolvedStore === 'undefined' ) {
+ resolvedStore = store( namespace, undefined, {
+ lock: universalUnlock,
+ } );
+ }
let current = {
- ...stores.get( namespace ),
+ ...resolvedStore,
context: getScope().context[ namespace ],
};
path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
diff --git a/packages/interactivity/src/store.ts b/packages/interactivity/src/store.ts
index 055e6e3cc99ff4..2cd8ddd9e3fb23 100644
--- a/packages/interactivity/src/store.ts
+++ b/packages/interactivity/src/store.ts
@@ -202,7 +202,7 @@ interface StoreOptions {
lock?: boolean | string;
}
-const universalUnlock =
+export const universalUnlock =
'I acknowledge that using a private store means my plugin will inevitably break on the next store release.';
/**
diff --git a/packages/react-native-editor/CHANGELOG.md b/packages/react-native-editor/CHANGELOG.md
index 70c636da4dccbd..a5d73156bf5571 100644
--- a/packages/react-native-editor/CHANGELOG.md
+++ b/packages/react-native-editor/CHANGELOG.md
@@ -15,6 +15,7 @@ For each user feature we should also add a importance categorization label to i
- [**] [internal] Upgrade React Native to version 0.73.3 [#58475]
- [**] Add error boundary components and exception logging [#59221]
- [**] Fix crash occurring when the URL associated with a Video block is changed too quickly [#59841]
+- [**] Enable setting HTML anchor IDs for all supported block types [#59802]
## 1.114.1
- [**] Fix a crash produced when the content of a synced pattern is updated [#59632]
diff --git a/schemas/json/block.json b/schemas/json/block.json
index a39cec0e78c5d0..672de711be79f3 100644
--- a/schemas/json/block.json
+++ b/schemas/json/block.json
@@ -294,12 +294,12 @@
},
"heading": {
"type": "boolean",
- "description": "This property adds block controls which allow the user to set heading colors in a block, heading color is disabled by default.\n\nHeading color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.heading, its attributes definition is extended to include the style attribute",
+ "description": "This property adds block controls which allow the user to set heading colors in a block. Heading color is disabled by default.\n\nHeading color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.heading, its attributes definition is extended to include the style attribute",
"default": false
},
"button": {
"type": "boolean",
- "description": "This property adds block controls which allow the user to set button colors in a block, button color is disabled by default.\n\nButton color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.heading, its attributes definition is extended to include the style attribute",
+ "description": "This property adds block controls which allow the user to set button colors in a block. Button color is disabled by default.\n\nButton color presets are sourced from the editor-color-palette theme support.\n\nWhen the block declares support for color.button, its attributes definition is extended to include the style attribute",
"default": false
},
"enableContrastChecker": {
diff --git a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
index fd7113fe170959..c97ea3f1b17b51 100644
--- a/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
+++ b/test/e2e/specs/editor/blocks/navigation-list-view.spec.js
@@ -543,6 +543,48 @@ test.describe( 'Navigation block - List view editing', () => {
// we have unmounted the list view and then remounted it).
await expect( linkControl.getSearchInput() ).toBeHidden();
} );
+
+ test( `can create a new menu without losing focus`, async ( {
+ page,
+ editor,
+ requestUtils,
+ } ) => {
+ await requestUtils.createNavigationMenu( navMenuBlocksFixture );
+
+ await editor.insertBlock( { name: 'core/navigation' } );
+
+ await editor.openDocumentSettingsSidebar();
+
+ await page.getByLabel( 'Test Menu' ).click();
+
+ await page.keyboard.press( 'ArrowUp' );
+
+ await expect(
+ page.getByRole( 'menuitem', { name: 'Create new menu' } )
+ ).toBeFocused();
+
+ await page.keyboard.press( 'Enter' );
+
+ // Check that the menu was created
+ await expect(
+ page
+ .getByTestId( 'snackbar' )
+ .getByText( 'Navigation Menu successfully created.' )
+ ).toBeVisible();
+ await expect(
+ page.getByText( 'This navigation menu is empty.' )
+ ).toBeVisible();
+
+ // Move focus to the appender
+ await page.keyboard.press( 'ArrowDown' );
+ await expect(
+ editor.canvas
+ .getByRole( 'document', {
+ name: 'Block: Navigation',
+ } )
+ .getByLabel( 'Add block' )
+ ).toBeFocused();
+ } );
} );
class LinkControl {
diff --git a/test/e2e/specs/interactivity/deferred-store.spec.ts b/test/e2e/specs/interactivity/deferred-store.spec.ts
new file mode 100644
index 00000000000000..4521322e61dfc9
--- /dev/null
+++ b/test/e2e/specs/interactivity/deferred-store.spec.ts
@@ -0,0 +1,36 @@
+/**
+ * Internal dependencies
+ */
+import { test, expect } from './fixtures';
+
+test.describe( 'deferred store', () => {
+ test.beforeAll( async ( { interactivityUtils: utils } ) => {
+ await utils.activatePlugins();
+ await utils.addPostWithBlock( 'test/deferred-store' );
+ } );
+ test.beforeEach( async ( { interactivityUtils: utils, page } ) => {
+ await page.goto( utils.getLink( 'test/deferred-store' ) );
+ } );
+ test.afterAll( async ( { interactivityUtils: utils } ) => {
+ await utils.deactivatePlugins();
+ await utils.deleteAllPosts();
+ } );
+
+ test( 'Ensure that a store can be subscribed to before it is initialized', async ( {
+ page,
+ } ) => {
+ const resultInput = page.getByTestId( 'result' );
+ await expect( resultInput ).toHaveText( '' );
+ await expect( resultInput ).toHaveText( 'Hello, world!' );
+ } );
+
+ // There is a known issue for deferred getters right now.
+ // eslint-disable-next-line playwright/no-skipped-test
+ test.skip( 'Ensure that a state getter can be subscribed to before it is initialized', async ( {
+ page,
+ } ) => {
+ const resultInput = page.getByTestId( 'result-getter' );
+ await expect( resultInput ).toHaveText( '' );
+ await expect( resultInput ).toHaveText( 'Hello, world!' );
+ } );
+} );