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

Editor styles: convert to hook #27080

Merged
merged 4 commits into from
Nov 25, 2020
Merged

Editor styles: convert to hook #27080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae7572a
Editor styles: convert to hook
ellatrix Nov 18, 2020
6429ca8
Format
ellatrix Nov 18, 2020
c06b908
Fix import
ellatrix Nov 25, 2020
2d89f72
Add ref to dependency array
ellatrix Nov 25, 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
15 changes: 6 additions & 9 deletions packages/block-editor/src/components/editor-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,23 @@ import { useEffect } from '@wordpress/element';
*/
import transformStyles from '../../utils/transform-styles';

function EditorStyles( { styles } ) {
export default function useEditorStyles( ref, styles ) {
useEffect( () => {
const updatedStyles = transformStyles(
styles,
'.editor-styles-wrapper'
);

const { ownerDocument } = ref.current;
const nodes = map( compact( updatedStyles ), ( updatedCSS ) => {
const node = document.createElement( 'style' );
const node = ownerDocument.createElement( 'style' );
node.innerHTML = updatedCSS;
document.body.appendChild( node );
ownerDocument.body.appendChild( node );

return node;
} );

return () =>
nodes.forEach( ( node ) => document.body.removeChild( node ) );
}, [ styles ] );

return null;
nodes.forEach( ( node ) => ownerDocument.body.removeChild( node ) );
}, [ ref, styles ] );
}

export default EditorStyles;
2 changes: 1 addition & 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 @@ -97,7 +97,7 @@ export {
useClipboardHandler as __unstableUseClipboardHandler,
} from './copy-handler';
export { default as DefaultBlockAppender } from './default-block-appender';
export { default as __unstableEditorStyles } from './editor-styles';
export { default as __unstableUseEditorStyles } from './editor-styles';
export { default as Inserter } from './inserter';
export { default as __experimentalLibrary } from './inserter/library';
export { default as __experimentalSearchForm } from './inserter/search-form';
Expand Down
9 changes: 7 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 { useSelect, useDispatch } from '@wordpress/data';
import {
BlockBreadcrumb,
__experimentalLibrary as Library,
__unstableUseEditorStyles as useEditorStyles,
} from '@wordpress/block-editor';
import {
Button,
Expand All @@ -32,7 +33,7 @@ import {
FullscreenMode,
InterfaceSkeleton,
} from '@wordpress/interface';
import { useState, useEffect, useCallback } from '@wordpress/element';
import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
import { close } from '@wordpress/icons';

/**
Expand Down Expand Up @@ -66,7 +67,7 @@ const interfaceLabels = {
footer: __( 'Editor footer' ),
};

function Layout() {
function Layout( { settings } ) {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
const {
Expand Down Expand Up @@ -163,6 +164,9 @@ function Layout() {
},
[ entitiesSavedStatesCallback ]
);
const ref = useRef();

useEditorStyles( ref, settings.styles );
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like this broke the "use theme editor styles" option, it's now always using the theme styles.

Copy link
Contributor

Choose a reason for hiding this comment

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

(I have a fix coming)


return (
<>
Expand All @@ -176,6 +180,7 @@ function Layout() {
<SettingsSidebar />
<FocusReturnProvider>
<InterfaceSkeleton
ref={ ref }
className={ className }
labels={ interfaceLabels }
header={
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ class Editor extends Component {
>
<ErrorBoundary onError={ onError }>
<EditorInitialization postId={ postId } />
<Layout />
<Layout settings={ settings } />
<KeyboardShortcuts
shortcuts={ preventEventDiscovery }
/>
Expand Down
15 changes: 12 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
@@ -1,7 +1,13 @@
/**
* WordPress dependencies
*/
import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
import {
useEffect,
useState,
useMemo,
useCallback,
useRef,
} from '@wordpress/element';
import { useSelect, useDispatch } from '@wordpress/data';
import {
SlotFillProvider,
Expand All @@ -15,7 +21,7 @@ import {
BlockContextProvider,
BlockSelectionClearer,
BlockBreadcrumb,
__unstableEditorStyles as EditorStyles,
__unstableUseEditorStyles as useEditorStyles,
__experimentalUseResizeCanvas as useResizeCanvas,
__experimentalLibrary as Library,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -191,10 +197,12 @@ function Editor() {
}, [ isNavigationOpen ] );

const isMobile = useViewportMatch( 'medium', '<' );
const ref = useRef();

useEditorStyles( ref, settings.styles );

return (
<>
<EditorStyles styles={ settings.styles } />
<FullscreenMode isActive={ isFullscreenActive } />
<UnsavedChangesWarning />
<SlotFillProvider>
Expand Down Expand Up @@ -235,6 +243,7 @@ function Editor() {
<KeyboardShortcuts.Register />
<SidebarComplementaryAreaFills />
<InterfaceSkeleton
ref={ ref }
labels={ interfaceLabels }
drawer={
<NavigationSidebar />
Expand Down
11 changes: 9 additions & 2 deletions packages/edit-widgets/src/components/layout/interface.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,11 @@
import { Button } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { close } from '@wordpress/icons';
import { __experimentalLibrary as Library } from '@wordpress/block-editor';
import { useEffect } from '@wordpress/element';
import {
__experimentalLibrary as Library,
__unstableUseEditorStyles as useEditorStyles,
} from '@wordpress/block-editor';
import { useEffect, useRef } from '@wordpress/element';
import { useDispatch, useSelect } from '@wordpress/data';
import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
import { __ } from '@wordpress/i18n';
Expand Down Expand Up @@ -41,6 +44,9 @@ function Interface( { blockEditorSettings } ) {
).getActiveComplementaryArea( 'core/edit-widgets' ),
isInserterOpened: !! select( 'core/edit-widgets' ).isInserterOpened(),
} ) );
const ref = useRef();

useEditorStyles( ref, blockEditorSettings.styles );

// Inserter and Sidebars are mutually exclusive
useEffect( () => {
Expand All @@ -57,6 +63,7 @@ function Interface( { blockEditorSettings } ) {

return (
<InterfaceSkeleton
ref={ ref }
labels={ interfaceLabels }
header={ <Header /> }
secondarySidebar={
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { useMemo } from '@wordpress/element';
import {
BlockEditorProvider,
BlockEditorKeyboardShortcuts,
__unstableEditorStyles as EditorStyles,
} from '@wordpress/block-editor';
import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';

Expand Down Expand Up @@ -86,7 +85,6 @@ export default function WidgetAreasBlockEditorProvider( {

return (
<>
<EditorStyles styles={ settings.styles } />
<BlockEditorKeyboardShortcuts.Register />
<KeyboardShortcuts.Register />
<SlotFillProvider>
Expand Down
48 changes: 22 additions & 26 deletions packages/editor/src/components/provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import { EntityProvider } from '@wordpress/core-data';
import {
BlockEditorProvider,
BlockContextProvider,
__unstableEditorStyles as EditorStyles,
} from '@wordpress/block-editor';
import apiFetch from '@wordpress/api-fetch';
import { addQueryArgs } from '@wordpress/url';
Expand Down Expand Up @@ -269,32 +268,29 @@ class EditorProvider extends Component {
);

return (
<>
<EditorStyles styles={ settings.styles } />
<EntityProvider kind="root" type="site">
<EntityProvider
kind="postType"
type={ post.type }
id={ post.id }
>
<BlockContextProvider value={ defaultBlockContext }>
<BlockEditorProvider
value={ blocks }
onInput={ resetEditorBlocksWithoutUndoLevel }
onChange={ resetEditorBlocks }
selectionStart={ selectionStart }
selectionEnd={ selectionEnd }
settings={ editorSettings }
useSubRegistry={ false }
>
{ children }
<ReusableBlocksMenuItems />
<ConvertToGroupButtons />
</BlockEditorProvider>
</BlockContextProvider>
</EntityProvider>
<EntityProvider kind="root" type="site">
<EntityProvider
kind="postType"
type={ post.type }
id={ post.id }
>
<BlockContextProvider value={ defaultBlockContext }>
<BlockEditorProvider
value={ blocks }
onInput={ resetEditorBlocksWithoutUndoLevel }
onChange={ resetEditorBlocks }
selectionStart={ selectionStart }
selectionEnd={ selectionEnd }
settings={ editorSettings }
useSubRegistry={ false }
>
{ children }
<ReusableBlocksMenuItems />
<ConvertToGroupButtons />
</BlockEditorProvider>
</BlockContextProvider>
</EntityProvider>
</>
</EntityProvider>
);
}
}
Expand Down