Skip to content

Interface: move EditorSkeleton to interface package #21335

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

Merged
vindl merged 2 commits into from
Apr 3, 2020
Merged

Interface: move EditorSkeleton to interface package #21335

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9f64def
Interface: move EditorSkeleton to interface package
vindl Apr 1, 2020
68c5e26
Remove custom site editor labels
vindl Apr 3, 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
1 change: 1 addition & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

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,
".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
Expand Down Expand Up @@ -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,
Expand All @@ -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,

Expand Down Expand Up @@ -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,
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

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.$( '.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' );
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 @@ -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();
} );

Expand Down
15 changes: 8 additions & 7 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 @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -121,7 +122,7 @@ function Layout() {
<EditPostKeyboardShortcuts />
<EditorKeyboardShortcutsRegister />
<FocusReturnProvider>
<EditorSkeleton
<InterfaceSkeleton
className={ className }
header={ <Header /> }
sidebar={
Expand Down Expand Up @@ -175,7 +176,7 @@ function Layout() {
</div>
)
}
publish={
actions={
publishSidebarOpened ? (
<PostPublishPanel
onClose={ closePublishSidebar }
Expand Down
12 changes: 6 additions & 6 deletions packages/edit-post/src/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
}
}

.block-editor-editor-skeleton__sidebar > div {
.interface-interface-skeleton__sidebar > div {
height: 100%;
}

Expand All @@ -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;
}
Expand All @@ -106,7 +106,7 @@
}
}

.edit-post-layout .block-editor-editor-skeleton__content {
.edit-post-layout .interface-interface-skeleton__content {
background-color: $light-gray-700;
}

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 `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
Expand Down
5 changes: 2 additions & 3 deletions packages/edit-site/src/components/editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -75,7 +74,7 @@ function Editor( { settings: _settings } ) {
>
<Context.Provider value={ context }>
<FocusReturnProvider>
<EditorSkeleton
<InterfaceSkeleton
sidebar={ ! isMobile && <Sidebar /> }
header={ <Header /> }
content={
Expand Down
1 change: 1 addition & 0 deletions packages/edit-widgets/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
8 changes: 3 additions & 5 deletions packages/edit-widgets/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -32,7 +30,7 @@ function Layout( { blockEditorSettings } ) {
<SlotFillProvider>
<DropZoneProvider>
<FocusReturnProvider>
<EditorSkeleton
<InterfaceSkeleton
header={ <Header /> }
sidebar={ ! isMobile && <Sidebar /> }
content={
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-widgets/src/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ body.gutenberg_page_gutenberg-widgets {
}


.block-editor-editor-skeleton__content {
.interface-interface-skeleton__content {
background-color: #f1f1f1;
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/interface/src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
48 changes: 30 additions & 18 deletions ...r/src/components/editor-skeleton/index.js → ...rc/components/interface-skeleton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
};
Copy link
Contributor

@youknowriad youknowriad Apr 3, 2020

Choose a reason for hiding this comment

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

Do you think we should drop the "Editor" from the default labels?

Copy link
Contributor

@youknowriad youknowriad Apr 3, 2020

Choose a reason for hiding this comment

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

I also feel it works better for most UIs without "Editor" (like widgets)

Copy link
Member Author

@vindl vindl Apr 3, 2020

Choose a reason for hiding this comment

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

Yes, that sounds fine to me. 👍

Copy link
Member Author

@vindl vindl Apr 3, 2020

Choose a reason for hiding this comment

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

Updated in 2e1d036ae02a7f5eceed238059815bb05e750284.

Copy link
Contributor

@youknowriad youknowriad Apr 3, 2020

Choose a reason for hiding this comment

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

So this changes the labels for the widgets and more importantly the "Post editor". For me it's still good names and I like the fact that they are the same across pages. Let's keep them consistent for now and if we have feedback suggesting to go specific for some of these screens, we'll adapt.

Copy link
Contributor

@afercia afercia Apr 19, 2020

Choose a reason for hiding this comment

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

Do you think we should drop the "Editor" from the default labels?

When used to label the ARIA landmark regions in the context of the WP admin, these labels need to differentiate the Editor landmarks from the other landmarks in the WP UI. This is the reason why they used the word "Editor" at the beginning. For some history, see #7940, #7938, and #2380

Also, the ARIA landmarks labels need to describe the purpose of the content within the region. Labels like "Header", "Footer", and "Left Sidebar" (added in #20951) are arguably og any usefulness for assistive technology users.

If these labels are going to be used also for other purposes, then we'll need to provide specific labels for the ARIA landmarks.

Worth also noting the ARIA regions labels usage is still documented in the regions Readme:

For better accessibility, these elements must be properly labelled to briefly describe the purpose of the content in the region. For more details, see "ARIA landmarks" in the WAI-ARIA specification.

Will create a new issue.


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 }
Expand All @@ -99,4 +111,4 @@ function EditorSkeleton( {
);
}

export default navigateRegions( EditorSkeleton );
export default navigateRegions( InterfaceSkeleton );
Loading