-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Style book: make the style book slot generic (#49973)
* Initial commit: - create new component slot to house style book and other editor views * - adding state for editor canvas view container - forwarding refs to first child * - attempting to juggle refs so that we retain keyboard navigation and close functionality * Remove comment that was the motivation behind this PR in the first place. * Adding the label to the interactive element * Make the slot private. * Resetting default state of `editorCanvasContainerView` to `undefined`
- Loading branch information
Showing
12 changed files
with
240 additions
and
103 deletions.
There are no files selected for viewing
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
115 changes: 115 additions & 0 deletions
115
packages/edit-site/src/components/editor-canvas-container/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,115 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Children, cloneElement, useState, useMemo } from '@wordpress/element'; | ||
| import { | ||
| Button, | ||
| privateApis as componentsPrivateApis, | ||
| } from '@wordpress/components'; | ||
| import { ESCAPE } from '@wordpress/keycodes'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { useDispatch, useSelect } from '@wordpress/data'; | ||
| import { closeSmall } from '@wordpress/icons'; | ||
| import { useFocusOnMount, useFocusReturn } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { unlock } from '../../private-apis'; | ||
| import { store as editSiteStore } from '../../store'; | ||
|
|
||
| /** | ||
| * Returns a translated string for the title of the editor canvas container. | ||
| * | ||
| * @param {string} view Editor canvas container view. | ||
| * | ||
| * @return {string} Translated string corresponding to value of view. Default is ''. | ||
| */ | ||
| export function getEditorCanvasContainerTitle( view ) { | ||
| switch ( view ) { | ||
| case 'style-book': | ||
| return __( 'Style Book' ); | ||
| default: | ||
| return ''; | ||
| } | ||
| } | ||
|
|
||
| // Creates a private slot fill. | ||
| const { createPrivateSlotFill } = unlock( componentsPrivateApis ); | ||
| const SLOT_FILL_NAME = 'EditSiteEditorCanvasContainerSlot'; | ||
| const { Slot: EditorCanvasContainerSlot, Fill: EditorCanvasContainerFill } = | ||
| createPrivateSlotFill( SLOT_FILL_NAME ); | ||
|
|
||
| function EditorCanvasContainer( { | ||
| children, | ||
| closeButtonLabel, | ||
| onClose = () => {}, | ||
| } ) { | ||
| const editorCanvasContainerView = useSelect( | ||
| ( select ) => | ||
| unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), | ||
| [] | ||
| ); | ||
| const [ isClosed, setIsClosed ] = useState( false ); | ||
| const { setEditorCanvasContainerView } = unlock( | ||
| useDispatch( editSiteStore ) | ||
| ); | ||
| const focusOnMountRef = useFocusOnMount( 'firstElement' ); | ||
| const sectionFocusReturnRef = useFocusReturn(); | ||
| const title = useMemo( | ||
| () => getEditorCanvasContainerTitle( editorCanvasContainerView ), | ||
| [ editorCanvasContainerView ] | ||
| ); | ||
| function onCloseContainer() { | ||
| onClose(); | ||
| setEditorCanvasContainerView( undefined ); | ||
| setIsClosed( true ); | ||
| } | ||
|
|
||
| function closeOnEscape( event ) { | ||
| if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) { | ||
| event.preventDefault(); | ||
| onCloseContainer(); | ||
| } | ||
| } | ||
|
|
||
| const childrenWithProps = Array.isArray( children ) | ||
| ? Children.map( children, ( child, index ) => | ||
| index === 0 | ||
| ? cloneElement( child, { | ||
| ref: sectionFocusReturnRef, | ||
| } ) | ||
| : child | ||
| ) | ||
| : cloneElement( children, { | ||
| ref: sectionFocusReturnRef, | ||
| } ); | ||
|
|
||
| if ( isClosed ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <EditorCanvasContainerFill> | ||
| { /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ } | ||
| <section | ||
| className="edit-site-editor-canvas-container" | ||
| ref={ focusOnMountRef } | ||
| onKeyDown={ closeOnEscape } | ||
| aria-label={ title } | ||
| > | ||
| <Button | ||
| className="edit-site-editor-canvas-container__close-button" | ||
| icon={ closeSmall } | ||
| label={ closeButtonLabel || __( 'Close' ) } | ||
| onClick={ onCloseContainer } | ||
| showTooltip={ false } | ||
| /> | ||
| { childrenWithProps } | ||
| </section> | ||
| </EditorCanvasContainerFill> | ||
| ); | ||
| } | ||
|
|
||
| EditorCanvasContainer.Slot = EditorCanvasContainerSlot; | ||
| export default EditorCanvasContainer; |
19 changes: 19 additions & 0 deletions
19
packages/edit-site/src/components/editor-canvas-container/style.scss
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,19 @@ | ||
| .edit-site-editor-canvas-container { | ||
| background: $white; // Fallback color, overridden by JavaScript. | ||
| border-radius: $radius-block-ui; | ||
| bottom: 0; | ||
| left: 0; | ||
| overflow: hidden; | ||
| position: absolute; | ||
| right: 0; | ||
| top: 0; | ||
| transition: all 0.3s; // Match .block-editor-iframe__body transition. | ||
| } | ||
|
|
||
| .edit-site-editor-canvas-container__close-button { | ||
| position: absolute; | ||
| right: $grid-unit-10; | ||
| top: math.div($grid-unit-60 - $button-size, 2); // ( tab height - button size ) / 2 | ||
| z-index: 1; | ||
| background: $white; | ||
| } |
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.