Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

EditorRegions: Move to block-editor package, rename to __experimentalEditorSkeleton #20050

Merged
merged 12 commits into from
Feb 7, 2020
Merged

EditorRegions: Move to block-editor package, rename to __experimentalEditorSkeleton #20050

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bd547d4
EditorRegions: Move to editor package
ockham Feb 5, 2020
3410c14
Move style import
ockham Feb 5, 2020
ee0ec08
Update EditorRegions import
ockham Feb 5, 2020
384aec4
Export EditorRegions from editor package
ockham Feb 5, 2020
eeac542
s/edit-post-editor-regions/components-editor-regions/g
ockham Feb 5, 2020
d3bbbed
Add new class names to EditorRegions component
ockham Feb 5, 2020
b40d6ce
Move to block-editor
ockham Feb 6, 2020
90a0657
Fix exports/imports
ockham Feb 6, 2020
827b450
s/components-editor-regions/block-editor-editor-regions/g
ockham Feb 6, 2020
953c8b0
Change classnames to block-editor-editor-skeleton*
ockham Feb 6, 2020
810cf80
Rename to EditorSkeleton
ockham Feb 6, 2020
5df7314
Prefix as __experimental
ockham Feb 6, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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,
Expand All @@ -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,

Expand Down Expand Up @@ -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,
Expand Down
24 changes: 15 additions & 9 deletions ...st/src/components/editor-regions/index.js → ...r/src/components/editor-skeleton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import classnames from 'classnames';
import { navigateRegions } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function EditorRegions( {
function EditorSkeleton( {
footer,
header,
sidebar,
Expand All @@ -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'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can drop this className tbh. Did you leave it for BC? This seems to be ready to land before beta1 so there shouldn't be any problem to remove the classname.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I left it in for backwards compat. I know of at least one instance in Calypso where we're referring to this class name, and since we were having quite some trouble with class name changes in the past (specifically with the .editor- -> .block-editor- change, see Automattic/wp-calypso#38857, #14420, and #19050), I wanted at least to give a grace period before dropping the old class name.

(Then again, a point can be made that this was never part of a public interface, and that that grace period didn't help in updating the affected Calypso selectors in time before they were dropped in the past either, so 🤷‍♂️ )

) }
>
{ !! 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' ) }
Expand All @@ -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' ) }
Expand All @@ -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' ) }
Expand All @@ -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' ) }
Expand All @@ -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' ) }
Expand All @@ -78,4 +84,4 @@ function EditorRegions( {
);
}

export default navigateRegions( EditorRegions );
export default navigateRegions( EditorSkeleton );
28 changes: 14 additions & 14 deletions .../src/components/editor-regions/style.scss → ...src/components/editor-skeleton/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ html {
}
}

.edit-post-editor-regions {
.block-editor-editor-skeleton {
display: flex;
flex-direction: column;
height: auto;
Expand All @@ -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;

Expand All @@ -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
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/various/adding-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' );
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
} );

Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
import { useSelect, useDispatch } from '@wordpress/data';
import {
BlockBreadcrumb,
__experimentalEditorSkeleton as EditorSkeleton,
__experimentalPageTemplatePicker,
__experimentalUsePageTemplatePickerVisible,
} from '@wordpress/block-editor';
Expand All @@ -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';
Expand Down Expand Up @@ -124,7 +124,7 @@ function Layout() {
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<FocusReturnProvider>
<EditorRegions
<EditorSkeleton
className={ className }
header={ <Header /> }
sidebar={
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-post/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 0 additions & 1 deletion packages/edit-post/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down