Interface: move EditorSkeleton to interface package (#21335)

Rename EditorSkeleton component to InterfaceSkeleton and move it from block-editor to interface package.
WordPress · Apr 3, 2020 · 2e8dc51 · 2e8dc51
1 parent 7601a5a
commit 2e8dc51
Show file tree

Hide file tree

Showing 17 changed files with 76 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
 			<FocusReturnProvider>
-				<EditorSkeleton
+				<InterfaceSkeleton
 					className={ className }
 					header={ <Header /> }
 					sidebar={
@@ -175,7 +176,7 @@ function Layout() {
 							</div>
 						)
 					}
-					publish={
+					actions={
 						publishSidebarOpened ? (
 							<PostPublishPanel
 								onClose={ closePublishSidebar }

diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
@@ -57,7 +57,7 @@
 	}
 }
 
-.block-editor-editor-skeleton__sidebar > 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
@@ -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
@@ -17,11 +17,10 @@ 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';
 
 /**
  * Internal dependencies
@@ -75,7 +74,7 @@ function Editor( { settings: _settings } ) {
 						>
 							<Context.Provider value={ context }>
 								<FocusReturnProvider>
-									<EditorSkeleton
+									<InterfaceSkeleton
 										sidebar={ ! isMobile && <Sidebar /> }
 										header={ <Header /> }
 										content={

diff --git 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
@@ -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 } ) {
 			<SlotFillProvider>
 				<DropZoneProvider>
 					<FocusReturnProvider>
-						<EditorSkeleton
+						<InterfaceSkeleton
 							header={ <Header /> }
 							sidebar={ ! isMobile && <Sidebar /> }
 							content={

diff --git 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
@@ -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/...r/src/components/editor-skeleton/index.js → ...rc/components/interface-skeleton/index.js b/...r/src/components/editor-skeleton/index.js → ...rc/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 (
 		<div
 			className={ classnames(
 				className,
-				'block-editor-editor-skeleton'
+				'interface-interface-skeleton'
 			) }
 		>
 			{ !! header && (
 				<div
-					className="block-editor-editor-skeleton__header"
+					className="interface-interface-skeleton__header"
 					role="region"
 					/* translators: accessibility text for the top bar landmark region. */
-					aria-label={ __( 'Editor top bar' ) }
+					aria-label={ mergedLabels.header }
 					tabIndex="-1"
 				>
 					{ header }
 				</div>
 			) }
-			<div className="block-editor-editor-skeleton__body">
+			<div className="interface-interface-skeleton__body">
 				<div
-					className="block-editor-editor-skeleton__content"
+					className="interface-interface-skeleton__content"
 					role="region"
 					/* translators: accessibility text for the content landmark region. */
-					aria-label={ __( 'Editor content' ) }
+					aria-label={ mergedLabels.body }
 					tabIndex="-1"
 				>
 					{ content }
 				</div>
 				{ !! sidebar && (
 					<div
-						className="block-editor-editor-skeleton__sidebar"
+						className="interface-interface-skeleton__sidebar"
 						role="region"
 						/* translators: accessibility text for the settings landmark region. */
-						aria-label={ __( 'Editor settings' ) }
+						aria-label={ mergedLabels.sidebar }
 						tabIndex="-1"
 					>
 						{ sidebar }
 					</div>
 				) }
-				{ !! publish && (
+				{ !! actions && (
 					<div
-						className="block-editor-editor-skeleton__publish"
+						className="interface-interface-skeleton__actions"
 						role="region"
 						/* translators: accessibility text for the publish landmark region. */
-						aria-label={ __( 'Editor publish' ) }
+						aria-label={ mergedLabels.actions }
 						tabIndex="-1"
 					>
-						{ publish }
+						{ actions }
 					</div>
 				) }
 			</div>
 			{ !! footer && (
 				<div
-					className="block-editor-editor-skeleton__footer"
+					className="interface-interface-skeleton__footer"
 					role="region"
 					/* translators: accessibility text for the footer landmark region. */
-					aria-label={ __( 'Editor footer' ) }
+					aria-label={ mergedLabels.footer }
 					tabIndex="-1"
 				>
 					{ footer }
@@ -99,4 +111,4 @@ function EditorSkeleton( {
 	);
 }
 
-export default navigateRegions( EditorSkeleton );
+export default navigateRegions( InterfaceSkeleton );