From 1b15d4ce7a0439efc26cb3c31ca03c2dedc4cc54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 14 Dec 2021 13:31:25 +0200 Subject: [PATCH] Block editor: placeholders: try admin shadow --- package-lock.json | 1 + packages/block-editor/README.md | 13 ++ .../use-focus-first-element.js | 26 ++- .../block-variation-picker/index.js | 7 +- .../embedded-admin-context/index.js | 157 ++++++++++++++++++ packages/block-editor/src/components/index.js | 1 + .../src/components/media-placeholder/index.js | 2 +- .../src/components/placeholder/index.js | 33 ++++ .../components/writing-flow/use-tab-nav.js | 29 +--- packages/block-library/src/block/edit.js | 2 +- packages/block-library/src/calendar/edit.js | 4 +- packages/block-library/src/categories/edit.js | 7 +- .../src/embed/embed-placeholder.js | 4 +- .../block-library/src/embed/embed-preview.js | 4 +- .../block-library/src/latest-posts/edit.js | 2 +- .../block-library/src/post-comment/edit.js | 8 +- packages/block-library/src/rss/edit.js | 2 +- packages/block-library/src/site-logo/edit.js | 2 +- .../src/table-of-contents/edit.js | 2 +- packages/block-library/src/table/edit.js | 2 +- .../template-part/edit/placeholder/index.js | 3 +- .../components/src/placeholder/test/index.js | 2 +- packages/dom/src/focusable.js | 16 +- packages/dom/src/tabbable.js | 11 +- packages/e2e-test-utils/README.md | 8 + .../src/click-placeholder-button.js | 32 ++++ packages/e2e-test-utils/src/index.js | 1 + .../specs/editor/blocks/columns.test.js | 3 +- .../specs/editor/blocks/gallery.test.js | 21 ++- .../specs/editor/blocks/image.test.js | 41 +++-- .../specs/editor/blocks/table.test.js | 48 ++---- .../editor/plugins/block-variations.test.js | 6 +- .../specs/editor/plugins/cpt-locking.test.js | 4 +- .../specs/editor/plugins/image-size.test.js | 9 +- .../plugins/innerblocks-locking-all-embed.js | 6 +- .../editor/various/block-deletion.test.js | 2 +- .../block-hierarchy-navigation.test.js | 5 +- .../specs/editor/various/embedding.test.js | 63 +++---- .../various/multi-block-selection.test.js | 10 +- .../various/toolbar-roving-tabindex.test.js | 3 +- .../specs/editor/various/writing-flow.test.js | 25 +-- .../site-editor/multi-entity-saving.test.js | 9 +- .../specs/site-editor/template-part.test.js | 16 +- .../specs/widgets/customizing-widgets.test.js | 9 +- packages/server-side-render/package.json | 1 + .../src/server-side-render.js | 3 +- .../src/blocks/legacy-widget/edit/index.js | 3 +- .../src/blocks/legacy-widget/edit/preview.js | 3 +- 48 files changed, 459 insertions(+), 212 deletions(-) create mode 100644 packages/block-editor/src/components/embedded-admin-context/index.js create mode 100644 packages/block-editor/src/components/placeholder/index.js create mode 100644 packages/e2e-test-utils/src/click-placeholder-button.js diff --git a/package-lock.json b/package-lock.json index d90064968229a..eb9f9fb408f63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19788,6 +19788,7 @@ "requires": { "@babel/runtime": "^7.16.0", "@wordpress/api-fetch": "file:packages/api-fetch", + "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/blocks": "file:packages/blocks", "@wordpress/components": "file:packages/components", "@wordpress/compose": "file:packages/compose", diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 94a227890243b..207dd8788d963 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -518,6 +518,19 @@ _Related_ Undocumented declaration. +### Placeholder + +Placeholder for use in blocks. Creates an admin styling context and a tabbing +context in the block editor's writing flow. + +_Parameters_ + +- _props_ `Object`: + +_Returns_ + +- `WPComponent`: The component + ### PlainText _Related_ diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js index a3e522b080af8..7095bd7e2dbc8 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js @@ -62,6 +62,7 @@ function useInitialPosition( clientId ) { export function useFocusFirstElement( clientId ) { const ref = useRef(); const initialPosition = useInitialPosition( clientId ); + const isMounting = useRef( true ); useEffect( () => { if ( initialPosition === undefined || initialPosition === null ) { @@ -79,16 +80,25 @@ export function useFocusFirstElement( clientId ) { return; } - // Find all tabbables within node. - const textInputs = focus.tabbable - .find( ref.current ) - .filter( ( node ) => isTextField( node ) ); + let target = ref.current; // If reversed (e.g. merge via backspace), use the last in the set of // tabbables. const isReverse = -1 === initialPosition; - const target = - ( isReverse ? last : first )( textInputs ) || ref.current; + + // Find all text fields or placeholders within the block. + const candidates = focus.tabbable + .find( target ) + .filter( + ( node ) => + isTextField( node ) || + ( isMounting.current && + node.classList.contains( + 'wp-block-editor-placeholder' + ) ) + ); + + target = ( isReverse ? last : first )( candidates ) || target; if ( ! isInsideRootBlock( ref.current, target ) ) { ref.current.focus(); @@ -98,5 +108,9 @@ export function useFocusFirstElement( clientId ) { placeCaretAtHorizontalEdge( target, isReverse ); }, [ initialPosition ] ); + useEffect( () => { + isMounting.current = false; + }, [] ); + return ref; } diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js index 24bdfa272c34b..262f5e22b3e49 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.js +++ b/packages/block-editor/src/components/block-variation-picker/index.js @@ -7,9 +7,14 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Button, Placeholder } from '@wordpress/components'; +import { Button } from '@wordpress/components'; import { layout } from '@wordpress/icons'; +/** + * Internal dependencies + */ +import Placeholder from '../placeholder'; + function BlockVariationPicker( { icon = layout, label = __( 'Choose variation' ), diff --git a/packages/block-editor/src/components/embedded-admin-context/index.js b/packages/block-editor/src/components/embedded-admin-context/index.js new file mode 100644 index 0000000000000..3db90e1b45c72 --- /dev/null +++ b/packages/block-editor/src/components/embedded-admin-context/index.js @@ -0,0 +1,157 @@ +/** + * WordPress dependencies + */ +import { + useRefEffect, + useConstrainedTabbing, + useMergeRefs, +} from '@wordpress/compose'; +import { useState, createPortal } from '@wordpress/element'; +import { ENTER, SPACE, ESCAPE } from '@wordpress/keycodes'; +import { focus } from '@wordpress/dom'; +import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components'; + +/** + * Embeds the given children in shadow DOM that has the same styling as the top + * window (admin). A button is returned to allow the keyboard user to enter this + * context. Visually, it appears inline, but it is styled as the admin, not as + * the editor content. + * + * @param {Object} props Button props. + * + * @return {WPComponent} A button to enter the embedded admin context. + */ +export default function EmbeddedAdminContext( props ) { + const [ shadow, setShadow ] = useState(); + const [ hasFocus, setHasFocus ] = useState(); + const ref = useRefEffect( ( element ) => { + const root = element.attachShadow( { mode: 'open' } ); + + // Copy all admin styles to the shadow DOM. + const style = document.createElement( 'style' ); + Array.from( document.styleSheets ).forEach( ( styleSheet ) => { + // Technically, it's fine to include this, but these are styles that + // target other components, so there's performance gain in not + // including them. Below, we use `StyleProvider` to render emotion + // styles in shadow DOM. + if ( styleSheet.ownerNode.getAttribute( 'data-emotion' ) ) { + return; + } + + // Try to avoid requests for stylesheets of which we already + // know the CSS rules. + try { + let cssText = ''; + + for ( const cssRule of styleSheet.cssRules ) { + cssText += cssRule.cssText; + } + + style.textContent += cssText; + } catch ( e ) { + root.appendChild( styleSheet.ownerNode.cloneNode( true ) ); + } + } ); + root.appendChild( style ); + setShadow( root ); + + function onFocusIn() { + setHasFocus( true ); + } + + function onFocusOut() { + setHasFocus( false ); + } + + /** + * When pressing ENTER or SPACE on the wrapper (button), focus the first + * tabbable inside the shadow DOM. + * + * @param {KeyboardEvent} event The keyboard event. + */ + function onKeyDown( event ) { + if ( element !== event.path[ 0 ] ) return; + if ( event.keyCode !== ENTER && event.keyCode !== SPACE ) return; + + event.preventDefault(); + + const [ firstTabbable ] = focus.tabbable.find( root ); + if ( firstTabbable ) firstTabbable.focus(); + } + + /** + * When pressing ESCAPE inside the shadow DOM, focus the wrapper + * (button). + * + * @param {KeyboardEvent} event The keyboard event. + */ + function onRootKeyDown( event ) { + if ( event.keyCode !== ESCAPE ) return; + + root.host.focus(); + event.preventDefault(); + } + + let timeoutId; + + /** + * When clicking inside the shadow DOM, temporarily remove the ability + * to catch focus, so focus moves to a focusable parent. + * This is done so that when the user clicks inside a placeholder, the + * block receives focus, which can handle delete, enter, etc. + */ + function onMouseDown() { + element.removeAttribute( 'tabindex' ); + timeoutId = setTimeout( () => + element.setAttribute( 'tabindex', '0' ) + ); + } + + root.addEventListener( 'focusin', onFocusIn ); + root.addEventListener( 'focusout', onFocusOut ); + root.addEventListener( 'keydown', onRootKeyDown ); + element.addEventListener( 'keydown', onKeyDown ); + element.addEventListener( 'mousedown', onMouseDown ); + return () => { + root.removeEventListener( 'focusin', onFocusIn ); + root.removeEventListener( 'focusout', onFocusOut ); + root.removeEventListener( 'keydown', onRootKeyDown ); + element.removeEventListener( 'keydown', onKeyDown ); + element.removeEventListener( 'mousedown', onMouseDown ); + clearTimeout( timeoutId ); + }; + }, [] ); + + const dialogRef = useRefEffect( ( element ) => { + if ( + element.getRootNode().host !== element.ownerDocument.activeElement + ) + return; + + const [ firstTabbable ] = focus.tabbable.find( element ); + if ( firstTabbable ) firstTabbable.focus(); + }, [] ); + + const content = ( + +
+ { props.children } +
+ + ); + + return ( +
+ { shadow && createPortal( content, shadow ) } +
+ ); +} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index b1f991ce5c4d5..5deb4fb7483ee 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -71,6 +71,7 @@ export { default as __experimentalLinkControlSearchItem } from './link-control/s export { default as LineHeightControl } from './line-height-control'; export { default as __experimentalListView } from './list-view'; export { default as MediaReplaceFlow } from './media-replace-flow'; +export { default as Placeholder } from './placeholder'; export { default as MediaPlaceholder } from './media-placeholder'; export { default as MediaUpload } from './media-upload'; export { default as MediaUploadCheck } from './media-upload/check'; diff --git a/packages/block-editor/src/components/media-placeholder/index.js b/packages/block-editor/src/components/media-placeholder/index.js index f13206870f815..df321e0778fee 100644 --- a/packages/block-editor/src/components/media-placeholder/index.js +++ b/packages/block-editor/src/components/media-placeholder/index.js @@ -10,7 +10,6 @@ import classnames from 'classnames'; import { Button, FormFileUpload, - Placeholder, DropZone, withFilters, } from '@wordpress/components'; @@ -23,6 +22,7 @@ import { keyboardReturn } from '@wordpress/icons'; /** * Internal dependencies */ +import Placeholder from '../placeholder'; import MediaUpload from '../media-upload'; import MediaUploadCheck from '../media-upload/check'; import URLPopover from '../url-popover'; diff --git a/packages/block-editor/src/components/placeholder/index.js b/packages/block-editor/src/components/placeholder/index.js new file mode 100644 index 0000000000000..da0f1a24c0f10 --- /dev/null +++ b/packages/block-editor/src/components/placeholder/index.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { Placeholder } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import EmbeddedAdminContext from '../embedded-admin-context'; + +/** + * Placeholder for use in blocks. Creates an admin styling context and a tabbing + * context in the block editor's writing flow. + * + * @param {Object} props + * + * @return {WPComponent} The component + */ +export default function IsolatedPlaceholder( props ) { + return ( + + + + ); +} diff --git a/packages/block-editor/src/components/writing-flow/use-tab-nav.js b/packages/block-editor/src/components/writing-flow/use-tab-nav.js index 7f61046809d71..8ceb5e0375d47 100644 --- a/packages/block-editor/src/components/writing-flow/use-tab-nav.js +++ b/packages/block-editor/src/components/writing-flow/use-tab-nav.js @@ -12,16 +12,6 @@ import { useRef } from '@wordpress/element'; */ import { store as blockEditorStore } from '../../store'; -function isFormElement( element ) { - const { tagName } = element; - return ( - tagName === 'INPUT' || - tagName === 'BUTTON' || - tagName === 'SELECT' || - tagName === 'TEXTAREA' - ); -} - export default function useTabNav() { const container = useRef(); const focusCaptureBeforeRef = useRef(); @@ -104,8 +94,13 @@ export default function useTabNav() { return; } + if ( + event.target.classList.contains( 'wp-block-editor-placeholder' ) + ) { + return; + } + const isShift = event.shiftKey; - const direction = isShift ? 'findPrevious' : 'findNext'; if ( ! hasMultiSelection() && ! getSelectedBlockClientId() ) { // Preserve the behaviour of entering navigation mode when @@ -118,18 +113,6 @@ export default function useTabNav() { return; } - // Allow tabbing between form elements rendered in a block, - // such as inside a placeholder. Form elements are generally - // meant to be UI rather than part of the content. Ideally - // these are not rendered in the content and perhaps in the - // future they can be rendered in an iframe or shadow DOM. - if ( - isFormElement( event.target ) && - isFormElement( focus.tabbable[ direction ]( event.target ) ) - ) { - return; - } - const next = isShift ? focusCaptureBeforeRef : focusCaptureAfterRef; // Disable focus capturing on the focus capture element, so it diff --git a/packages/block-library/src/block/edit.js b/packages/block-library/src/block/edit.js index ce2bb4c89b90a..a6f671a0248e9 100644 --- a/packages/block-library/src/block/edit.js +++ b/packages/block-library/src/block/edit.js @@ -8,7 +8,6 @@ import { store as coreStore, } from '@wordpress/core-data'; import { - Placeholder, Spinner, ToolbarGroup, ToolbarButton, @@ -25,6 +24,7 @@ import { InspectorControls, useBlockProps, Warning, + Placeholder, } from '@wordpress/block-editor'; import { store as reusableBlocksStore } from '@wordpress/reusable-blocks'; import { ungroup } from '@wordpress/icons'; diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js index 5ee7fe14ed072..cb3137b6ee9a3 100644 --- a/packages/block-library/src/calendar/edit.js +++ b/packages/block-library/src/calendar/edit.js @@ -8,10 +8,10 @@ import memoize from 'memize'; * WordPress dependencies */ import { calendar as icon } from '@wordpress/icons'; -import { Disabled, Placeholder, Spinner } from '@wordpress/components'; +import { Disabled, Spinner } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import ServerSideRender from '@wordpress/server-side-render'; -import { useBlockProps } from '@wordpress/block-editor'; +import { useBlockProps, Placeholder } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; diff --git a/packages/block-library/src/categories/edit.js b/packages/block-library/src/categories/edit.js index 08276c026b302..78dcc9b2da3a3 100644 --- a/packages/block-library/src/categories/edit.js +++ b/packages/block-library/src/categories/edit.js @@ -8,14 +8,17 @@ import { times, unescape } from 'lodash'; */ import { PanelBody, - Placeholder, Spinner, ToggleControl, VisuallyHidden, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; -import { InspectorControls, useBlockProps } from '@wordpress/block-editor'; +import { + InspectorControls, + useBlockProps, + Placeholder, +} from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { pin } from '@wordpress/icons'; import { store as coreStore } from '@wordpress/core-data'; diff --git a/packages/block-library/src/embed/embed-placeholder.js b/packages/block-library/src/embed/embed-placeholder.js index e3ffb5ac02845..858033811ab5d 100644 --- a/packages/block-library/src/embed/embed-placeholder.js +++ b/packages/block-library/src/embed/embed-placeholder.js @@ -2,8 +2,8 @@ * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { Button, Placeholder, ExternalLink } from '@wordpress/components'; -import { BlockIcon } from '@wordpress/block-editor'; +import { Button, ExternalLink } from '@wordpress/components'; +import { BlockIcon, Placeholder } from '@wordpress/block-editor'; const EmbedPlaceholder = ( { icon, diff --git a/packages/block-library/src/embed/embed-preview.js b/packages/block-library/src/embed/embed-preview.js index 9e04efe78a0bf..15116f9607539 100644 --- a/packages/block-library/src/embed/embed-preview.js +++ b/packages/block-library/src/embed/embed-preview.js @@ -12,8 +12,8 @@ import classnames from 'classnames/dedupe'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { Placeholder, SandBox } from '@wordpress/components'; -import { RichText, BlockIcon } from '@wordpress/block-editor'; +import { SandBox } from '@wordpress/components'; +import { RichText, BlockIcon, Placeholder } from '@wordpress/block-editor'; import { Component } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 0f8d41b758957..e10504282cab7 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -11,7 +11,6 @@ import { RawHTML } from '@wordpress/element'; import { BaseControl, PanelBody, - Placeholder, QueryControls, RadioControl, RangeControl, @@ -28,6 +27,7 @@ import { __experimentalImageSizeControl as ImageSizeControl, useBlockProps, store as blockEditorStore, + Placeholder, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { pin, list, grid } from '@wordpress/icons'; diff --git a/packages/block-library/src/post-comment/edit.js b/packages/block-library/src/post-comment/edit.js index e78ecd47bab16..a68ed2c0eda12 100644 --- a/packages/block-library/src/post-comment/edit.js +++ b/packages/block-library/src/post-comment/edit.js @@ -2,10 +2,14 @@ * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { Placeholder, TextControl, Button } from '@wordpress/components'; +import { TextControl, Button } from '@wordpress/components'; import { useState } from '@wordpress/element'; import { blockDefault } from '@wordpress/icons'; -import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; +import { + useBlockProps, + useInnerBlocksProps, + Placeholder, +} from '@wordpress/block-editor'; const ALLOWED_BLOCKS = [ 'core/comment-author-avatar', diff --git a/packages/block-library/src/rss/edit.js b/packages/block-library/src/rss/edit.js index 46a3e6a1a105d..ad6ddb23361a3 100644 --- a/packages/block-library/src/rss/edit.js +++ b/packages/block-library/src/rss/edit.js @@ -5,12 +5,12 @@ import { BlockControls, InspectorControls, useBlockProps, + Placeholder, } from '@wordpress/block-editor'; import { Button, Disabled, PanelBody, - Placeholder, RangeControl, TextControl, ToggleControl, diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 6719a4244ab8b..7f26a6c4caab5 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -18,8 +18,8 @@ import { Spinner, ToggleControl, ToolbarButton, - Placeholder, Button, + Placeholder, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { diff --git a/packages/block-library/src/table-of-contents/edit.js b/packages/block-library/src/table-of-contents/edit.js index 44cd67303c745..796d775ff16cf 100644 --- a/packages/block-library/src/table-of-contents/edit.js +++ b/packages/block-library/src/table-of-contents/edit.js @@ -12,11 +12,11 @@ import { InspectorControls, store as blockEditorStore, useBlockProps, + Placeholder, } from '@wordpress/block-editor'; import { createBlock, store as blocksStore } from '@wordpress/blocks'; import { PanelBody, - Placeholder, ToggleControl, ToolbarButton, ToolbarGroup, diff --git a/packages/block-library/src/table/edit.js b/packages/block-library/src/table/edit.js index 113dd178b3caf..5989b857237df 100644 --- a/packages/block-library/src/table/edit.js +++ b/packages/block-library/src/table/edit.js @@ -16,12 +16,12 @@ import { useBlockProps, __experimentalUseColorProps as useColorProps, __experimentalUseBorderProps as useBorderProps, + Placeholder, } from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { Button, PanelBody, - Placeholder, TextControl, ToggleControl, ToolbarDropdownMenu, diff --git a/packages/block-library/src/template-part/edit/placeholder/index.js b/packages/block-library/src/template-part/edit/placeholder/index.js index 64a730535c0f5..91a186061fae0 100644 --- a/packages/block-library/src/template-part/edit/placeholder/index.js +++ b/packages/block-library/src/template-part/edit/placeholder/index.js @@ -9,9 +9,10 @@ import { find, kebabCase } from 'lodash'; import { __, sprintf } from '@wordpress/i18n'; import { useCallback, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; -import { Placeholder, Dropdown, Button, Spinner } from '@wordpress/components'; +import { Dropdown, Button, Spinner } from '@wordpress/components'; import { serialize } from '@wordpress/blocks'; import { store as coreStore } from '@wordpress/core-data'; +import { Placeholder } from '@wordpress/block-editor'; /** * Internal dependencies diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js index 758c6bed30394..69fba05049cb2 100644 --- a/packages/components/src/placeholder/test/index.js +++ b/packages/components/src/placeholder/test/index.js @@ -12,7 +12,7 @@ import { useResizeObserver } from '@wordpress/compose'; /** * Internal dependencies */ -import Placeholder from '../'; +import { Placeholder } from '../'; describe( 'Placeholder', () => { beforeEach( () => { diff --git a/packages/dom/src/focusable.js b/packages/dom/src/focusable.js index 75e4f72f0c1f7..b3c6ce8ef7a41 100644 --- a/packages/dom/src/focusable.js +++ b/packages/dom/src/focusable.js @@ -86,14 +86,14 @@ function isValidFocusableArea( element ) { /** * Returns all focusable elements within a given context. * - * @param {Element} context Element in which to search. - * @param {Object} [options] - * @param {boolean} [options.sequential] If set, only return elements that are - * sequentially focusable. - * Non-interactive elements with a - * negative `tabindex` are focusable but - * not sequentially focusable. - * https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute + * @param {Element|Document|ShadowRoot} context Element in which to search. + * @param {Object} [options] + * @param {boolean} [options.sequential] If set, only return elements that are + * sequentially focusable. + * Non-interactive elements with a + * negative `tabindex` are focusable but + * not sequentially focusable. + * https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute * * @return {Element[]} Focusable elements. */ diff --git a/packages/dom/src/tabbable.js b/packages/dom/src/tabbable.js index 64cef7f2a2485..5e5200a0f1758 100644 --- a/packages/dom/src/tabbable.js +++ b/packages/dom/src/tabbable.js @@ -148,7 +148,8 @@ function filterTabbable( focusables ) { } /** - * @param {Element} context + * @param {Element|Document|ShadowRoot} context + * * @return {Element[]} Tabbable elements within the context. */ export function find( context ) { @@ -162,7 +163,9 @@ export function find( context ) { * to the active element. */ export function findPrevious( element ) { - const focusables = findFocusable( element.ownerDocument.body ); + const focusables = findFocusable( + /** @type {Document|ShadowRoot} */ ( element.getRootNode() ) + ); const index = focusables.indexOf( element ); // Remove all focusables after and including `element`. @@ -178,7 +181,9 @@ export function findPrevious( element ) { * to the active element. */ export function findNext( element ) { - const focusables = findFocusable( element.ownerDocument.body ); + const focusables = findFocusable( + /** @type {Document|ShadowRoot} */ ( element.getRootNode() ) + ); const index = focusables.indexOf( element ); // Remove all focusables before and including `element`. diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index 210c15c101433..e83bda92d5e2b 100644 --- a/packages/e2e-test-utils/README.md +++ b/packages/e2e-test-utils/README.md @@ -107,6 +107,14 @@ _Parameters_ - _buttonLabel_ `string`: The label to search the button for. +### clickPlaceholderButton + +Clicks a button in a placeholder based on the label text. + +_Parameters_ + +- _buttonText_ `string`: The text that appears on the button to click. + ### closeGlobalBlockInserter Undocumented declaration. diff --git a/packages/e2e-test-utils/src/click-placeholder-button.js b/packages/e2e-test-utils/src/click-placeholder-button.js new file mode 100644 index 0000000000000..25b4d7a3a90c0 --- /dev/null +++ b/packages/e2e-test-utils/src/click-placeholder-button.js @@ -0,0 +1,32 @@ +/** + * Clicks a button in a placeholder based on the label text. + * + * @param {string} buttonText The text that appears on the button to click. + */ +export async function clickPlaceholderButton( buttonText ) { + const _button = await page.waitForFunction( + ( text ) => { + const placeholders = document.querySelectorAll( + '.wp-block-editor-placeholder' + ); + + for ( const placeholder of placeholders ) { + const buttons = placeholder.shadowRoot.querySelectorAll( + 'button,label,[aria-label]' + ); + + for ( const button of buttons ) { + if ( + button.textContent === text || + button.getAttribute( 'aria-label' ) === text + ) { + return button; + } + } + } + }, + {}, + buttonText + ); + await _button.click(); +} diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index f138d7a121fae..3fb3498671bf8 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/packages/e2e-test-utils/src/index.js @@ -14,6 +14,7 @@ export { clickButton } from './click-button'; export { clickMenuItem } from './click-menu-item'; export { clickOnCloseModalButton } from './click-on-close-modal-button'; export { clickOnMoreMenuItem } from './click-on-more-menu-item'; +export { clickPlaceholderButton } from './click-placeholder-button'; export { createNewPost } from './create-new-post'; export { createUser } from './create-user'; export { createURL } from './create-url'; diff --git a/packages/e2e-tests/specs/editor/blocks/columns.test.js b/packages/e2e-tests/specs/editor/blocks/columns.test.js index f593800cd0970..25a6436dcc41a 100644 --- a/packages/e2e-tests/specs/editor/blocks/columns.test.js +++ b/packages/e2e-tests/specs/editor/blocks/columns.test.js @@ -7,6 +7,7 @@ import { insertBlock, openGlobalBlockInserter, closeGlobalBlockInserter, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; describe( 'Columns', () => { @@ -17,7 +18,7 @@ describe( 'Columns', () => { it( 'restricts all blocks inside the columns block', async () => { await insertBlock( 'Columns' ); await closeGlobalBlockInserter(); - await page.click( '[aria-label="Two columns; equal split"]' ); + await clickPlaceholderButton( 'Two columns; equal split' ); await page.click( '.edit-post-header-toolbar__list-view-toggle' ); const columnBlockMenuItem = ( await page.$x( diff --git a/packages/e2e-tests/specs/editor/blocks/gallery.test.js b/packages/e2e-tests/specs/editor/blocks/gallery.test.js index 50a10288626c4..91190b338b0e9 100644 --- a/packages/e2e-tests/specs/editor/blocks/gallery.test.js +++ b/packages/e2e-tests/specs/editor/blocks/gallery.test.js @@ -16,9 +16,16 @@ import { clickButton, } from '@wordpress/e2e-test-utils'; -async function upload( selector ) { - await page.waitForSelector( selector ); - const inputElement = await page.$( selector ); +async function placeholderUpload() { + const input = await page.waitForFunction( () => + document + .querySelector( '.wp-block-gallery .wp-block-editor-placeholder' ) + ?.shadowRoot.querySelector( 'input[type="file"]' ) + ); + return upload( input ); +} + +async function upload( handle ) { const testImagePath = path.join( __dirname, '..', @@ -30,7 +37,7 @@ async function upload( selector ) { const filename = uuid(); const tmpFileName = path.join( os.tmpdir(), filename + '.png' ); fs.copyFileSync( testImagePath, tmpFileName ); - await inputElement.uploadFile( tmpFileName ); + await handle.uploadFile( tmpFileName ); await page.waitForSelector( `.wp-block-gallery img[src$="${ filename }.png"]` ); @@ -44,7 +51,7 @@ describe( 'Gallery', () => { it( 'can be created using uploaded images', async () => { await insertBlock( 'Gallery' ); - const filename = await upload( '.wp-block-gallery input[type="file"]' ); + const filename = await placeholderUpload(); const regex = new RegExp( `\\s*
\\s*
\\"\\"<\/figure>\\s*<\/figure>\\s*` @@ -56,7 +63,7 @@ describe( 'Gallery', () => { const galleryCaption = 'Tested gallery caption'; await insertBlock( 'Gallery' ); - await upload( '.wp-block-gallery input[type="file"]' ); + await placeholderUpload(); await page.click( '.wp-block-gallery>.blocks-gallery-caption' ); await page.keyboard.type( galleryCaption ); @@ -68,7 +75,7 @@ describe( 'Gallery', () => { it( "uploaded images' captions can be edited", async () => { await insertBlock( 'Gallery' ); - await upload( '.wp-block-gallery input[type="file"]' ); + await placeholderUpload(); const figureElement = await page.waitForSelector( '.wp-block-gallery .wp-block-image' diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js index 291bb125f4226..ea48219b8591b 100644 --- a/packages/e2e-tests/specs/editor/blocks/image.test.js +++ b/packages/e2e-tests/specs/editor/blocks/image.test.js @@ -20,9 +20,16 @@ import { pressKeyWithModifier, } from '@wordpress/e2e-test-utils'; -async function upload( selector ) { - await page.waitForSelector( selector ); - const inputElement = await page.$( selector ); +async function placeholderUpload() { + const input = await page.waitForFunction( () => + document + .querySelector( '.wp-block-image .wp-block-editor-placeholder' ) + ?.shadowRoot.querySelector( 'input[type="file"]' ) + ); + return upload( input ); +} + +async function upload( handle ) { const testImagePath = path.join( __dirname, '..', @@ -34,7 +41,7 @@ async function upload( selector ) { const filename = uuid(); const tmpFileName = path.join( os.tmpdir(), filename + '.png' ); fs.copyFileSync( testImagePath, tmpFileName ); - await inputElement.uploadFile( tmpFileName ); + await handle.uploadFile( tmpFileName ); return filename; } @@ -65,7 +72,7 @@ describe( 'Image', () => { it( 'can be inserted', async () => { await insertBlock( 'Image' ); - const filename = await upload( '.wp-block-image input[type="file"]' ); + const filename = await placeholderUpload(); await waitForImage( filename ); const regex = new RegExp( @@ -76,7 +83,7 @@ describe( 'Image', () => { it( 'should replace, reset size, and keep selection', async () => { await insertBlock( 'Image' ); - const filename1 = await upload( '.wp-block-image input[type="file"]' ); + const filename1 = await placeholderUpload(); await waitForImage( filename1 ); const regex1 = new RegExp( @@ -95,7 +102,9 @@ describe( 'Image', () => { await clickButton( 'Replace' ); const filename2 = await upload( - '.block-editor-media-replace-flow__options input[type="file"]' + await page.$( + '.block-editor-media-replace-flow__options input[type="file"]' + ) ); await waitForImage( filename2 ); @@ -113,7 +122,7 @@ describe( 'Image', () => { it.skip( 'should place caret at end of caption after merging empty paragraph', async () => { await insertBlock( 'Image' ); - const fileName = await upload( '.wp-block-image input[type="file"]' ); + const fileName = await placeholderUpload(); await waitForImage( fileName ); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); @@ -127,7 +136,7 @@ describe( 'Image', () => { it( 'should allow soft line breaks in caption', async () => { await insertBlock( 'Image' ); - const fileName = await upload( '.wp-block-image input[type="file"]' ); + const fileName = await placeholderUpload(); await waitForImage( fileName ); await page.keyboard.type( '12' ); await page.keyboard.press( 'ArrowLeft' ); @@ -140,7 +149,7 @@ describe( 'Image', () => { it( 'should have keyboard navigable toolbar for caption', async () => { await insertBlock( 'Image' ); - const fileName = await upload( '.wp-block-image input[type="file"]' ); + const fileName = await placeholderUpload(); await waitForImage( fileName ); // Navigate to More, Link, Italic and finally Bold. await pressKeyWithModifier( 'shift', 'Tab' ); @@ -172,7 +181,7 @@ describe( 'Image', () => { document.body.appendChild( input ); } ); - const fileName = await upload( '#wp-temp-test-input' ); + const fileName = await upload( await page.$( '#wp-temp-test-input' ) ); const paragraphRect = await image.boundingBox(); const pX = paragraphRect.x + paragraphRect.width / 2; @@ -201,7 +210,7 @@ describe( 'Image', () => { it( 'allows zooming using the crop tools', async () => { // Insert the block, upload a file and crop. await insertBlock( 'Image' ); - const filename = await upload( '.wp-block-image input[type="file"]' ); + const filename = await placeholderUpload(); await waitForImage( filename ); // Assert that the image is initially unscaled and unedited. @@ -246,7 +255,7 @@ describe( 'Image', () => { it( 'allows changing aspect ratio using the crop tools', async () => { // Insert the block, upload a file and crop. await insertBlock( 'Image' ); - const filename = await upload( '.wp-block-image input[type="file"]' ); + const filename = await placeholderUpload(); await waitForImage( filename ); // Assert that the image is initially unscaled and unedited. @@ -283,7 +292,7 @@ describe( 'Image', () => { it( 'allows rotating using the crop tools', async () => { // Insert the block, upload a file and crop. await insertBlock( 'Image' ); - const filename = await upload( '.wp-block-image input[type="file"]' ); + const filename = await placeholderUpload(); await waitForImage( filename ); // Assert that the image is initially unscaled and unedited. @@ -314,7 +323,7 @@ describe( 'Image', () => { await insertBlock( 'Image' ); // Upload an initial image. - const filename = await upload( '.wp-block-image input[type="file"]' ); + const filename = await placeholderUpload(); await waitForImage( filename ); // Resize the Uploaded Image. await openDocumentSettingsSidebar(); @@ -362,7 +371,7 @@ describe( 'Image', () => { it( 'should undo without broken temporary state', async () => { await insertBlock( 'Image' ); - const fileName = await upload( '.wp-block-image input[type="file"]' ); + const fileName = await placeholderUpload(); await waitForImage( fileName ); await pressKeyWithModifier( 'primary', 'z' ); // Expect an empty image block (placeholder) rather than one with a diff --git a/packages/e2e-tests/specs/editor/blocks/table.test.js b/packages/e2e-tests/specs/editor/blocks/table.test.js index f3888d70f062c..a65b1906863d6 100644 --- a/packages/e2e-tests/specs/editor/blocks/table.test.js +++ b/packages/e2e-tests/specs/editor/blocks/table.test.js @@ -8,6 +8,7 @@ import { getEditedPostContent, insertBlock, openDocumentSettingsSidebar, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; const createButtonLabel = 'Create Table'; @@ -30,38 +31,16 @@ describe( 'Table', () => { it( 'displays a form for choosing the row and column count of the table', async () => { await insertBlock( 'Table' ); - // Check for existence of the column count field. - const columnCountLabel = await page.$x( - "//figure[@data-type='core/table']//label[text()='Column count']" - ); - expect( columnCountLabel ).toHaveLength( 1 ); - - // Modify the column count. - await columnCountLabel[ 0 ].click(); - const currentColumnCount = await page.evaluate( - () => document.activeElement.value - ); - expect( currentColumnCount ).toBe( '2' ); + await clickPlaceholderButton( 'Column count' ); await page.keyboard.press( 'Backspace' ); await page.keyboard.type( '5' ); - // Check for existence of the row count field. - const rowCountLabel = await page.$x( - "//figure[@data-type='core/table']//label[text()='Row count']" - ); - expect( rowCountLabel ).toHaveLength( 1 ); - - // Modify the row count. - await rowCountLabel[ 0 ].click(); - const currentRowCount = await page.evaluate( - () => document.activeElement.value - ); - expect( currentRowCount ).toBe( '2' ); + await clickPlaceholderButton( 'Row count' ); await page.keyboard.press( 'Backspace' ); await page.keyboard.type( '10' ); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); // Expect the post content to have a correctly sized table. expect( await getEditedPostContent() ).toMatchSnapshot(); @@ -71,7 +50,7 @@ describe( 'Table', () => { await insertBlock( 'Table' ); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); // Click the first cell and add some text. await page.click( 'td' ); @@ -107,7 +86,7 @@ describe( 'Table', () => { expect( footerSwitch ).toHaveLength( 0 ); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); // Expect the header and footer switches to be present now that the table has been created. headerSwitch = await page.$x( headerSwitchSelector ); @@ -144,7 +123,7 @@ describe( 'Table', () => { await openDocumentSettingsSidebar(); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); // Toggle on the switches and add some content. const headerSwitch = await page.$x( @@ -178,15 +157,12 @@ describe( 'Table', () => { it( 'allows columns to be aligned', async () => { await insertBlock( 'Table' ); - const [ columnCountLabel ] = await page.$x( - "//figure[@data-type='core/table']//label[text()='Column count']" - ); - await columnCountLabel.click(); + await clickPlaceholderButton( 'Column count' ); await page.keyboard.press( 'Backspace' ); await page.keyboard.type( '4' ); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); // Click the first cell and add some text. Don't align. const cells = await page.$$( 'td,th' ); @@ -218,7 +194,7 @@ describe( 'Table', () => { await openDocumentSettingsSidebar(); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); // Enable fixed width as it exascerbates the amount of empty space around the RichText. const [ fixedWidthSwitch ] = await page.$x( @@ -254,7 +230,7 @@ describe( 'Table', () => { await insertBlock( 'Table' ); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); // Click the first cell and add some text. await page.click( '.wp-block-table figcaption' ); @@ -267,7 +243,7 @@ describe( 'Table', () => { await insertBlock( 'Table' ); // Create the table. - await clickButton( createButtonLabel ); + await clickPlaceholderButton( createButtonLabel ); await page.keyboard.press( 'Tab' ); await page.keyboard.type( '1' ); diff --git a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js index 51431ef9a6a41..cdc8f59562cec 100644 --- a/packages/e2e-tests/specs/editor/plugins/block-variations.test.js +++ b/packages/e2e-tests/specs/editor/plugins/block-variations.test.js @@ -11,6 +11,7 @@ import { openDocumentSettingsSidebar, togglePreferencesOption, toggleMoreMenu, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; describe( 'Block variations', () => { @@ -85,11 +86,8 @@ describe( 'Block variations', () => { } ); test( 'Pick the additional variation in the inserted Columns block', async () => { await insertBlock( 'Columns' ); + await clickPlaceholderButton( 'Four columns' ); - const fourColumnsVariation = await page.waitForSelector( - '.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]' - ); - await fourColumnsVariation.click(); expect( await page.$$( '.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]' diff --git a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js index 78daeb5f97b33..113f70a9ceabe 100644 --- a/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js +++ b/packages/e2e-tests/specs/editor/plugins/cpt-locking.test.js @@ -5,6 +5,7 @@ import { activatePlugin, clickBlockToolbarButton, clickMenuItem, + clickPlaceholderButton, createNewPost, deactivatePlugin, getEditedPostContent, @@ -121,7 +122,8 @@ describe( 'cpt locking', () => { } ); it( 'can use the global inserter in inner blocks', async () => { - await page.click( 'button[aria-label="Two columns; equal split"]' ); + await clickPlaceholderButton( 'Two columns; equal split' ); + await page.keyboard.press( 'Enter' ); await page.click( '.wp-block-column .block-editor-button-block-appender' ); diff --git a/packages/e2e-tests/specs/editor/plugins/image-size.test.js b/packages/e2e-tests/specs/editor/plugins/image-size.test.js index a6e6c312e19e8..d7b380e8348b7 100644 --- a/packages/e2e-tests/specs/editor/plugins/image-size.test.js +++ b/packages/e2e-tests/specs/editor/plugins/image-size.test.js @@ -15,6 +15,7 @@ import { deactivatePlugin, insertBlock, openDocumentSettingsSidebar, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; describe( 'changing image size', () => { @@ -29,9 +30,11 @@ describe( 'changing image size', () => { it( 'should insert and change my image size', async () => { await insertBlock( 'Image' ); - const inputElement = await page.waitForSelector( - 'figure[aria-label="Block: Image"] input[type=file]' - ); + await clickPlaceholderButton( 'Media Library' ); + + // Wait for media modal to appear and upload image. + await page.waitForSelector( '.media-modal input[type=file]' ); + const inputElement = await page.$( '.media-modal input[type=file]' ); const testImagePath = path.join( __dirname, '..', diff --git a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js index a0a83fbf90e61..e842b97ce5e5e 100644 --- a/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js +++ b/packages/e2e-tests/specs/editor/plugins/innerblocks-locking-all-embed.js @@ -9,6 +9,7 @@ import { createEmbeddingMatcher, createJSONResponse, setUpResponseMocking, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; const MOCK_RESPONSES = [ @@ -43,10 +44,7 @@ describe( 'Embed block inside a locked all parent', () => { it( 'embed block should be able to embed external content', async () => { await insertBlock( 'Test Inner Blocks Locking All Embed' ); - const embedInputSelector = - '.components-placeholder__input[aria-label="Embed URL"]'; - await page.waitForSelector( embedInputSelector ); - await page.click( embedInputSelector ); + await clickPlaceholderButton( 'Embed URL' ); // This URL should not have a trailing slash. await page.keyboard.type( 'https://twitter.com/wordpress' ); await page.keyboard.press( 'Enter' ); diff --git a/packages/e2e-tests/specs/editor/various/block-deletion.test.js b/packages/e2e-tests/specs/editor/various/block-deletion.test.js index 6602a8d28a6f4..12f13d4687b6e 100644 --- a/packages/e2e-tests/specs/editor/various/block-deletion.test.js +++ b/packages/e2e-tests/specs/editor/various/block-deletion.test.js @@ -116,7 +116,7 @@ describe( 'block deletion -', () => { // Click on the image block so that its wrapper is selected and backspace to delete it. await page.click( - '.wp-block[data-type="core/image"] .components-placeholder__label' + '.wp-block[data-type="core/image"] .wp-block-editor-placeholder' ); await page.keyboard.press( 'Backspace' ); diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js index fd4de7ba31d32..e865e05ea975a 100644 --- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js @@ -8,6 +8,7 @@ import { pressKeyTimes, pressKeyWithModifier, openDocumentSettingsSidebar, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; async function openListViewSidebar() { @@ -37,7 +38,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate using the list view sidebar', async () => { await insertBlock( 'Columns' ); - await page.click( '[aria-label="Two columns; equal split"]' ); + await clickPlaceholderButton( 'Two columns; equal split' ); // Add a paragraph in the first column. await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter. @@ -94,7 +95,7 @@ describe( 'Navigating the block hierarchy', () => { it( 'should navigate block hierarchy using only the keyboard', async () => { await insertBlock( 'Columns' ); await openDocumentSettingsSidebar(); - await page.click( '[aria-label="Two columns; equal split"]' ); + await clickPlaceholderButton( 'Two columns; equal split' ); // Add a paragraph in the first column. await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter. diff --git a/packages/e2e-tests/specs/editor/various/embedding.test.js b/packages/e2e-tests/specs/editor/various/embedding.test.js index 51dee5fc52f66..2c583d8baffbc 100644 --- a/packages/e2e-tests/specs/editor/various/embedding.test.js +++ b/packages/e2e-tests/specs/editor/various/embedding.test.js @@ -3,7 +3,7 @@ */ import { clickBlockAppender, - clickButton, + clickPlaceholderButton, createEmbeddingMatcher, createJSONResponse, createNewPost, @@ -167,6 +167,7 @@ async function insertEmbed( URL ) { `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Embed')]` ); await page.keyboard.press( 'Enter' ); + await page.evaluate( () => new Promise( requestIdleCallback ) ); await page.keyboard.type( URL ); await page.keyboard.press( 'Enter' ); } @@ -184,22 +185,43 @@ describe( 'Embedding content', () => { // Valid provider; invalid content. Should render failed, edit state. await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); - await page.waitForSelector( - 'input[value="https://twitter.com/wooyaygutenberg123454312"]' - ); + await page.waitForFunction( () => { + const embedPlaceholders = document.querySelectorAll( + '.wp-block-editor-placeholder' + ); + const lastEmbedPlaceholder = + embedPlaceholders[ embedPlaceholders.length - 1 ]; + return lastEmbedPlaceholder?.shadowRoot.querySelector( + 'input[value="https://twitter.com/wooyaygutenberg123454312"]' + ); + } ); // WordPress invalid content. Should render failed, edit state. await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' ); - await page.waitForSelector( - 'input[value="https://wordpress.org/gutenberg/handbook/"]' - ); + await page.waitForFunction( () => { + const embedPlaceholders = document.querySelectorAll( + '.wp-block-editor-placeholder' + ); + const lastEmbedPlaceholder = + embedPlaceholders[ embedPlaceholders.length - 1 ]; + return lastEmbedPlaceholder?.shadowRoot.querySelector( + 'input[value="https://wordpress.org/gutenberg/handbook/"]' + ); + } ); // Provider whose oembed API has gone wrong. Should render failed, edit // state. await insertEmbed( 'https://twitter.com/thatbunty' ); - await page.waitForSelector( - 'input[value="https://twitter.com/thatbunty"]' - ); + await page.waitForFunction( () => { + const embedPlaceholders = document.querySelectorAll( + '.wp-block-editor-placeholder' + ); + const lastEmbedPlaceholder = + embedPlaceholders[ embedPlaceholders.length - 1 ]; + return lastEmbedPlaceholder?.shadowRoot.querySelector( + 'input[value="https://twitter.com/thatbunty"]' + ); + } ); // WordPress content that can be embedded. Should render valid figure // element. @@ -227,16 +249,8 @@ describe( 'Embedding content', () => { it( 'should allow the user to convert unembeddable URLs to a paragraph with a link in it', async () => { // URL that can't be embedded. await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); + await clickPlaceholderButton( 'Convert to link' ); - // Wait for the request to fail and present an error. Since placeholder - // has styles applied which depend on resize observer, wait for the - // expected size class to settle before clicking, since otherwise a race - // condition could occur on the placeholder layout vs. click intent. - await page.waitForSelector( - '.components-placeholder.is-large .components-placeholder__error' - ); - - await clickButton( 'Convert to link' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); @@ -250,14 +264,7 @@ describe( 'Embedding content', () => { it( 'should allow the user to try embedding a failed URL again', async () => { // URL that can't be embedded. await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' ); - - // Wait for the request to fail and present an error. Since placeholder - // has styles applied which depend on resize observer, wait for the - // expected size class to settle before clicking, since otherwise a race - // condition could occur on the placeholder layout vs. click intent. - await page.waitForSelector( - '.components-placeholder.is-large .components-placeholder__error' - ); + await page.evaluate( () => new Promise( requestIdleCallback ) ); // Set up a different mock to make sure that try again actually does make the request again. await setUpResponseMocking( [ @@ -270,7 +277,7 @@ describe( 'Embedding content', () => { ), }, ] ); - await clickButton( 'Try again' ); + await clickPlaceholderButton( 'Try again' ); await page.waitForSelector( 'figure.wp-block-embed' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js index c87700e23d3e1..bb57195e0bd4b 100644 --- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js +++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js @@ -12,6 +12,8 @@ import { clickMenuItem, saveDraft, transformBlockTo, + clickPlaceholderButton, + insertBlock, } from '@wordpress/e2e-test-utils'; async function getSelectedFlatIndices() { @@ -650,12 +652,8 @@ describe( 'Multi-block selection', () => { it( 'should gradually multi-select', async () => { await clickBlockAppender(); - await page.keyboard.type( '/columns' ); - await page.keyboard.press( 'Enter' ); - // Select two columns. - await page.keyboard.press( 'ArrowRight' ); - await page.keyboard.press( 'ArrowRight' ); - await page.keyboard.press( 'Enter' ); + await insertBlock( 'Columns' ); + await clickPlaceholderButton( 'Two columns; equal split' ); // Navigate to appender. await page.keyboard.press( 'ArrowRight' ); await page.keyboard.press( 'Enter' ); diff --git a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js index 367c61eec96fb..5bdf72ad8d985 100644 --- a/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js +++ b/packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js @@ -6,6 +6,7 @@ import { pressKeyWithModifier, clickBlockToolbarButton, insertBlock, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; async function focusBlockToolbar() { @@ -101,7 +102,7 @@ describe( 'Toolbar roving tabindex', () => { // Move focus to the first toolbar item await page.keyboard.press( 'Home' ); await expectLabelToHaveFocus( 'Table' ); - await page.click( '.blocks-table__placeholder-button' ); + await clickPlaceholderButton( 'Create Table' ); await page.keyboard.press( 'Tab' ); await testBlockToolbarKeyboardNavigation( 'Body cell text', 'Table' ); await wrapCurrentBlockWithGroup( 'Table' ); diff --git a/packages/e2e-tests/specs/editor/various/writing-flow.test.js b/packages/e2e-tests/specs/editor/various/writing-flow.test.js index 9eb3aa42dafe9..ae0ad1172d494 100644 --- a/packages/e2e-tests/specs/editor/various/writing-flow.test.js +++ b/packages/e2e-tests/specs/editor/various/writing-flow.test.js @@ -9,6 +9,7 @@ import { pressKeyWithModifier, insertBlock, clickBlockToolbarButton, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; const getActiveBlockName = async () => @@ -26,7 +27,7 @@ const addParagraphsAndColumnsDemo = async () => { `//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Columns')]` ); await page.keyboard.press( 'Enter' ); - await page.click( ':focus [aria-label="Two columns; equal split"]' ); + await clickPlaceholderButton( 'Two columns; equal split' ); await page.click( ':focus .block-editor-button-block-appender' ); await page.waitForSelector( '.block-editor-inserter__search input:focus' ); await page.keyboard.type( 'Paragraph' ); @@ -554,7 +555,6 @@ describe( 'Writing Flow', () => { it( 'should not have a dead zone above an aligned block', async () => { await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '/image' ); await page.keyboard.press( 'Enter' ); @@ -565,7 +565,9 @@ describe( 'Writing Flow', () => { await wideButton.click(); // Select the previous block. - await page.keyboard.press( 'ArrowUp' ); + await page.click( '[data-type="core/paragraph"]' ); + + await page.keyboard.type( '1' ); // Confirm correct setup. expect( await getEditedPostContent() ).toMatchSnapshot(); @@ -599,15 +601,8 @@ describe( 'Writing Flow', () => { it( 'should only consider the content as one tab stop', async () => { await page.keyboard.press( 'Enter' ); - await page.keyboard.type( '/table' ); - await page.keyboard.press( 'Enter' ); - // Move into the placeholder UI. - await page.keyboard.press( 'ArrowDown' ); - // Tab to the "Create table" button. - await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - // Create the table. - await page.keyboard.press( 'Space' ); + await insertBlock( 'Table' ); + await clickPlaceholderButton( 'Create Table' ); // Return focus after focus loss. This should be fixed. await page.keyboard.press( 'Tab' ); // Navigate to the second cell. @@ -618,10 +613,8 @@ describe( 'Writing Flow', () => { // The content should only have one tab stop. await page.keyboard.press( 'Tab' ); expect( - await page.evaluate( () => - document.activeElement.getAttribute( 'aria-label' ) - ) - ).toBe( 'Post' ); + await page.evaluate( () => document.activeElement.textContent ) + ).toBe( 'Open document settings' ); await pressKeyWithModifier( 'shift', 'Tab' ); await pressKeyWithModifier( 'shift', 'Tab' ); expect( diff --git a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js index 26ba4976a506b..09bac81f23faf 100644 --- a/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/site-editor/multi-entity-saving.test.js @@ -11,6 +11,7 @@ import { trashAllPosts, activateTheme, clickButton, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; /** @@ -28,8 +29,6 @@ describe( 'Multi-entity save flow', () => { const savePanelSelector = '.entities-saved-states__panel'; const closePanelButtonSelector = '.editor-post-publish-panel__header-cancel-button button'; - const createNewButtonSelector = - '//button[contains(text(), "New template part")]'; // Reusable assertions across Post/Site editors. const assertAllBoxesChecked = async () => { @@ -115,10 +114,8 @@ describe( 'Multi-entity save flow', () => { // Add a template part and edit it. await insertBlock( 'Template Part' ); - const createNewButton = await page.waitForXPath( - createNewButtonSelector - ); - await createNewButton.click(); + await clickPlaceholderButton( 'New template part' ); + const confirmTitleButton = await page.waitForSelector( confirmTitleButtonSelector ); diff --git a/packages/e2e-tests/specs/site-editor/template-part.test.js b/packages/e2e-tests/specs/site-editor/template-part.test.js index 294b361b63cc8..bbc882da28ed0 100644 --- a/packages/e2e-tests/specs/site-editor/template-part.test.js +++ b/packages/e2e-tests/specs/site-editor/template-part.test.js @@ -11,6 +11,7 @@ import { selectBlockByClientId, clickBlockToolbarButton, canvas, + clickPlaceholderButton, } from '@wordpress/e2e-test-utils'; /** @@ -273,10 +274,6 @@ describe( 'Template Part', () => { const templatePartSelector = '*[data-type="core/template-part"]'; const activatedTemplatePartSelector = `${ templatePartSelector }.block-editor-block-list__layout`; const testContentSelector = `//p[contains(., "${ testContent }")]`; - const createNewButtonSelector = - '//button[contains(text(), "New template part")]'; - const chooseExistingButtonSelector = - '//button[contains(text(), "Choose existing")]'; const confirmTitleButtonSelector = '.wp-block-template-part__placeholder-create-new__title-form .components-button.is-primary'; @@ -286,11 +283,7 @@ describe( 'Template Part', () => { await disablePrePublishChecks(); // Create new template part. await insertBlock( 'Template Part' ); - await page.waitForXPath( chooseExistingButtonSelector ); - const [ createNewButton ] = await page.$x( - createNewButtonSelector - ); - await createNewButton.click(); + await clickPlaceholderButton( 'New template part' ); const confirmTitleButton = await page.waitForSelector( confirmTitleButtonSelector ); @@ -314,10 +307,7 @@ describe( 'Template Part', () => { await createNewPost(); // Try to insert the template part we created. await insertBlock( 'Template Part' ); - const chooseExistingButton = await page.waitForXPath( - chooseExistingButtonSelector - ); - await chooseExistingButton.click(); + await clickPlaceholderButton( 'Choose existing' ); const preview = await page.waitForSelector( '[aria-label="Create New"]' ); diff --git a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js index dec762a39da59..6ebdf7a0477a7 100644 --- a/packages/e2e-tests/specs/widgets/customizing-widgets.test.js +++ b/packages/e2e-tests/specs/widgets/customizing-widgets.test.js @@ -540,10 +540,11 @@ describe( 'Widgets Customizer', () => { await footer1Section.click(); const legacyWidgetBlock = await addBlock( 'Legacy Widget' ); - const selectLegacyWidgets = await find( { - role: 'combobox', - name: 'Select a legacy widget to display:', - } ); + const selectLegacyWidgets = await page.waitForFunction( () => + document + .querySelector( '.wp-block-editor-placeholder' ) + ?.shadowRoot.querySelector( 'select' ) + ); await selectLegacyWidgets.select( 'test_widget' ); await expect( { diff --git a/packages/server-side-render/package.json b/packages/server-side-render/package.json index 8614a4231497b..c5d378b4f1b59 100644 --- a/packages/server-side-render/package.json +++ b/packages/server-side-render/package.json @@ -28,6 +28,7 @@ "dependencies": { "@babel/runtime": "^7.16.0", "@wordpress/api-fetch": "file:../api-fetch", + "@wordpress/block-editor": "file:../block-editor", "@wordpress/blocks": "file:../blocks", "@wordpress/components": "file:../components", "@wordpress/compose": "file:../compose", diff --git a/packages/server-side-render/src/server-side-render.js b/packages/server-side-render/src/server-side-render.js index 06b67d7f62d0d..d011203f41ad1 100644 --- a/packages/server-side-render/src/server-side-render.js +++ b/packages/server-side-render/src/server-side-render.js @@ -11,8 +11,9 @@ import { RawHTML, useEffect, useRef, useState } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import { addQueryArgs } from '@wordpress/url'; -import { Placeholder, Spinner } from '@wordpress/components'; +import { Spinner } from '@wordpress/components'; import { __experimentalSanitizeBlockAttributes } from '@wordpress/blocks'; +import { Placeholder } from '@wordpress/block-editor'; export function rendererPath( block, attributes = null, urlQueryArgs = {} ) { return addQueryArgs( `/wp/v2/block-renderer/${ block }`, { diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js index f456c0e4e66db..3f1c82d0dc30a 100644 --- a/packages/widgets/src/blocks/legacy-widget/edit/index.js +++ b/packages/widgets/src/blocks/legacy-widget/edit/index.js @@ -12,8 +12,9 @@ import { InspectorControls, BlockIcon, store as blockEditorStore, + Placeholder, } from '@wordpress/block-editor'; -import { Spinner, Placeholder } from '@wordpress/components'; +import { Spinner } from '@wordpress/components'; import { brush as brushIcon } from '@wordpress/icons'; import { __ } from '@wordpress/i18n'; import { useState, useCallback } from '@wordpress/element'; diff --git a/packages/widgets/src/blocks/legacy-widget/edit/preview.js b/packages/widgets/src/blocks/legacy-widget/edit/preview.js index 3d731672e8743..9f710d098c411 100644 --- a/packages/widgets/src/blocks/legacy-widget/edit/preview.js +++ b/packages/widgets/src/blocks/legacy-widget/edit/preview.js @@ -8,9 +8,10 @@ import classnames from 'classnames'; */ import { useRefEffect } from '@wordpress/compose'; import { useEffect, useState } from '@wordpress/element'; -import { Disabled, Placeholder, Spinner } from '@wordpress/components'; +import { Disabled, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; +import { Placeholder } from '@wordpress/block-editor'; export default function Preview( { idBase, instance, isVisible } ) { const [ isLoaded, setIsLoaded ] = useState( false );