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 6 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,
".components-editor-regions__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,
".components-editor-regions__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,
".components-editor-regions__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,
".components-editor-regions__publish": 100000,

// Show NUX tips above popovers, wp-admin menus, submenus, and sidebar:
".nux-dot-tip": 1000001,
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.$( '.components-editor-regions__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( '.components-editor-regions__sidebar' )
.focus();
} );

Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -13,6 +13,7 @@ import {
EditorNotices,
PostPublishPanel,
EditorKeyboardShortcutsRegister,
EditorRegions,
} from '@wordpress/editor';
import { useSelect, useDispatch } from '@wordpress/data';
import {
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
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 `components-editor-regions__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'
'components-editor-regions__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
20 changes: 13 additions & 7 deletions ...st/src/components/editor-regions/index.js → ...or/src/components/editor-regions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,16 @@ function EditorRegions( {
className,
ockham marked this conversation as resolved.
Show resolved Hide resolved
} ) {
return (
<div className={ classnames( className, 'edit-post-editor-regions' ) }>
<div
className={ classnames(
className,
'components-editor-regions',
ockham marked this conversation as resolved.
Show resolved Hide resolved
'edit-post-editor-regions'
) }
>
{ !! header && (
<div
className="edit-post-editor-regions__header"
className="components-editor-regions__header edit-post-editor-regions__header"
role="region"
/* translators: accessibility text for the top bar landmark region. */
aria-label={ __( 'Editor top bar' ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

I was wondering whether the aria-label are too opinionated and should be made customizable or not. Potentially, they couuld work for any "editor".

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, maybe 🤔 I'd go with YAGNI here -- don't make it customizable until needed?

Expand All @@ -30,9 +36,9 @@ function EditorRegions( {
{ header }
</div>
) }
<div className="edit-post-editor-regions__body">
<div className="components-editor-regions__body edit-post-editor-regions__body">
<div
className="edit-post-editor-regions__content"
className="components-editor-regions__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="components-editor-regions__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="components-editor-regions__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="components-editor-regions__footer edit-post-editor-regions__footer"
role="region"
/* translators: accessibility text for the footer landmark region. */
aria-label={ __( 'Editor footer' ) }
Expand Down
28 changes: 14 additions & 14 deletions .../src/components/editor-regions/style.scss → .../src/components/editor-regions/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 {
.components-editor-regions {
display: flex;
flex-direction: column;
height: auto;
Expand All @@ -33,9 +33,9 @@ html {
}
}

@include editor-left(".edit-post-editor-regions");
@include editor-left(".components-editor-regions");

.edit-post-editor-regions__body {
.components-editor-regions__body {
flex-grow: 1;
display: flex;

Expand All @@ -57,7 +57,7 @@ html {
overscroll-behavior-y: none;
}

.edit-post-editor-regions__content {
.components-editor-regions__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 {
.components-editor-regions__sidebar {
display: none;

@include break-medium() {
display: block;
z-index: z-index(".edit-post-editor-regions__sidebar");
z-index: z-index(".components-editor-regions__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 .components-editor-regions__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(".components-editor-regions__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(".components-editor-regions__sidebar {greater than small}");
}
}

.edit-post-editor-regions__header {
.components-editor-regions__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(".components-editor-regions__header");

// On Mobile the header is sticky.
position: sticky;
Expand All @@ -131,7 +131,7 @@ html {
}
}

.edit-post-editor-regions__footer {
.components-editor-regions__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");
.components-editor-regions__publish {
z-index: z-index(".components-editor-regions__publish");
position: fixed !important; // Need to override the default relative positionning
top: -9999em;
bottom: auto;
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export { default as EditorKeyboardShortcutsRegister } from './global-keyboard-sh
export { default as EditorHistoryRedo } from './editor-history/redo';
export { default as EditorHistoryUndo } from './editor-history/undo';
export { default as EditorNotices } from './editor-notices';
export { default as EditorRegions } from './editor-regions';
export { default as EntitiesSavedStates } from './entities-saved-states';
export { default as ErrorBoundary } from './error-boundary';
export { default as LocalAutosaveMonitor } from './local-autosave-monitor';
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import "./components/autocompleters/style.scss";
@import "./components/document-outline/style.scss";
@import "./components/editor-notices/style.scss";
@import "./components/editor-regions/style.scss";
@import "./components/entities-saved-states/style.scss";
@import "./components/error-boundary/style.scss";
@import "./components/page-attributes/style.scss";
Expand Down