EditorRegions: Move to block-editor package, rename to __experimental…

…EditorSkeleton (#20050)
WordPress · Feb 7, 2020 · de7c442 · de7c442
1 parent 31e7219
commit de7c442
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 34 deletions.
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,
-	".edit-post-editor-regions__header": 30,
+	".block-editor-editor-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
@@ -64,7 +64,7 @@ $z-layers: (
 
 	// Show sidebar above wp-admin navigation bar for mobile viewports:
 	// #wpadminbar { z-index: 99999 }
-	".edit-post-editor-regions__sidebar": 100000,
+	".block-editor-editor-skeleton__sidebar": 100000,
 	".edit-site-sidebar": 100000,
 	".edit-widgets-sidebar": 100000,
 	".edit-post-layout .edit-post-post-publish-panel": 100001,
@@ -74,7 +74,7 @@ $z-layers: (
 
 	// Show sidebar in greater than small viewports above editor related elements
 	// but bellow #adminmenuback { z-index: 100 }
-	".edit-post-editor-regions__sidebar {greater than small}": 90,
+	".block-editor-editor-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,
-	".edit-post-editor-regions__publish": 100000,
+	".block-editor-editor-skeleton__publish": 100000,
 
 	// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
 	".nux-dot-tip": 1000001,

diff --git a/...st/src/components/editor-regions/index.js → ...r/src/components/editor-skeleton/index.js b/...st/src/components/editor-regions/index.js → ...r/src/components/editor-skeleton/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function EditorRegions( {
+function EditorSkeleton( {
 	footer,
 	header,
 	sidebar,
@@ -18,10 +18,16 @@ function EditorRegions( {
 	className,
 } ) {
 	return (
-		<div className={ classnames( className, 'edit-post-editor-regions' ) }>
+		<div
+			className={ classnames(
+				className,
+				'block-editor-editor-skeleton',
+				'edit-post-editor-regions'
+			) }
+		>
 			{ !! header && (
 				<div
-					className="edit-post-editor-regions__header"
+					className="block-editor-editor-skeleton__header edit-post-editor-regions__header"
 					role="region"
 					/* translators: accessibility text for the top bar landmark region. */
 					aria-label={ __( 'Editor top bar' ) }
@@ -30,9 +36,9 @@ function EditorRegions( {
 					{ header }
 				</div>
 			) }
-			<div className="edit-post-editor-regions__body">
+			<div className="block-editor-editor-skeleton__body edit-post-editor-regions__body">
 				<div
-					className="edit-post-editor-regions__content"
+					className="block-editor-editor-skeleton__content edit-post-editor-regions__content"
 					role="region"
 					/* translators: accessibility text for the content landmark region. */
 					aria-label={ __( 'Editor content' ) }
@@ -42,7 +48,7 @@ function EditorRegions( {
 				</div>
 				{ !! sidebar && (
 					<div
-						className="edit-post-editor-regions__sidebar"
+						className="block-editor-editor-skeleton__sidebar edit-post-editor-regions__sidebar"
 						role="region"
 						/* translators: accessibility text for the settings landmark region. */
 						aria-label={ __( 'Editor settings' ) }
@@ -53,7 +59,7 @@ function EditorRegions( {
 				) }
 				{ !! publish && (
 					<div
-						className="edit-post-editor-regions__publish"
+						className="block-editor-editor-skeleton__publish edit-post-editor-regions__publish"
 						role="region"
 						/* translators: accessibility text for the publish landmark region. */
 						aria-label={ __( 'Editor publish' ) }
@@ -65,7 +71,7 @@ function EditorRegions( {
 			</div>
 			{ !! footer && (
 				<div
-					className="edit-post-editor-regions__footer"
+					className="block-editor-editor-skeleton__footer edit-post-editor-regions__footer"
 					role="region"
 					/* translators: accessibility text for the footer landmark region. */
 					aria-label={ __( 'Editor footer' ) }
@@ -78,4 +84,4 @@ function EditorRegions( {
 	);
 }
 
-export default navigateRegions( EditorRegions );
+export default navigateRegions( EditorSkeleton );
diff --git a/.../src/components/editor-regions/style.scss → ...src/components/editor-skeleton/style.scss b/.../src/components/editor-regions/style.scss → ...src/components/editor-skeleton/style.scss
@@ -10,7 +10,7 @@ html {
 	}
 }
 
-.edit-post-editor-regions {
+.block-editor-editor-skeleton {
 	display: flex;
 	flex-direction: column;
 	height: auto;
@@ -33,9 +33,9 @@ html {
 	}
 }
 
-@include editor-left(".edit-post-editor-regions");
+@include editor-left(".block-editor-editor-skeleton");
 
-.edit-post-editor-regions__body {
+.block-editor-editor-skeleton__body {
 	flex-grow: 1;
 	display: flex;
 
@@ -57,7 +57,7 @@ html {
 	overscroll-behavior-y: none;
 }
 
-.edit-post-editor-regions__content {
+.block-editor-editor-skeleton__content {
 	flex-grow: 1;
 
 	// Treat as flex container to allow children to grow to occupy full
@@ -73,12 +73,12 @@ html {
 	}
 }
 
-.edit-post-editor-regions__sidebar {
+.block-editor-editor-skeleton__sidebar {
 	display: none;
 
 	@include break-medium() {
 		display: block;
-		z-index: z-index(".edit-post-editor-regions__sidebar");
+		z-index: z-index(".block-editor-editor-skeleton__sidebar");
 		position: fixed !important; // Need to override the default relative positionning
 		top: -9999em;
 		bottom: auto;
@@ -93,12 +93,12 @@ html {
 	}
 }
 
-.is-sidebar-opened .edit-post-editor-regions__sidebar {
+.is-sidebar-opened .block-editor-editor-skeleton__sidebar {
 	display: block;
 	width: auto; // Keep the sidebar width flexible.
 	flex-shrink: 0;
 	position: absolute;
-	z-index: z-index(".edit-post-editor-regions__sidebar");
+	z-index: z-index(".block-editor-editor-skeleton__sidebar");
 	top: 0;
 	right: 0;
 	bottom: 0;
@@ -110,15 +110,15 @@ html {
 		overflow: auto;
 		border-left: $border-width solid $light-gray-500;
 		position: relative !important;
-		z-index: z-index(".edit-post-editor-regions__sidebar {greater than small}");
+		z-index: z-index(".block-editor-editor-skeleton__sidebar {greater than small}");
 	}
 }
 
-.edit-post-editor-regions__header {
+.block-editor-editor-skeleton__header {
 	flex-shrink: 0;
 	height: auto;  // Keep the height flexible.
 	border-bottom: $border-width solid $light-gray-500;
-	z-index: z-index(".edit-post-editor-regions__header");
+	z-index: z-index(".block-editor-editor-skeleton__header");
 
 	// On Mobile the header is sticky.
 	position: sticky;
@@ -131,7 +131,7 @@ html {
 	}
 }
 
-.edit-post-editor-regions__footer {
+.block-editor-editor-skeleton__footer {
 	height: auto;  // Keep the height flexible.
 	flex-shrink: 0;
 	overflow: auto;
@@ -144,8 +144,8 @@ html {
 	}
 }
 
-.edit-post-editor-regions__publish {
-	z-index: z-index(".edit-post-editor-regions__publish");
+.block-editor-editor-skeleton__publish {
+	z-index: z-index(".block-editor-editor-skeleton__publish");
 	position: fixed !important; // Need to override the default relative positionning
 	top: -9999em;
 	bottom: auto;

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -21,6 +21,7 @@ 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
@@ -19,6 +19,7 @@
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";
+@import "./components/editor-skeleton/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/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.$( '.edit-post-editor-regions__content' )
+			await page.$( '.block-editor-editor-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
@@ -152,7 +152,7 @@ describe( 'Order of block keyboard navigation', () => {
 		await page.evaluate( () => {
 			document.querySelector( '.edit-post-visual-editor' ).focus();
 			document
-				.querySelector( '.edit-post-editor-regions__sidebar' )
+				.querySelector( '.block-editor-editor-skeleton__sidebar' )
 				.focus();
 		} );
 

diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -17,6 +17,7 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockBreadcrumb,
+	__experimentalEditorSkeleton as EditorSkeleton,
 	__experimentalPageTemplatePicker,
 	__experimentalUsePageTemplatePickerVisible,
 } from '@wordpress/block-editor';
@@ -39,7 +40,6 @@ import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
 import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
 import ManageBlocksModal from '../manage-blocks-modal';
 import OptionsModal from '../options-modal';
-import EditorRegions from '../editor-regions';
 import FullscreenMode from '../fullscreen-mode';
 import BrowserURL from '../browser-url';
 import Header from '../header';
@@ -124,7 +124,7 @@ function Layout() {
 			<EditPostKeyboardShortcuts />
 			<EditorKeyboardShortcutsRegister />
 			<FocusReturnProvider>
-				<EditorRegions
+				<EditorSkeleton
 					className={ className }
 					header={ <Header /> }
 					sidebar={

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 `edit-post-editor-regions__body` to enable a fixed top toolbar.
+	// Specifically, we scroll `block-editor-editor-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(
-				'edit-post-editor-regions__body'
+				'block-editor-editor-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-post/src/style.scss b/packages/edit-post/src/style.scss
@@ -1,6 +1,5 @@
 $footer-height: $icon-button-size-small;
 
-@import "./components/editor-regions/style.scss";
 @import "./components/fullscreen-mode/style.scss";
 @import "./components/header/style.scss";
 @import "./components/header/fullscreen-mode-close/style.scss";