Skip to content

Global Styles: Allow access in the post editor #72681

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
youknowriad merged 3 commits into from
Oct 27, 2025
Merged

Global Styles: Allow access in the post editor #72681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
22aebfc
Global Styles: Allow access in the post editor
youknowriad Oct 24, 2025
cb07128
Fix lock file
youknowriad Oct 27, 2025
f8db0ce
Fix e2e tests
youknowriad Oct 27, 2025
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: 0 additions & 1 deletion docs/private-apis.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,6 @@ Private exports:
- `BackButton`
- `EntitiesSavedStatesExtensible`
- `Editor`
- `EditorContentSlotFill`
- `PluginPostExcerpt`
- `PostCardPanel`
- `PreferencesModal`
Expand Down
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.

5 changes: 5 additions & 0 deletions packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ function ( $settings ) {
'css' => 'p { border: 1px solid red }',
'__unstableType' => 'plugin',
);
$settings['styles'][] = array(
'css' => 'p { border-width: 2px; }',
'__unstableType' => 'theme',
);

return $settings;
}
);
32 changes: 18 additions & 14 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 @@ -84,12 +84,11 @@ const DESIGN_POST_TYPES = [
'wp_registered_template',
];

function useEditorStyles( ...additionalStyles ) {
const { hasThemeStyleSupport, editorSettings } = useSelect( ( select ) => {
function useEditorStyles( settings, ...additionalStyles ) {
const { hasThemeStyleSupport } = useSelect( ( select ) => {
return {
hasThemeStyleSupport:
select( editPostStore ).isFeatureActive( 'themeStyles' ),
editorSettings: select( editorStore ).getEditorSettings(),
};
}, [] );

Expand All @@ -98,24 +97,24 @@ function useEditorStyles( ...additionalStyles ) {
// Compute the default styles.
return useMemo( () => {
const presetStyles =
editorSettings.styles?.filter(
settings.styles?.filter(
( style ) =>
style.__unstableType && style.__unstableType !== 'theme'
) ?? [];

const defaultEditorStyles = [
...( editorSettings?.defaultEditorStyles ?? [] ),
...( settings?.defaultEditorStyles ?? [] ),
...presetStyles,
];

// Has theme styles if the theme supports them and if some styles were not preset styles (in which case they're theme styles).
const hasThemeStyles =
hasThemeStyleSupport &&
presetStyles.length !== ( editorSettings.styles?.length ?? 0 );
presetStyles.length !== ( settings.styles?.length ?? 0 );

// If theme styles are not present or displayed, ensure that
// base layout styles are still present in the editor.
if ( ! editorSettings.disableLayoutStyles && ! hasThemeStyles ) {
if ( ! settings.disableLayoutStyles && ! hasThemeStyles ) {
defaultEditorStyles.push( {
css: getLayoutStyles( {
style: {},
Expand All @@ -128,7 +127,7 @@ function useEditorStyles( ...additionalStyles ) {
}

const baseStyles = hasThemeStyles
? editorSettings.styles ?? []
? settings.styles ?? []
: defaultEditorStyles;

if ( addedStyles ) {
Expand All @@ -137,9 +136,9 @@ function useEditorStyles( ...additionalStyles ) {

return baseStyles;
}, [
editorSettings.defaultEditorStyles,
editorSettings.disableLayoutStyles,
editorSettings.styles,
settings.defaultEditorStyles,
settings.disableLayoutStyles,
settings.styles,
hasThemeStyleSupport,
addedStyles,
] );
Expand Down Expand Up @@ -525,16 +524,22 @@ function Layout( {
? 'block-selection-edit'
: 'entity-edit';
useCommandContext( commandContext );
const styles = useEditorStyles( settings, paddingStyle );
const editorSettings = useMemo(
() => ( {
...settings,
styles,
onNavigateToEntityRecord,
onNavigateToPreviousEntityRecord,
defaultRenderingMode: 'post-only',
} ),
[ settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord ]
[
settings,
styles,
onNavigateToEntityRecord,
onNavigateToPreviousEntityRecord,
]
);
const styles = useEditorStyles( paddingStyle );

// We need to add the show-icon-labels class to the body element so it is applied to modals.
if ( showIconLabels ) {
Expand Down Expand Up @@ -641,7 +646,6 @@ function Layout( {
postId={ currentPostId }
templateId={ templateId }
className={ className }
styles={ styles }
forceIsDirty={ hasActiveMetaboxes }
contentRef={ paddingAppenderRef }
disableIframe={ ! shouldIframe }
Expand Down
23 changes: 21 additions & 2 deletions packages/edit-site/src/components/block-editor/use-site-editor-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useSelect } from '@wordpress/data';
import { useMemo } from '@wordpress/element';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { usePrevious } from '@wordpress/compose';
import { store as editorStore } from '@wordpress/editor';

/**
* Internal dependencies
Expand Down Expand Up @@ -40,10 +41,13 @@ export function useSpecificEditorSettings() {
const { query } = useLocation();
const { canvas = 'view' } = query;
const onNavigateToEntityRecord = useNavigateToEntityRecord();
const { settings } = useSelect( ( select ) => {
const { settings, currentPostIsTrashed } = useSelect( ( select ) => {
const { getSettings } = select( editSiteStore );
const { getCurrentPostAttribute } = select( editorStore );
return {
settings: getSettings(),
currentPostIsTrashed:
getCurrentPostAttribute( 'status' ) === 'trash',
};
}, [] );

Expand All @@ -52,7 +56,21 @@ export function useSpecificEditorSettings() {
const defaultEditorSettings = useMemo( () => {
return {
...settings,

styles: [
...settings.styles,
{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
css:
canvas === 'view'
? `body{min-height: 100vh; ${
currentPostIsTrashed
? ''
: 'cursor: pointer;'
}}`
: undefined,
},
],
richEditingEnabled: true,
supportsTemplateMode: true,
focusMode: canvas !== 'view',
Expand All @@ -63,6 +81,7 @@ export function useSpecificEditorSettings() {
}, [
settings,
canvas,
currentPostIsTrashed,
onNavigateToEntityRecord,
onNavigateToPreviousEntityRecord,
] );
Expand Down
3 changes: 2 additions & 1 deletion packages/edit-site/src/components/canvas-loader/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import {
} from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { privateApis as editorPrivateApis } from '@wordpress/editor';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { useStyle } from '../global-styles/hooks';

const { Theme } = unlock( componentsPrivateApis );
const { useStyle } = unlock( editorPrivateApis );

export default function CanvasLoader( { id } ) {
const textColor = useStyle( 'color.text' );
Expand Down
55 changes: 2 additions & 53 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 @@ -12,12 +12,11 @@ import { useInstanceId, useReducedMotion } from '@wordpress/compose';
import {
EditorKeyboardShortcutsRegister,
privateApis as editorPrivateApis,
store as editorStore,
} from '@wordpress/editor';
import { __, sprintf } from '@wordpress/i18n';
import { store as coreDataStore } from '@wordpress/core-data';
import { privateApis as blockLibraryPrivateApis } from '@wordpress/block-library';
import { useCallback, useMemo } from '@wordpress/element';
import { useCallback } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { decodeEntities } from '@wordpress/html-entities';
Expand All @@ -29,18 +28,11 @@ import { addQueryArgs } from '@wordpress/url';
* Internal dependencies
*/
import WelcomeGuide from '../welcome-guide';
import { store as editSiteStore } from '../../store';
import { GlobalStylesRenderer } from '../global-styles-renderer';
import CanvasLoader from '../canvas-loader';
import { unlock } from '../../lock-unlock';
import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
import PluginTemplateSettingPanel from '../plugin-template-setting-panel';
import GlobalStylesSidebar from '../global-styles-sidebar';
import { isPreviewingTheme } from '../../utils/is-previewing-theme';
import StylesCanvas, {
getEditorCanvasContainerTitle,
useHasEditorCanvasContainer,
} from '../styles-canvas';
import SaveButton from '../save-button';
import SavePanel from '../save-panel';
import SiteEditorMoreMenu from '../more-menu';
Expand All @@ -49,7 +41,6 @@ import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
import useEditorTitle from './use-editor-title';
import { useIsSiteEditorLoading } from '../layout/hooks';
import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
import { TEMPLATE_POST_TYPE } from '../../utils/constants';
import {
useResolveEditedEntity,
useSyncDeprecatedEntityIntoState,
Expand Down Expand Up @@ -132,26 +123,12 @@ export default function EditSiteEditor( {
// deprecated sync state with url
useSyncDeprecatedEntityIntoState( entity );
const { postType, postId, context } = entity;
const {
isBlockBasedTheme,
stylesPath,
showStylebook,
currentPostIsTrashed,
hasSiteIcon,
} = useSelect( ( select ) => {
const { getStylesPath, getShowStylebook } = unlock(
select( editSiteStore )
);
const { isBlockBasedTheme, hasSiteIcon } = useSelect( ( select ) => {
const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
const siteData = getEntityRecord( 'root', '__unstableBase', undefined );

return {
isBlockBasedTheme: getCurrentTheme()?.is_block_theme,
stylesPath: getStylesPath(),
showStylebook: getShowStylebook(),
currentPostIsTrashed:
select( editorStore ).getCurrentPostAttribute( 'status' ) ===
'trash',
hasSiteIcon: !! siteData?.site_icon_url,
};
}, [] );
Expand All @@ -161,7 +138,6 @@ export default function EditSiteEditor( {
postWithTemplate ? context.postId : postId
);
const _isPreviewingTheme = isPreviewingTheme();
const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
const iframeProps = useEditorIframeProps();
const isEditMode = canvas === 'edit';
const loadingProgressId = useInstanceId(
Expand All @@ -170,22 +146,6 @@ export default function EditSiteEditor( {
);

const settings = useSpecificEditorSettings();
const styles = useMemo(
() => [
...settings.styles,
{
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
css:
canvas === 'view'
? `body{min-height: 100vh; ${
currentPostIsTrashed ? '' : 'cursor: pointer;'
}}`
: undefined,
},
],
[ settings.styles, canvas, currentPostIsTrashed ]
);
const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
const { createSuccessNotice } = useDispatch( noticesStore );
const history = useHistory();
Expand Down Expand Up @@ -243,9 +203,6 @@ export default function EditSiteEditor( {
]
);

// Replace the title and icon displayed in the DocumentBar when there's an overlay visible.
const title = getEditorCanvasContainerTitle( stylesPath, showStylebook );

const isReady = ! isLoading;
const transition = {
duration: disableMotion ? 0 : 0.2,
Expand All @@ -255,10 +212,6 @@ export default function EditSiteEditor( {
<SitePreview />
) : (
<>
<GlobalStylesRenderer
disableRootPadding={ postType !== TEMPLATE_POST_TYPE }
/>
<StylesCanvas />
<EditorKeyboardShortcutsRegister />
{ isEditMode && <BlockKeyboardShortcuts /> }
{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
Expand All @@ -274,13 +227,10 @@ export default function EditSiteEditor( {
templateId={ postWithTemplate ? postId : undefined }
settings={ settings }
className="edit-site-editor__editor-interface"
styles={ styles }
customSaveButton={
_isPreviewingTheme && <SaveButton size="compact" />
}
customSavePanel={ _isPreviewingTheme && <SavePanel /> }
forceDisableBlockTools={ ! hasDefaultEditorCanvasView }
title={ title }
iframeProps={ iframeProps }
onActionPerformed={ onActionPerformed }
extraSidebarPanels={
Expand Down Expand Up @@ -359,7 +309,6 @@ export default function EditSiteEditor( {
</BackButton>
) }
<SiteEditorMoreMenu />
{ isBlockBasedTheme && <GlobalStylesSidebar /> }
</Editor>
) }
</>
Expand Down
Loading
Loading