Skip to content

Commit de7c442

Browse files
ockhamockham
authored
EditorRegions: Move to block-editor package, rename to __experimentalEditorSkeleton (#20050)
1 parent 31e7219 commit de7c442

File tree

10 files changed

+41
-34
lines changed

10 files changed

+41
-34
lines changed

‎packages/base-styles/_z-index.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $z-layers: (
2424
".block-library-gallery-item__inline-menu": 20,
2525
".block-editor-url-input__suggestions": 30,
2626
".edit-post-layout__footer": 30,
27-
".edit-post-editor-regions__header": 30,
27+
".block-editor-editor-skeleton__header": 30,
2828
".edit-site-header": 62,
2929
".edit-widgets-header": 30,
3030
".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: (
6464

6565
// Show sidebar above wp-admin navigation bar for mobile viewports:
6666
// #wpadminbar { z-index: 99999 }
67-
".edit-post-editor-regions__sidebar": 100000,
67+
".block-editor-editor-skeleton__sidebar": 100000,
6868
".edit-site-sidebar": 100000,
6969
".edit-widgets-sidebar": 100000,
7070
".edit-post-layout .edit-post-post-publish-panel": 100001,
@@ -74,7 +74,7 @@ $z-layers: (
7474

7575
// Show sidebar in greater than small viewports above editor related elements
7676
// but bellow #adminmenuback { z-index: 100 }
77-
".edit-post-editor-regions__sidebar {greater than small}": 90,
77+
".block-editor-editor-skeleton__sidebar {greater than small}": 90,
7878
".edit-site-sidebar {greater than small}": 90,
7979
".edit-widgets-sidebar {greater than small}": 90,
8080

@@ -108,7 +108,7 @@ $z-layers: (
108108
".components-autocomplete__results": 1000000,
109109

110110
".skip-to-selected-block": 100000,
111-
".edit-post-editor-regions__publish": 100000,
111+
".block-editor-editor-skeleton__publish": 100000,
112112

113113
// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
114114
".nux-dot-tip": 1000001,

‎packages/edit-post/src/components/editor-regions/index.js ‎packages/block-editor/src/components/editor-skeleton/index.js

+15-9
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import classnames from 'classnames';
99
import { navigateRegions } from '@wordpress/components';
1010
import { __ } from '@wordpress/i18n';
1111

12-
function EditorRegions( {
12+
function EditorSkeleton( {
1313
footer,
1414
header,
1515
sidebar,
@@ -18,10 +18,16 @@ function EditorRegions( {
1818
className,
1919
} ) {
2020
return (
21-
<div className={ classnames( className, 'edit-post-editor-regions' ) }>
21+
<div
22+
className={ classnames(
23+
className,
24+
'block-editor-editor-skeleton',
25+
'edit-post-editor-regions'
26+
) }
27+
>
2228
{ !! header && (
2329
<div
24-
className="edit-post-editor-regions__header"
30+
className="block-editor-editor-skeleton__header edit-post-editor-regions__header"
2531
role="region"
2632
/* translators: accessibility text for the top bar landmark region. */
2733
aria-label={ __( 'Editor top bar' ) }
@@ -30,9 +36,9 @@ function EditorRegions( {
3036
{ header }
3137
</div>
3238
) }
33-
<div className="edit-post-editor-regions__body">
39+
<div className="block-editor-editor-skeleton__body edit-post-editor-regions__body">
3440
<div
35-
className="edit-post-editor-regions__content"
41+
className="block-editor-editor-skeleton__content edit-post-editor-regions__content"
3642
role="region"
3743
/* translators: accessibility text for the content landmark region. */
3844
aria-label={ __( 'Editor content' ) }
@@ -42,7 +48,7 @@ function EditorRegions( {
4248
</div>
4349
{ !! sidebar && (
4450
<div
45-
className="edit-post-editor-regions__sidebar"
51+
className="block-editor-editor-skeleton__sidebar edit-post-editor-regions__sidebar"
4652
role="region"
4753
/* translators: accessibility text for the settings landmark region. */
4854
aria-label={ __( 'Editor settings' ) }
@@ -53,7 +59,7 @@ function EditorRegions( {
5359
) }
5460
{ !! publish && (
5561
<div
56-
className="edit-post-editor-regions__publish"
62+
className="block-editor-editor-skeleton__publish edit-post-editor-regions__publish"
5763
role="region"
5864
/* translators: accessibility text for the publish landmark region. */
5965
aria-label={ __( 'Editor publish' ) }
@@ -65,7 +71,7 @@ function EditorRegions( {
6571
</div>
6672
{ !! footer && (
6773
<div
68-
className="edit-post-editor-regions__footer"
74+
className="block-editor-editor-skeleton__footer edit-post-editor-regions__footer"
6975
role="region"
7076
/* translators: accessibility text for the footer landmark region. */
7177
aria-label={ __( 'Editor footer' ) }
@@ -78,4 +84,4 @@ function EditorRegions( {
7884
);
7985
}
8086

81-
export default navigateRegions( EditorRegions );
87+
export default navigateRegions( EditorSkeleton );

‎packages/edit-post/src/components/editor-regions/style.scss ‎packages/block-editor/src/components/editor-skeleton/style.scss

+14-14
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ html {
1010
}
1111
}
1212

13-
.edit-post-editor-regions {
13+
.block-editor-editor-skeleton {
1414
display: flex;
1515
flex-direction: column;
1616
height: auto;
@@ -33,9 +33,9 @@ html {
3333
}
3434
}
3535

36-
@include editor-left(".edit-post-editor-regions");
36+
@include editor-left(".block-editor-editor-skeleton");
3737

38-
.edit-post-editor-regions__body {
38+
.block-editor-editor-skeleton__body {
3939
flex-grow: 1;
4040
display: flex;
4141

@@ -57,7 +57,7 @@ html {
5757
overscroll-behavior-y: none;
5858
}
5959

60-
.edit-post-editor-regions__content {
60+
.block-editor-editor-skeleton__content {
6161
flex-grow: 1;
6262

6363
// Treat as flex container to allow children to grow to occupy full
@@ -73,12 +73,12 @@ html {
7373
}
7474
}
7575

76-
.edit-post-editor-regions__sidebar {
76+
.block-editor-editor-skeleton__sidebar {
7777
display: none;
7878

7979
@include break-medium() {
8080
display: block;
81-
z-index: z-index(".edit-post-editor-regions__sidebar");
81+
z-index: z-index(".block-editor-editor-skeleton__sidebar");
8282
position: fixed !important; // Need to override the default relative positionning
8383
top: -9999em;
8484
bottom: auto;
@@ -93,12 +93,12 @@ html {
9393
}
9494
}
9595

96-
.is-sidebar-opened .edit-post-editor-regions__sidebar {
96+
.is-sidebar-opened .block-editor-editor-skeleton__sidebar {
9797
display: block;
9898
width: auto; // Keep the sidebar width flexible.
9999
flex-shrink: 0;
100100
position: absolute;
101-
z-index: z-index(".edit-post-editor-regions__sidebar");
101+
z-index: z-index(".block-editor-editor-skeleton__sidebar");
102102
top: 0;
103103
right: 0;
104104
bottom: 0;
@@ -110,15 +110,15 @@ html {
110110
overflow: auto;
111111
border-left: $border-width solid $light-gray-500;
112112
position: relative !important;
113-
z-index: z-index(".edit-post-editor-regions__sidebar {greater than small}");
113+
z-index: z-index(".block-editor-editor-skeleton__sidebar {greater than small}");
114114
}
115115
}
116116

117-
.edit-post-editor-regions__header {
117+
.block-editor-editor-skeleton__header {
118118
flex-shrink: 0;
119119
height: auto; // Keep the height flexible.
120120
border-bottom: $border-width solid $light-gray-500;
121-
z-index: z-index(".edit-post-editor-regions__header");
121+
z-index: z-index(".block-editor-editor-skeleton__header");
122122

123123
// On Mobile the header is sticky.
124124
position: sticky;
@@ -131,7 +131,7 @@ html {
131131
}
132132
}
133133

134-
.edit-post-editor-regions__footer {
134+
.block-editor-editor-skeleton__footer {
135135
height: auto; // Keep the height flexible.
136136
flex-shrink: 0;
137137
overflow: auto;
@@ -144,8 +144,8 @@ html {
144144
}
145145
}
146146

147-
.edit-post-editor-regions__publish {
148-
z-index: z-index(".edit-post-editor-regions__publish");
147+
.block-editor-editor-skeleton__publish {
148+
z-index: z-index(".block-editor-editor-skeleton__publish");
149149
position: fixed !important; // Need to override the default relative positionning
150150
top: -9999em;
151151
bottom: auto;

‎packages/block-editor/src/components/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export { default as ButtonBlockerAppender } from './button-block-appender';
2121
export { default as ColorPalette } from './color-palette';
2222
export { default as ColorPaletteControl } from './color-palette/control';
2323
export { default as ContrastChecker } from './contrast-checker';
24+
export { default as __experimentalEditorSkeleton } from './editor-skeleton';
2425
export { default as __experimentalGradientPicker } from './gradient-picker';
2526
export { default as __experimentalGradientPickerControl } from './gradient-picker/control';
2627
export { default as __experimentalGradientPickerPanel } from './gradient-picker/panel';

‎packages/block-editor/src/style.scss

+1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
@import "./components/colors-gradients/style.scss";
2020
@import "./components/contrast-checker/style.scss";
2121
@import "./components/default-block-appender/style.scss";
22+
@import "./components/editor-skeleton/style.scss";
2223
@import "./components/link-control/style.scss";
2324
@import "./components/image-size-control/style.scss";
2425
@import "./components/inner-blocks/style.scss";

‎packages/e2e-tests/specs/editor/various/adding-blocks.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ describe( 'adding blocks', () => {
4242

4343
// Click below editor to focus last field (block appender)
4444
await clickAtBottom(
45-
await page.$( '.edit-post-editor-regions__content' )
45+
await page.$( '.block-editor-editor-skeleton__content' )
4646
);
4747
expect( await page.$( '[data-type="core/paragraph"]' ) ).not.toBeNull();
4848
await page.keyboard.type( 'Paragraph block' );

‎packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,7 @@ describe( 'Order of block keyboard navigation', () => {
152152
await page.evaluate( () => {
153153
document.querySelector( '.edit-post-visual-editor' ).focus();
154154
document
155-
.querySelector( '.edit-post-editor-regions__sidebar' )
155+
.querySelector( '.block-editor-editor-skeleton__sidebar' )
156156
.focus();
157157
} );
158158

‎packages/edit-post/src/components/layout/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
import { useSelect, useDispatch } from '@wordpress/data';
1818
import {
1919
BlockBreadcrumb,
20+
__experimentalEditorSkeleton as EditorSkeleton,
2021
__experimentalPageTemplatePicker,
2122
__experimentalUsePageTemplatePickerVisible,
2223
} from '@wordpress/block-editor';
@@ -39,7 +40,6 @@ import EditPostKeyboardShortcuts from '../keyboard-shortcuts';
3940
import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
4041
import ManageBlocksModal from '../manage-blocks-modal';
4142
import OptionsModal from '../options-modal';
42-
import EditorRegions from '../editor-regions';
4343
import FullscreenMode from '../fullscreen-mode';
4444
import BrowserURL from '../browser-url';
4545
import Header from '../header';
@@ -124,7 +124,7 @@ function Layout() {
124124
<EditPostKeyboardShortcuts />
125125
<EditorKeyboardShortcutsRegister />
126126
<FocusReturnProvider>
127-
<EditorRegions
127+
<EditorSkeleton
128128
className={ className }
129129
header={ <Header /> }
130130
sidebar={

‎packages/edit-post/src/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -113,14 +113,14 @@ export function initializeEditor(
113113
// Without this hack the browser scrolls the mobile toolbar off-screen.
114114
// Once supported in Safari we can replace this in favor of preventScroll.
115115
// For details see issue #18632 and PR #18686
116-
// Specifically, we scroll `edit-post-editor-regions__body` to enable a fixed top toolbar.
116+
// Specifically, we scroll `block-editor-editor-skeleton__body` to enable a fixed top toolbar.
117117
// But Mobile Safari forces the `html` element to scroll upwards, hiding the toolbar.
118118

119119
const isIphone = window.navigator.userAgent.indexOf( 'iPhone' ) !== -1;
120120
if ( isIphone ) {
121121
window.addEventListener( 'scroll', function( event ) {
122122
const editorScrollContainer = document.getElementsByClassName(
123-
'edit-post-editor-regions__body'
123+
'block-editor-editor-skeleton__body'
124124
)[ 0 ];
125125
if ( event.target === document ) {
126126
// Scroll element into view by scrolling the editor container by the same amount

‎packages/edit-post/src/style.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
$footer-height: $icon-button-size-small;
22

3-
@import "./components/editor-regions/style.scss";
43
@import "./components/fullscreen-mode/style.scss";
54
@import "./components/header/style.scss";
65
@import "./components/header/fullscreen-mode-close/style.scss";

0 commit comments

Comments
 (0)