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.

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

Duotone: Use GlobalStylesProvider to generate styles in the Post Editor #49263

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions packages/edit-post/src/components/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const interfaceLabels = {
footer: __( 'Editor footer' ),
};

function Layout( { styles } ) {
function Layout() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
const isLargeViewport = useViewportMatch( 'large' );
Expand Down Expand Up @@ -248,7 +248,7 @@ function Layout( { styles } ) {
<TextEditor />
) }
{ isRichEditingEnabled && mode === 'visual' && (
<VisualEditor styles={ styles } />
<VisualEditor />
) }
{ ! isDistractionFree && ! isTemplateMode && (
<div className="edit-post-layout__metaboxes">
Expand Down
8 changes: 7 additions & 1 deletion packages/edit-post/src/components/visual-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ import {
__experimentalRecursionProvider as RecursionProvider,
__experimentaluseLayoutClasses as useLayoutClasses,
__experimentaluseLayoutStyles as useLayoutStyles,
privateApis as blockEditorPrivateApis
} from '@wordpress/block-editor';
import { useEffect, useRef, useMemo } from '@wordpress/element';
import { Button, __unstableMotion as motion } from '@wordpress/components';
Expand All @@ -43,6 +44,9 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import { store as editPostStore } from '../../store';
import { unlock } from '../../private-apis';

const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );

const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;

Expand Down Expand Up @@ -104,7 +108,8 @@ function getPostContentAttributes( blocks ) {
}
}

export default function VisualEditor( { styles } ) {
export default function VisualEditor( ) {
let [ styles, settings, svgFilters ] = useGlobalStylesOutput();
const {
deviceType,
isWelcomeGuideVisible,
Expand Down Expand Up @@ -365,6 +370,7 @@ export default function VisualEditor( { styles } ) {
contentRef={ contentRef }
styles={ styles }
>
{ svgFilters }
{ themeSupportsLayout &&
! themeHasDisabledLayoutStyles &&
! isTemplateMode && (
Expand Down
31 changes: 17 additions & 14 deletions packages/edit-post/src/editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { SlotFillProvider } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
import { store as preferencesStore } from '@wordpress/preferences';
import { GlobalStylesProvider } from '@wordpress/edit-site';

/**
* Internal dependencies
Expand Down Expand Up @@ -176,20 +177,22 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
return (
<ShortcutProvider>
<SlotFillProvider>
<ExperimentalEditorProvider
settings={ editorSettings }
post={ post }
initialEdits={ initialEdits }
useSubRegistry={ false }
__unstableTemplate={ isTemplateMode ? template : undefined }
{ ...props }
>
<ErrorBoundary>
<EditorInitialization postId={ postId } />
<Layout styles={ styles } />
</ErrorBoundary>
<PostLockedModal />
</ExperimentalEditorProvider>
<GlobalStylesProvider>
<ExperimentalEditorProvider
settings={ editorSettings }
post={ post }
initialEdits={ initialEdits }
useSubRegistry={ false }
__unstableTemplate={ isTemplateMode ? template : undefined }
{ ...props }
>
<ErrorBoundary>
<EditorInitialization postId={ postId } />
<Layout />
</ErrorBoundary>
<PostLockedModal />
</ExperimentalEditorProvider>
</GlobalStylesProvider>
</SlotFillProvider>
</ShortcutProvider>
);
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,4 @@ export function reinitializeEditor() {
export { default as PluginSidebar } from './components/sidebar-edit-mode/plugin-sidebar';
export { default as PluginSidebarMoreMenuItem } from './components/header-edit-mode/plugin-sidebar-more-menu-item';
export { default as PluginMoreMenuItem } from './components/header-edit-mode/plugin-more-menu-item';
export { GlobalStylesProvider } from './components/global-styles/global-styles-provider';