-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block editor: placeholders: try admin shadow
- Loading branch information
Showing
48 changed files
with
459 additions
and
212 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 157 additions & 0 deletions
157
packages/block-editor/src/components/embedded-admin-context/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = ( | ||
| <StyleProvider document={ { head: shadow } }> | ||
| <div | ||
| role="dialog" | ||
| ref={ useMergeRefs( [ useConstrainedTabbing(), dialogRef ] ) } | ||
| > | ||
| { props.children } | ||
| </div> | ||
| </StyleProvider> | ||
| ); | ||
|
|
||
| return ( | ||
| <div | ||
| { ...props } | ||
| ref={ ref } | ||
| tabIndex={ 0 } | ||
| role="button" | ||
| aria-pressed={ hasFocus } | ||
| > | ||
| { shadow && createPortal( content, shadow ) } | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <EmbeddedAdminContext | ||
| aria-label={ sprintf( | ||
| /* translators: %s: what the placeholder is for */ | ||
| __( 'Placeholder: %s' ), | ||
| props.label | ||
| ) } | ||
| className="wp-block-editor-placeholder" | ||
| > | ||
| <Placeholder { ...props } /> | ||
| </EmbeddedAdminContext> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.