From 9f64def59d9f3086c781a5be8504c1617800f674 Mon Sep 17 00:00:00 2001 From: Marko Andrijasevic Date: Thu, 2 Apr 2020 00:00:53 +0200 Subject: [PATCH 1/2] Interface: move EditorSkeleton to interface package --- package-lock.json | 1 + packages/base-styles/_z-index.scss | 8 ++-- packages/block-editor/src/components/index.js | 1 - packages/block-editor/src/style.scss | 1 - .../editor/various/adding-blocks.test.js | 2 +- .../various/keyboard-navigable-blocks.test.js | 2 +- .../edit-post/src/components/layout/index.js | 15 +++--- .../src/components/layout/style.scss | 12 ++--- packages/edit-post/src/index.js | 4 +- .../edit-site/src/components/editor/index.js | 15 ++++-- packages/edit-widgets/package.json | 1 + .../src/components/layout/index.js | 8 ++-- packages/edit-widgets/src/style.scss | 2 +- packages/interface/src/components/index.js | 1 + .../components/interface-skeleton}/index.js | 48 ++++++++++++------- .../components/interface-skeleton}/style.scss | 28 +++++------ packages/interface/src/style.scss | 1 + 17 files changed, 86 insertions(+), 64 deletions(-) rename packages/{block-editor/src/components/editor-skeleton => interface/src/components/interface-skeleton}/index.js (61%) rename packages/{block-editor/src/components/editor-skeleton => interface/src/components/interface-skeleton}/style.scss (82%) diff --git a/package-lock.json b/package-lock.json index 1acccbb3f0676d..cdbc55c41ee8c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11042,6 +11042,7 @@ "@wordpress/element": "file:packages/element", "@wordpress/hooks": "file:packages/hooks", "@wordpress/i18n": "file:packages/i18n", + "@wordpress/interface": "file:packages/interface", "@wordpress/media-utils": "file:packages/media-utils", "@wordpress/notices": "file:packages/notices", "lodash": "^4.17.15", diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index 6b6e7e1a5dbfed..b0b09d483dab9f 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -24,7 +24,7 @@ $z-layers: ( ".block-library-gallery-item__inline-menu": 20, ".block-editor-url-input__suggestions": 30, ".edit-post-layout__footer": 30, - ".block-editor-editor-skeleton__header": 30, + ".interface-interface-skeleton__header": 30, ".edit-site-header": 62, ".edit-widgets-header": 30, ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter @@ -62,7 +62,7 @@ $z-layers: ( // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } - ".block-editor-editor-skeleton__sidebar": 100000, + ".interface-interface-skeleton__sidebar": 100000, ".edit-post-layout__toogle-sidebar-panel": 100000, ".edit-site-sidebar": 100000, ".edit-widgets-sidebar": 100000, @@ -73,7 +73,7 @@ $z-layers: ( // Show sidebar in greater than small viewports above editor related elements // but bellow #adminmenuback { z-index: 100 } - ".block-editor-editor-skeleton__sidebar {greater than small}": 90, + ".interface-interface-skeleton__sidebar {greater than small}": 90, ".edit-site-sidebar {greater than small}": 90, ".edit-widgets-sidebar {greater than small}": 90, @@ -108,7 +108,7 @@ $z-layers: ( ".components-autocomplete__results": 1000000, ".skip-to-selected-block": 100000, - ".block-editor-editor-skeleton__publish": 100000, + ".interface-interface-skeleton__actions": 100000, // Show NUX tips above popovers, wp-admin menus, submenus, and sidebar: ".nux-dot-tip": 1000001, diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index fd206bfa47d116..ae163f11df919f 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -22,7 +22,6 @@ export { default as ButtonBlockerAppender } from './button-block-appender'; export { default as ColorPalette } from './color-palette'; export { default as ColorPaletteControl } from './color-palette/control'; export { default as ContrastChecker } from './contrast-checker'; -export { default as __experimentalEditorSkeleton } from './editor-skeleton'; export { default as __experimentalGradientPicker } from './gradient-picker'; export { default as __experimentalGradientPickerControl } from './gradient-picker/control'; export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel'; diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index ca137bdb535ca9..1ae8c940910fa0 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -54,6 +54,5 @@ // Styles for components that are used outside of the editing canvas go here: @import "./components/block-toolbar/style.scss"; -@import "./components/editor-skeleton/style.scss"; @import "./components/inserter/style.scss"; diff --git a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js index ed5244c50c189a..11f78fe278ab8a 100644 --- a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js @@ -42,7 +42,7 @@ describe( 'adding blocks', () => { // Click below editor to focus last field (block appender) await clickAtBottom( - await page.$( '.block-editor-editor-skeleton__content' ) + await page.$( '.interface-interface-skeleton__content' ) ); expect( await page.$( '[data-type="core/paragraph"]' ) ).not.toBeNull(); await page.keyboard.type( 'Paragraph block' ); diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js index 7226e0750e5726..8f3854fb8ef4f1 100644 --- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js @@ -149,7 +149,7 @@ describe( 'Order of block keyboard navigation', () => { await page.evaluate( () => { document.querySelector( '.edit-post-visual-editor' ).focus(); document - .querySelector( '.block-editor-editor-skeleton__sidebar' ) + .querySelector( '.interface-interface-skeleton__sidebar' ) .focus(); } ); diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index a33ead5f7cb03d..de11658f603ad9 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -15,10 +15,7 @@ import { EditorKeyboardShortcutsRegister, } from '@wordpress/editor'; import { useSelect, useDispatch } from '@wordpress/data'; -import { - BlockBreadcrumb, - __experimentalEditorSkeleton as EditorSkeleton, -} from '@wordpress/block-editor'; +import { BlockBreadcrumb } from '@wordpress/block-editor'; import { Button, ScrollLock, @@ -28,7 +25,11 @@ import { import { useViewportMatch } from '@wordpress/compose'; import { PluginArea } from '@wordpress/plugins'; import { __ } from '@wordpress/i18n'; -import { ComplementaryArea, FullscreenMode } from '@wordpress/interface'; +import { + ComplementaryArea, + FullscreenMode, + InterfaceSkeleton, +} from '@wordpress/interface'; /** * Internal dependencies @@ -121,7 +122,7 @@ function Layout() { - } sidebar={ @@ -175,7 +176,7 @@ function Layout() { ) } - publish={ + actions={ publishSidebarOpened ? ( div { +.interface-interface-skeleton__sidebar > div { height: 100%; } @@ -82,10 +82,10 @@ display: flex; justify-content: center; - .block-editor-editor-skeleton__publish:focus &, - .block-editor-editor-skeleton__publish:focus-within &, - .block-editor-editor-skeleton__sidebar:focus &, - .block-editor-editor-skeleton__sidebar:focus-within & { + .interface-interface-skeleton__actions:focus &, + .interface-interface-skeleton__actions:focus-within &, + .interface-interface-skeleton__actions:focus &, + .interface-interface-skeleton__actions:focus-within & { top: auto; bottom: 0; } @@ -106,7 +106,7 @@ } } -.edit-post-layout .block-editor-editor-skeleton__content { +.edit-post-layout .interface-interface-skeleton__content { background-color: $light-gray-700; } diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js index 086553ee738b61..1d5475c63535f8 100644 --- a/packages/edit-post/src/index.js +++ b/packages/edit-post/src/index.js @@ -113,14 +113,14 @@ export function initializeEditor( // Without this hack the browser scrolls the mobile toolbar off-screen. // Once supported in Safari we can replace this in favor of preventScroll. // For details see issue #18632 and PR #18686 - // Specifically, we scroll `block-editor-editor-skeleton__body` to enable a fixed top toolbar. + // Specifically, we scroll `interface-interface-skeleton__body` to enable a fixed top toolbar. // But Mobile Safari forces the `html` element to scroll upwards, hiding the toolbar. const isIphone = window.navigator.userAgent.indexOf( 'iPhone' ) !== -1; if ( isIphone ) { window.addEventListener( 'scroll', function( event ) { const editorScrollContainer = document.getElementsByClassName( - 'block-editor-editor-skeleton__body' + 'interface-interface-skeleton__body' )[ 0 ]; if ( event.target === document ) { // Scroll element into view by scrolling the editor container by the same amount diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 1a20931f1dde70..22d2102508b8b7 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -17,11 +17,11 @@ import { import { EntityProvider } from '@wordpress/core-data'; import { BlockBreadcrumb, - __experimentalEditorSkeleton as EditorSkeleton, __unstableEditorStyles as EditorStyles, } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; -import { FullscreenMode } from '@wordpress/interface'; +import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -61,6 +61,14 @@ function Editor( { settings: _settings } ) { }; }, [] ); + const skeletonLabels = { + header: __( 'Site Editor header' ), + body: __( 'Site Editor content' ), + sidebar: __( 'Site Editor settings' ), + actions: __( 'Site Editor publish' ), + footer: __( 'Site Editor footer' ), + }; + return template ? ( <> @@ -75,7 +83,7 @@ function Editor( { settings: _settings } ) { > - } header={
} content={ @@ -86,6 +94,7 @@ function Editor( { settings: _settings } ) { } footer={ } + labels={ skeletonLabels } /> diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json index 09aa2bfa870708..61365c9c2c1d57 100644 --- a/packages/edit-widgets/package.json +++ b/packages/edit-widgets/package.json @@ -32,6 +32,7 @@ "@wordpress/element": "file:../element", "@wordpress/hooks": "file:../hooks", "@wordpress/i18n": "file:../i18n", + "@wordpress/interface": "file:../interface", "@wordpress/media-utils": "file:../media-utils", "@wordpress/notices": "file:../notices", "lodash": "^4.17.15", diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js index 5f5c4424b3909c..97b6c6b2ea9d8a 100644 --- a/packages/edit-widgets/src/components/layout/index.js +++ b/packages/edit-widgets/src/components/layout/index.js @@ -8,11 +8,9 @@ import { FocusReturnProvider, } from '@wordpress/components'; import { useState } from '@wordpress/element'; -import { - BlockEditorKeyboardShortcuts, - __experimentalEditorSkeleton as EditorSkeleton, -} from '@wordpress/block-editor'; +import { BlockEditorKeyboardShortcuts } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; +import { InterfaceSkeleton } from '@wordpress/interface'; /** * Internal dependencies @@ -32,7 +30,7 @@ function Layout( { blockEditorSettings } ) { - } sidebar={ ! isMobile && } content={ diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 86ee2bd54c3c69..7912f7b4008797 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -49,7 +49,7 @@ body.gutenberg_page_gutenberg-widgets { } - .block-editor-editor-skeleton__content { + .interface-interface-skeleton__content { background-color: #f1f1f1; } } diff --git a/packages/interface/src/components/index.js b/packages/interface/src/components/index.js index 94f24ac323c7b1..9071a42c0ff944 100644 --- a/packages/interface/src/components/index.js +++ b/packages/interface/src/components/index.js @@ -1,3 +1,4 @@ export { default as ComplementaryArea } from './complementary-area'; export { default as FullscreenMode } from './fullscreen-mode'; +export { default as InterfaceSkeleton } from './interface-skeleton'; export { default as PinnedItems } from './pinned-items'; diff --git a/packages/block-editor/src/components/editor-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js similarity index 61% rename from packages/block-editor/src/components/editor-skeleton/index.js rename to packages/interface/src/components/interface-skeleton/index.js index ca4f3646f529c6..d1065602373608 100644 --- a/packages/block-editor/src/components/editor-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -24,72 +24,84 @@ function useHTMLClass( className ) { }, [ className ] ); } -function EditorSkeleton( { +function InterfaceSkeleton( { footer, header, sidebar, content, - publish, + actions, + labels, className, } ) { - useHTMLClass( 'block-editor-editor-skeleton__html-container' ); + useHTMLClass( 'interface-interface-skeleton__html-container' ); + + const defaultLabels = { + header: __( 'Header' ), + body: __( 'Content' ), + sidebar: __( 'Settings' ), + actions: __( 'Publish' ), + footer: __( 'Footer' ), + }; + + const mergedLabels = { ...defaultLabels, ...labels }; + return (
{ !! header && (
{ header }
) } -
+
{ content }
{ !! sidebar && (
{ sidebar }
) } - { !! publish && ( + { !! actions && (
- { publish } + { actions }
) }
{ !! footer && (
{ footer } @@ -99,4 +111,4 @@ function EditorSkeleton( { ); } -export default navigateRegions( EditorSkeleton ); +export default navigateRegions( InterfaceSkeleton ); diff --git a/packages/block-editor/src/components/editor-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss similarity index 82% rename from packages/block-editor/src/components/editor-skeleton/style.scss rename to packages/interface/src/components/interface-skeleton/style.scss index 0d70dc621b8f10..39b7b85493f20d 100644 --- a/packages/block-editor/src/components/editor-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -1,6 +1,6 @@ // On Mobile devices, swiping the HTML element should not scroll. // By making it fixed, we prevent that. -html.block-editor-editor-skeleton__html-container { +html.interface-interface-skeleton__html-container { position: fixed; width: 100%; @@ -10,7 +10,7 @@ html.block-editor-editor-skeleton__html-container { } } -.block-editor-editor-skeleton { +.interface-interface-skeleton { display: flex; flex-direction: column; height: auto; @@ -33,9 +33,9 @@ html.block-editor-editor-skeleton__html-container { } } -@include editor-left(".block-editor-editor-skeleton"); +@include editor-left(".interface-interface-skeleton"); -.block-editor-editor-skeleton__body { +.interface-interface-skeleton__body { flex-grow: 1; display: flex; @@ -57,7 +57,7 @@ html.block-editor-editor-skeleton__html-container { overscroll-behavior-y: none; } -.block-editor-editor-skeleton__content { +.interface-interface-skeleton__content { flex-grow: 1; // Treat as flex container to allow children to grow to occupy full @@ -73,12 +73,12 @@ html.block-editor-editor-skeleton__html-container { } -.block-editor-editor-skeleton__sidebar { +.interface-interface-skeleton__sidebar { display: block; width: auto; // Keep the sidebar width flexible. flex-shrink: 0; position: absolute; - z-index: z-index(".block-editor-editor-skeleton__sidebar"); + z-index: z-index(".interface-interface-skeleton__sidebar"); top: 0; right: 0; bottom: 0; @@ -91,15 +91,15 @@ html.block-editor-editor-skeleton__html-container { overflow: auto; border-left: $border-width solid $light-gray-500; position: relative !important; - z-index: z-index(".block-editor-editor-skeleton__sidebar {greater than small}"); + z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}"); } } -.block-editor-editor-skeleton__header { +.interface-interface-skeleton__header { flex-shrink: 0; height: auto; // Keep the height flexible. border-bottom: $border-width solid $light-gray-500; - z-index: z-index(".block-editor-editor-skeleton__header"); + z-index: z-index(".interface-interface-skeleton__header"); color: $dark-gray-primary; // On Mobile the header is sticky. @@ -113,7 +113,7 @@ html.block-editor-editor-skeleton__html-container { } } -.block-editor-editor-skeleton__footer { +.interface-interface-skeleton__footer { height: auto; // Keep the height flexible. flex-shrink: 0; border-top: $border-width solid $light-gray-500; @@ -126,9 +126,9 @@ html.block-editor-editor-skeleton__html-container { } } -.block-editor-editor-skeleton__publish { - z-index: z-index(".block-editor-editor-skeleton__publish"); - position: fixed !important; // Need to override the default relative positionning +.interface-interface-skeleton__actions { + z-index: z-index(".interface-interface-skeleton__actions"); + position: fixed !important; // Need to override the default relative positioning top: -9999em; bottom: auto; left: auto; diff --git a/packages/interface/src/style.scss b/packages/interface/src/style.scss index aee8876bba3e94..d7f1e35e6e6616 100644 --- a/packages/interface/src/style.scss +++ b/packages/interface/src/style.scss @@ -1,4 +1,5 @@ @import "./components/complementary-area-header/style.scss"; @import "./components/complementary-area/style.scss"; @import "./components/fullscreen-mode/style.scss"; +@import "./components/interface-skeleton/style.scss"; @import "./components/pinned-items/style.scss"; From 68c5e2613d6722c435eb3eac112461335b772ecc Mon Sep 17 00:00:00 2001 From: Marko Andrijasevic Date: Fri, 3 Apr 2020 19:52:55 +0200 Subject: [PATCH 2/2] Remove custom site editor labels --- packages/edit-site/src/components/editor/index.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 22d2102508b8b7..66640b22f41e6f 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -21,7 +21,6 @@ import { } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; import { FullscreenMode, InterfaceSkeleton } from '@wordpress/interface'; -import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -61,14 +60,6 @@ function Editor( { settings: _settings } ) { }; }, [] ); - const skeletonLabels = { - header: __( 'Site Editor header' ), - body: __( 'Site Editor content' ), - sidebar: __( 'Site Editor settings' ), - actions: __( 'Site Editor publish' ), - footer: __( 'Site Editor footer' ), - }; - return template ? ( <> @@ -94,7 +85,6 @@ function Editor( { settings: _settings } ) { } footer={ } - labels={ skeletonLabels } />