diff --git a/packages/editor/src/components/document-tools/index.js b/packages/editor/src/components/document-tools/index.js
index 6a8c20c8d7055..146945f7343bf 100644
--- a/packages/editor/src/components/document-tools/index.js
+++ b/packages/editor/src/components/document-tools/index.js
@@ -96,7 +96,7 @@ function DocumentTools( { className, disableBlockTools = false } ) {
/* translators: button label text should, if possible, be under 16 characters. */
const longLabel = _x(
- 'Toggle block inserter',
+ 'Block Inserter',
'Generic label for block inserter button'
);
const shortLabel = ! isInserterOpened ? __( 'Add' ) : __( 'Close' );
diff --git a/packages/editor/src/components/header/style.scss b/packages/editor/src/components/header/style.scss
index 8712121fff3ea..4259ef4b8a208 100644
--- a/packages/editor/src/components/header/style.scss
+++ b/packages/editor/src/components/header/style.scss
@@ -130,6 +130,7 @@
// ... and display labels.
&::after {
content: attr(aria-label);
+ white-space: nowrap;
}
&[aria-disabled="true"] {
background-color: transparent;
diff --git a/packages/editor/src/components/post-url/index.js b/packages/editor/src/components/post-url/index.js
index 8d072fa2eeb5d..c7dc5712dcac4 100644
--- a/packages/editor/src/components/post-url/index.js
+++ b/packages/editor/src/components/post-url/index.js
@@ -17,7 +17,7 @@ import {
import { store as noticesStore } from '@wordpress/notices';
import { copySmall } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { useCopyToClipboard, useInstanceId } from '@wordpress/compose';
/**
* Internal dependencies
@@ -70,25 +70,29 @@ export default function PostURL( { onClose } ) {
const { createNotice } = useDispatch( noticesStore );
const [ forceEmptyField, setForceEmptyField ] = useState( false );
const copyButtonRef = useCopyToClipboard( permalink, () => {
- createNotice( 'info', __( 'Copied URL to clipboard.' ), {
+ createNotice( 'info', __( 'Copied Permalink to clipboard.' ), {
isDismissible: true,
type: 'snackbar',
} );
} );
+ const postUrlSlugDescriptionId =
+ 'editor-post-url__slug-descriotion-' + useInstanceId( PostURL );
+
return (
{ isEditable && (
-
+
{ createInterpolateElement(
__(
- 'Customize the last part of the URL. Learn more. '
+ 'Customize the last part of the Permalink. Learn more. '
),
{
+ span:
+
) }
{ isEditable && (
-
- /
-
- }
- suffix={
-
-
- }
- label={ __( 'Link' ) }
- hideLabelFromVision
- value={ forceEmptyField ? '' : postSlug }
- autoComplete="off"
- spellCheck="false"
- type="text"
- className="editor-post-url__input"
- onChange={ ( newValue ) => {
- editPost( { slug: newValue } );
- // When we delete the field the permalink gets
- // reverted to the original value.
- // The forceEmptyField logic allows the user to have
- // the field temporarily empty while typing.
- if ( ! newValue ) {
- if ( ! forceEmptyField ) {
- setForceEmptyField( true );
- }
- return;
+ <>
+
+ /
+
}
- if ( forceEmptyField ) {
- setForceEmptyField( false );
+ suffix={
+
+
}
- } }
- onBlur={ ( event ) => {
- editPost( {
- slug: cleanForSlug( event.target.value ),
- } );
- if ( forceEmptyField ) {
- setForceEmptyField( false );
- }
- } }
- help={
+ label={ __( 'Slug' ) }
+ hideLabelFromVision
+ value={ forceEmptyField ? '' : postSlug }
+ autoComplete="off"
+ spellCheck="false"
+ type="text"
+ className="editor-post-url__input"
+ onChange={ ( newValue ) => {
+ editPost( { slug: newValue } );
+ // When we delete the field the permalink gets
+ // reverted to the original value.
+ // The forceEmptyField logic allows the user to have
+ // the field temporarily empty while typing.
+ if ( ! newValue ) {
+ if ( ! forceEmptyField ) {
+ setForceEmptyField( true );
+ }
+ return;
+ }
+ if ( forceEmptyField ) {
+ setForceEmptyField( false );
+ }
+ } }
+ onBlur={ ( event ) => {
+ editPost( {
+ slug: cleanForSlug(
+ event.target.value
+ ),
+ } );
+ if ( forceEmptyField ) {
+ setForceEmptyField( false );
+ }
+ } }
+ aria-describedby={ postUrlSlugDescriptionId }
+ />
+
+
+ { __( 'Permalink:' ) }
+
- }
- />
+
+
) }
{ ! isEditable && (
{
+ const { getCurrentPostId } = select( editorStore );
+ const { getEditedEntityRecord, canUser } = select( coreStore );
+ const siteSettings = canUser( 'read', {
+ kind: 'root',
+ name: 'site',
+ } )
+ ? getEditedEntityRecord( 'root', 'site' )
+ : undefined;
+ const _id = getCurrentPostId();
+ return {
+ isFrontPage: siteSettings?.page_on_front === _id,
+ };
+ }, [] );
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -42,41 +52,38 @@ export default function PostURLPanel() {
[ popoverAnchor ]
);
+ const label = isFrontPage ? __( 'Link' ) : __( 'Slug' );
+
return (
-
- (
-
+ { ! isFrontPage && (
+ (
+
);
}
function PostURLToggle( { isOpen, onClick } ) {
- const { slug, isFrontPage, postLink } = useSelect( ( select ) => {
- const { getCurrentPostId, getCurrentPost } = select( editorStore );
- const { getEditedEntityRecord, canUser } = select( coreStore );
- const siteSettings = canUser( 'read', {
- kind: 'root',
- name: 'site',
- } )
- ? getEditedEntityRecord( 'root', 'site' )
- : undefined;
- const _id = getCurrentPostId();
+ const { slug } = useSelect( ( select ) => {
return {
slug: select( editorStore ).getEditedPostSlug(),
- isFrontPage: siteSettings?.page_on_front === _id,
- postLink: getCurrentPost()?.link,
};
}, [] );
const decodedSlug = safeDecodeURIComponent( slug );
@@ -90,9 +97,26 @@ function PostURLToggle( { isOpen, onClick } ) {
aria-label={ sprintf( __( 'Change link: %s' ), decodedSlug ) }
onClick={ onClick }
>
-
- { isFrontPage ? postLink : `/${ decodedSlug }` }
-
+ <>{ decodedSlug }
);
}
+
+function FrontPageLink() {
+ const { postLink } = useSelect( ( select ) => {
+ const { getCurrentPost } = select( editorStore );
+ return {
+ postLink: getCurrentPost()?.link,
+ };
+ }, [] );
+
+ return (
+
+ { postLink }
+
+ );
+}
diff --git a/packages/editor/src/components/post-url/style.scss b/packages/editor/src/components/post-url/style.scss
index c815f89682cb2..f8a70f5fdf760 100644
--- a/packages/editor/src/components/post-url/style.scss
+++ b/packages/editor/src/components/post-url/style.scss
@@ -9,14 +9,19 @@
}
/* rtl:begin:ignore */
-.editor-post-url__link {
+.editor-post-url__link,
+.editor-post-url__front-page-link {
direction: ltr;
word-break: break-word;
- margin-top: $grid-unit-05;
- color: $gray-700;
}
/* rtl:end:ignore */
+.editor-post-url__front-page-link {
+ // Match padding on tertiary buttons for alignment.
+ padding: $grid-unit-15 * 0.5 0 $grid-unit-15 * 0.5 $grid-unit-15;
+}
+
+
.editor-post-url__link-slug {
font-weight: 600;
}
@@ -30,3 +35,16 @@
.editor-post-url__panel-toggle {
word-break: break-word;
}
+
+.editor-post-url__intro {
+ margin: 0;
+}
+
+.editor-post-url__permalink {
+ margin-top: $grid-unit-10;
+ margin-bottom: 0;
+
+ &-visual-label {
+ display: block;
+ }
+}
diff --git a/packages/reusable-blocks/src/store/test/actions.js b/packages/reusable-blocks/src/store/test/actions.js
index b2feae1195ee1..debd656868389 100644
--- a/packages/reusable-blocks/src/store/test/actions.js
+++ b/packages/reusable-blocks/src/store/test/actions.js
@@ -12,6 +12,7 @@ import {
import { store as coreStore } from '@wordpress/core-data';
import apiFetch from '@wordpress/api-fetch';
+import { store as preferencesStore } from '@wordpress/preferences';
/**
* Internal dependencies
@@ -31,6 +32,7 @@ function createRegistryWithStores() {
registry.register( blockEditorStore );
registry.register( reusableBlocksStore );
registry.register( blocksStore );
+ registry.register( preferencesStore );
// Register entity here instead of mocking API handlers for loadPostTypeEntities()
registry.dispatch( coreStore ).addEntities( [
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js
index e322a52eeba10..eea6e321aacb1 100644
--- a/test/e2e/specs/editor/blocks/columns.spec.js
+++ b/test/e2e/specs/editor/blocks/columns.spec.js
@@ -33,10 +33,8 @@ test.describe( 'Columns', () => {
.first()
.click();
- // Toggle Block inserter
- await page
- .locator( 'role=button[name="Toggle block inserter"i]' )
- .click();
+ // Block Inserter
+ await page.locator( 'role=button[name="Block Inserter"i]' ).click();
// Verify Column
const inserterOptions = page.locator(
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 871974c1f44dd..0d815872c0bbb 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -14,7 +14,7 @@ test.describe( 'Group', () => {
} ) => {
// Search for the group block and insert it.
const inserterButton = page.locator(
- 'role=button[name="Toggle block inserter"i]'
+ 'role=button[name="Block Inserter"i]'
);
await inserterButton.click();
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index 43527b48fbf70..6110a125ff6f7 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -437,7 +437,8 @@ test.describe( 'Image', () => {
async function openMediaTab() {
const blockInserter = page.getByRole( 'button', {
- name: 'Toggle block inserter',
+ name: 'Block Inserter',
+ exact: true,
} );
const isClosed =
( await blockInserter.getAttribute( 'aria-pressed' ) ) ===
diff --git a/test/e2e/specs/editor/plugins/allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/allowed-blocks.spec.js
index 6c8f4ead41c6f..ed7490afe84fe 100644
--- a/test/e2e/specs/editor/plugins/allowed-blocks.spec.js
+++ b/test/e2e/specs/editor/plugins/allowed-blocks.spec.js
@@ -21,7 +21,7 @@ test.describe( 'Allowed Blocks Filter', () => {
} ) => {
// The paragraph block is available.
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const searchbox = page
diff --git a/test/e2e/specs/editor/plugins/block-directory.spec.js b/test/e2e/specs/editor/plugins/block-directory.spec.js
index f9bf1f8515186..2fa4ee33e6c1a 100644
--- a/test/e2e/specs/editor/plugins/block-directory.spec.js
+++ b/test/e2e/specs/editor/plugins/block-directory.spec.js
@@ -122,7 +122,7 @@ test.describe( 'Block Directory', () => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
@@ -209,7 +209,7 @@ test.describe( 'Block Directory', () => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
diff --git a/test/e2e/specs/editor/plugins/block-icons.spec.js b/test/e2e/specs/editor/plugins/block-icons.spec.js
index 0418f4200afc0..3a00b41b9e71e 100644
--- a/test/e2e/specs/editor/plugins/block-icons.spec.js
+++ b/test/e2e/specs/editor/plugins/block-icons.spec.js
@@ -26,7 +26,7 @@ test.describe( 'Block Icons', () => {
test( 'Block with svg icon', async ( { editor, page } ) => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
@@ -60,7 +60,7 @@ test.describe( 'Block Icons', () => {
test( 'Block with dash icon', async ( { editor, page } ) => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
@@ -100,7 +100,7 @@ test.describe( 'Block Icons', () => {
test( 'Block with function icon', async ( { editor, page } ) => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
@@ -137,7 +137,7 @@ test.describe( 'Block Icons', () => {
} ) => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
@@ -185,7 +185,7 @@ test.describe( 'Block Icons', () => {
} ) => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
diff --git a/test/e2e/specs/editor/plugins/block-variations.spec.js b/test/e2e/specs/editor/plugins/block-variations.spec.js
index 653680b48e1e6..3f71d2b57d9fd 100644
--- a/test/e2e/specs/editor/plugins/block-variations.spec.js
+++ b/test/e2e/specs/editor/plugins/block-variations.spec.js
@@ -22,7 +22,7 @@ test.describe( 'Block variations', () => {
page,
} ) => {
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
@@ -63,7 +63,7 @@ test.describe( 'Block variations', () => {
page,
} ) => {
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js
index 0cd043c6a4610..765b4040a4b97 100644
--- a/test/e2e/specs/editor/plugins/child-blocks.spec.js
+++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js
@@ -19,7 +19,7 @@ test.describe( 'Child Blocks', () => {
test( 'are hidden from the global block inserter', async ( { page } ) => {
const blockInserter = page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } );
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } );
const blockLibrary = page.getByRole( 'region', {
name: 'Block Library',
} );
@@ -47,7 +47,7 @@ test.describe( 'Child Blocks', () => {
const blockInserter = page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } );
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } );
const blockLibrary = page
.getByRole( 'region', {
name: 'Block Library',
@@ -85,7 +85,7 @@ test.describe( 'Child Blocks', () => {
const blockInserter = page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } );
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } );
const blockLibrary = page
.getByRole( 'region', {
name: 'Block Library',
diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
index d2dc521f0196b..4ee6d7a0fc4fe 100644
--- a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
+++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js
@@ -45,7 +45,7 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
const blockInserter = page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } );
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } );
const blockLibrary = page
.getByRole( 'region', {
name: 'Block Library',
@@ -92,7 +92,7 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => {
const blockInserter = page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } );
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } );
const blockLibrary = page
.getByRole( 'region', {
name: 'Block Library',
diff --git a/test/e2e/specs/editor/plugins/pattern-recursion.spec.js b/test/e2e/specs/editor/plugins/pattern-recursion.spec.js
index 9a8292271be8e..c688f3580c370 100644
--- a/test/e2e/specs/editor/plugins/pattern-recursion.spec.js
+++ b/test/e2e/specs/editor/plugins/pattern-recursion.spec.js
@@ -59,9 +59,9 @@ test.describe( 'Preventing Pattern Recursion (server)', () => {
page,
editor,
} ) => {
- // Click the Toggle block inserter button
+ // Click the Block Inserter button
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
// Click the Patterns tab
await page.getByRole( 'tab', { name: 'Patterns' } ).click();
diff --git a/test/e2e/specs/editor/plugins/post-type-locking.spec.js b/test/e2e/specs/editor/plugins/post-type-locking.spec.js
index af6256d05e02e..ff02d18c51464 100644
--- a/test/e2e/specs/editor/plugins/post-type-locking.spec.js
+++ b/test/e2e/specs/editor/plugins/post-type-locking.spec.js
@@ -208,7 +208,10 @@ test.describe( 'Post-type locking', () => {
await expect(
page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', {
+ name: 'Block Inserter',
+ exact: true,
+ } )
).toBeEnabled();
await editor.insertBlock( { name: 'core/list' } );
diff --git a/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js b/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js
index 2ec62ffd056d3..a7e6f970179a4 100644
--- a/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js
+++ b/test/e2e/specs/editor/plugins/register-block-type-hooks.spec.js
@@ -18,7 +18,7 @@ test.describe( 'Register block type hooks', () => {
} );
test( 'has a custom category for Paragraph block', async ( { page } ) => {
- await page.click( 'role=button[name="Toggle block inserter"i]' );
+ await page.click( 'role=button[name="Block Inserter"i]' );
expect(
page.locator(
diff --git a/test/e2e/specs/editor/various/a11y.spec.js b/test/e2e/specs/editor/various/a11y.spec.js
index 8f63b57fda657..f116476989a13 100644
--- a/test/e2e/specs/editor/various/a11y.spec.js
+++ b/test/e2e/specs/editor/various/a11y.spec.js
@@ -40,10 +40,10 @@ test.describe( 'a11y (@firefox, @webkit)', () => {
// This test assumes the Editor is not in Fullscreen mode. Check the
// first tabbable element within the 'Editor top bar' region is the
- // 'Toggle block inserter' button.
+ // 'Block Inserter' button.
await pageUtils.pressKeys( 'Tab' );
await expect(
- page.locator( 'role=button[name=/Toggle block inserter/i]' )
+ page.locator( 'role=button[name=/Block Inserter/i]' )
).toBeFocused();
} );
diff --git a/test/e2e/specs/editor/various/adding-patterns.spec.js b/test/e2e/specs/editor/various/adding-patterns.spec.js
index b634798b45540..3226965b18d70 100644
--- a/test/e2e/specs/editor/various/adding-patterns.spec.js
+++ b/test/e2e/specs/editor/various/adding-patterns.spec.js
@@ -9,7 +9,7 @@ test.describe( 'adding patterns', () => {
} );
test( 'should insert a block pattern', async ( { page, editor } ) => {
- await page.getByLabel( 'Toggle block inserter' ).click();
+ await page.getByLabel( 'Block Inserter' ).click();
await page.getByRole( 'tab', { name: 'Patterns' } ).click();
await page.fill(
diff --git a/test/e2e/specs/editor/various/allowed-patterns.spec.js b/test/e2e/specs/editor/various/allowed-patterns.spec.js
index a99b1f5c29106..01ca5ba0480c3 100644
--- a/test/e2e/specs/editor/various/allowed-patterns.spec.js
+++ b/test/e2e/specs/editor/various/allowed-patterns.spec.js
@@ -18,7 +18,7 @@ test.describe( 'Allowed Patterns', () => {
await admin.createNewPost();
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
@@ -61,7 +61,7 @@ test.describe( 'Allowed Patterns', () => {
await admin.createNewPost();
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
diff --git a/test/e2e/specs/editor/various/block-visibility.spec.js b/test/e2e/specs/editor/various/block-visibility.spec.js
index 814276af6e25f..6e4163f4ed583 100644
--- a/test/e2e/specs/editor/various/block-visibility.spec.js
+++ b/test/e2e/specs/editor/various/block-visibility.spec.js
@@ -43,7 +43,7 @@ test.describe( 'Block Visibility', () => {
.getByRole( 'button', { name: 'Close' } )
.click();
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
.getByRole( 'region', { name: 'Block Library' } )
@@ -60,7 +60,7 @@ test.describe( 'Block Visibility', () => {
).toBeHidden();
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
// Show heading block again.
@@ -84,7 +84,7 @@ test.describe( 'Block Visibility', () => {
.getByRole( 'button', { name: 'Close' } )
.click();
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
.getByRole( 'region', { name: 'Block Library' } )
@@ -118,7 +118,7 @@ test.describe( 'Block Visibility', () => {
.getByRole( 'button', { name: 'Close' } )
.click();
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await expect(
@@ -129,7 +129,7 @@ test.describe( 'Block Visibility', () => {
).toBeHidden();
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
// Show Media category blocks again.
@@ -153,7 +153,7 @@ test.describe( 'Block Visibility', () => {
.getByRole( 'button', { name: 'Close' } )
.click();
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await expect(
diff --git a/test/e2e/specs/editor/various/editor-modes.spec.js b/test/e2e/specs/editor/various/editor-modes.spec.js
index 95c409f0589e3..4e856e6214ca8 100644
--- a/test/e2e/specs/editor/various/editor-modes.spec.js
+++ b/test/e2e/specs/editor/various/editor-modes.spec.js
@@ -115,7 +115,7 @@ test.describe( 'Editing modes (visual/HTML)', () => {
await expect(
page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
).toBeDisabled();
// Go back to the visual editor.
diff --git a/test/e2e/specs/editor/various/inserting-blocks.spec.js b/test/e2e/specs/editor/various/inserting-blocks.spec.js
index 83b919585a695..29b59b727acfe 100644
--- a/test/e2e/specs/editor/various/inserting-blocks.spec.js
+++ b/test/e2e/specs/editor/various/inserting-blocks.spec.js
@@ -72,7 +72,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
);
await page.click(
- 'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+ 'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
);
await page.fill(
@@ -135,7 +135,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
);
await page.click(
- 'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+ 'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
);
await page.fill(
@@ -191,7 +191,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
);
await page.click(
- 'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+ 'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
);
const PATTERN_NAME = 'Standard';
@@ -283,7 +283,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
// Insert a synced pattern.
await page.click(
- 'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+ 'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
);
await page.fill(
'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
@@ -347,7 +347,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
);
await page.click(
- 'role=region[name="Editor top bar"i] >> role=button[name="Toggle block inserter"i]'
+ 'role=region[name="Editor top bar"i] >> role=button[name="Block Inserter"i]'
);
const PATTERN_NAME = 'Standard';
@@ -389,7 +389,8 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
await admin.createNewPost();
const inserterButton = page.getByRole( 'button', {
- name: 'Toggle block inserter',
+ name: 'Block Inserter',
+ exact: true,
} );
const blockLibrary = page.getByRole( 'region', {
name: 'Block Library',
@@ -503,7 +504,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
await editor.selectBlocks( paragraphBlock );
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
.getByRole( 'listbox', { name: 'Text' } )
@@ -624,7 +625,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
await admin.createNewPost();
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page.getByRole( 'option', { name: 'More', exact: true } ).click();
@@ -646,7 +647,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
await admin.createNewPost();
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
.getByRole( 'listbox', { name: 'Text' } )
@@ -674,7 +675,7 @@ test.describe( 'Inserting blocks (@firefox, @webkit)', () => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
.getByRole( 'listbox', { name: 'Media' } )
@@ -726,7 +727,7 @@ test.describe( 'insert media from inserter', () => {
} ) => {
await admin.createNewPost();
- await page.getByLabel( 'Toggle block inserter' ).click();
+ await page.getByLabel( 'Block Inserter' ).click();
await page.getByRole( 'tab', { name: 'Media' } ).click();
await page.getByRole( 'tab', { name: 'Images' } ).click();
await page.getByLabel( uploadedMedia.title.raw ).click();
diff --git a/test/e2e/specs/editor/various/parsing-patterns.spec.js b/test/e2e/specs/editor/various/parsing-patterns.spec.js
index 62c8ba2de2410..d8edc544ffa03 100644
--- a/test/e2e/specs/editor/various/parsing-patterns.spec.js
+++ b/test/e2e/specs/editor/various/parsing-patterns.spec.js
@@ -15,7 +15,7 @@ test.describe( 'Parsing patterns', () => {
innerBlocks: [ { name: 'core/button', attributes: { text: 'a' } } ],
} );
await page.keyboard.press( 'ArrowDown' );
- await page.getByLabel( 'Toggle block inserter' ).click();
+ await page.getByLabel( 'Block Inserter' ).click();
await page.getByRole( 'tab', { name: 'Patterns' } ).click();
await page.evaluate( () => {
@@ -36,6 +36,14 @@ test.describe( 'Parsing patterns', () => {
],
} );
} );
+
+ // Exit zoom out mode and select the inner buttons block to ensure
+ // the correct insertion point is selected.
+ await page.getByRole( 'button', { name: 'Zoom Out' } ).click();
+ await editor.selectBlocks(
+ editor.canvas.locator( 'role=document[name="Block: Button"i]' )
+ );
+
await page.fill(
'role=region[name="Block Library"i] >> role=searchbox[name="Search"i]',
'whitespace'
@@ -43,7 +51,7 @@ test.describe( 'Parsing patterns', () => {
await page
.locator( 'role=option[name="Pattern with top-level whitespace"i]' )
.click();
- expect( await editor.getBlocks() ).toMatchObject( [
+ await expect.poll( editor.getBlocks ).toMatchObject( [
{
name: 'core/buttons',
innerBlocks: [
diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js
index 7204f2bace51a..00a68a9f08ea5 100644
--- a/test/e2e/specs/editor/various/patterns.spec.js
+++ b/test/e2e/specs/editor/various/patterns.spec.js
@@ -63,7 +63,7 @@ test.describe( 'Unsynced pattern', () => {
// Check that the new pattern is available in the inserter and that it gets inserted as
// a plain paragraph block.
- await page.getByLabel( 'Toggle block inserter' ).click();
+ await page.getByLabel( 'Block Inserter' ).click();
await page
.getByRole( 'tab', {
name: 'Patterns',
@@ -166,7 +166,7 @@ test.describe( 'Synced pattern', () => {
).toBe( true );
// Check that the new pattern is available in the inserter.
- await page.getByLabel( 'Toggle block inserter' ).click();
+ await page.getByLabel( 'Block Inserter' ).click();
await page
.getByRole( 'tab', {
name: 'Patterns',
@@ -496,7 +496,7 @@ test.describe( 'Synced pattern', () => {
} );
await page
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
await page
.getByRole( 'searchbox', {
diff --git a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
index cfaf4e0be9188..fc54a1a71c8da 100644
--- a/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
+++ b/test/e2e/specs/editor/various/shortcut-focus-toolbar.spec.js
@@ -201,11 +201,11 @@ class ToolbarUtils {
this.pageUtils = pageUtils;
this.documentToolbarButton = this.page.getByRole( 'button', {
- name: 'Toggle block inserter',
+ name: 'Block Inserter',
exact: true,
} );
this.documentToolbarTooltip = this.page.locator(
- 'text=Toggle block inserter'
+ 'text=Block Inserter'
);
this.blockToolbarParagraphButton = this.page.getByRole( 'button', {
name: 'Paragraph',
diff --git a/test/e2e/specs/site-editor/block-style-variations.spec.js b/test/e2e/specs/site-editor/block-style-variations.spec.js
index 97ebc74db8308..3c642ea9d1299 100644
--- a/test/e2e/specs/site-editor/block-style-variations.spec.js
+++ b/test/e2e/specs/site-editor/block-style-variations.spec.js
@@ -318,7 +318,7 @@ async function draftNewPage( page ) {
// Create a Group block with 2 nested Group blocks.
async function addPageContent( editor, page ) {
const inserterButton = page.locator(
- 'role=button[name="Toggle block inserter"i]'
+ 'role=button[name="Block Inserter"i]'
);
await inserterButton.click();
await page.type( 'role=searchbox[name="Search"i]', 'Group' );
diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js
index 7a76db40337c2..4817651bac8f9 100644
--- a/test/e2e/specs/site-editor/pages.spec.js
+++ b/test/e2e/specs/site-editor/pages.spec.js
@@ -36,7 +36,9 @@ async function addPageContent( editor, page ) {
.fill( 'Lorem ipsum dolor sit amet' );
// Insert into Page Content using global inserter.
- await page.getByRole( 'button', { name: 'Toggle block inserter' } ).click();
+ await page
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
+ .click();
await page.getByRole( 'option', { name: 'Heading', exact: true } ).click();
await editor.canvas
.getByRole( 'document', {
diff --git a/test/e2e/specs/site-editor/site-editor-inserter.spec.js b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
index acb0c5409f9b0..04075cbedab30 100644
--- a/test/e2e/specs/site-editor/site-editor-inserter.spec.js
+++ b/test/e2e/specs/site-editor/site-editor-inserter.spec.js
@@ -24,13 +24,13 @@ test.describe( 'Site Editor Inserter', () => {
test( 'inserter toggle button should toggle global inserter', async ( {
page,
} ) => {
- await page.click( 'role=button[name="Toggle block inserter"i]' );
+ await page.click( 'role=button[name="Block Inserter"i]' );
// Visibility check
await expect(
page.locator( 'role=searchbox[name="Search"i]' )
).toBeVisible();
- await page.click( 'role=button[name="Toggle block inserter"i]' );
+ await page.click( 'role=button[name="Block Inserter"i]' );
//Hidden State check
await expect(
page.locator( 'role=searchbox[name="Search"i]' )
@@ -43,7 +43,8 @@ test.describe( 'Site Editor Inserter', () => {
editor,
} ) => {
const inserterButton = page.getByRole( 'button', {
- name: 'Toggle block inserter',
+ name: 'Block Inserter',
+ exact: true,
} );
const blockLibrary = page.getByRole( 'region', {
name: 'Block Library',
diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js
index 3f871d28ef941..9a34f30f82ff9 100644
--- a/test/e2e/specs/site-editor/style-book.spec.js
+++ b/test/e2e/specs/site-editor/style-book.spec.js
@@ -29,7 +29,7 @@ test.describe( 'Style Book', () => {
test( 'should disable toolbar buttons when open', async ( { page } ) => {
await expect(
- page.locator( 'role=button[name="Toggle block inserter"i]' )
+ page.locator( 'role=button[name="Block Inserter"i]' )
).toBeDisabled();
await expect(
page.locator( 'role=button[name="Tools"i]' )
diff --git a/test/e2e/specs/widgets/editing-widgets.spec.js b/test/e2e/specs/widgets/editing-widgets.spec.js
index 92a264492c018..019e07fe87daa 100644
--- a/test/e2e/specs/widgets/editing-widgets.spec.js
+++ b/test/e2e/specs/widgets/editing-widgets.spec.js
@@ -56,7 +56,7 @@ test.describe( 'Widgets screen', () => {
await page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
const blockLibrary = page.getByRole( 'region', {
name: 'Block Library',
@@ -698,7 +698,7 @@ class WidgetsScreen {
if ( await blockLibrary.isHidden() ) {
await this.#page
.getByRole( 'toolbar', { name: 'Document tools' } )
- .getByRole( 'button', { name: 'Toggle block inserter' } )
+ .getByRole( 'button', { name: 'Block Inserter', exact: true } )
.click();
}
diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js
index 20925ebb36587..becbf375eff2a 100644
--- a/test/performance/specs/post-editor.spec.js
+++ b/test/performance/specs/post-editor.spec.js
@@ -368,9 +368,11 @@ test.describe( 'Post Editor Performance', () => {
// Go to the test page.
await admin.editPost( draftId );
await perfUtils.disableAutosave();
- const globalInserterToggle = page.getByRole( 'button', {
- name: 'Toggle block inserter',
- } );
+ const globalInserterToggle = page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'button', {
+ name: 'Block Inserter',
+ } );
const samples = 10;
const throwaway = 1;
@@ -424,9 +426,11 @@ test.describe( 'Post Editor Performance', () => {
// Go to the test page.
await admin.editPost( draftId );
await perfUtils.disableAutosave();
- const globalInserterToggle = page.getByRole( 'button', {
- name: 'Toggle block inserter',
- } );
+ const globalInserterToggle = page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'button', {
+ name: 'Block Inserter',
+ } );
// Open Inserter.
await globalInserterToggle.click();
@@ -483,9 +487,11 @@ test.describe( 'Post Editor Performance', () => {
await admin.editPost( draftId );
await perfUtils.disableAutosave();
- const globalInserterToggle = page.getByRole( 'button', {
- name: 'Toggle block inserter',
- } );
+ const globalInserterToggle = page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'button', {
+ name: 'Block Inserter',
+ } );
const paragraphBlockItem = page.locator(
'.block-editor-inserter__menu .editor-block-list-item-paragraph'
);
@@ -535,9 +541,11 @@ test.describe( 'Post Editor Performance', () => {
test( 'Run the test', async ( { page, admin, perfUtils } ) => {
await admin.createNewPost();
await perfUtils.disableAutosave();
- const globalInserterToggle = page.getByRole( 'button', {
- name: 'Toggle block inserter',
- } );
+ const globalInserterToggle = page
+ .getByRole( 'region', { name: 'Editor top bar' } )
+ .getByRole( 'button', {
+ name: 'Block Inserter',
+ } );
const testPatterns = [
{
diff --git a/test/storybook-playwright/storybook/main.js b/test/storybook-playwright/storybook/main.js
index e3023f844da2d..b80833ca725f9 100644
--- a/test/storybook-playwright/storybook/main.js
+++ b/test/storybook-playwright/storybook/main.js
@@ -7,6 +7,7 @@ const config = {
...baseConfig,
addons: [ '@storybook/addon-toolbars' ],
docs: undefined,
+ staticDirs: undefined,
stories: [
'../../../packages/components/src/**/stories/e2e/*.story.@(js|tsx|mdx)',
],