Skip to content

Commit

Permalink
Allow styles to be changed dynamically through editor settings (#52767)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix authored Jul 21, 2023
1 parent 87ef1df commit db67a79
Show file tree
Hide file tree
Showing 4 changed files with 175 additions and 45 deletions.
19 changes: 19 additions & 0 deletions packages/e2e-tests/plugins/iframed-enqueue-block-editor-settings.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<?php
/**
* Plugin Name: Gutenberg Test Iframed enqueue block editor settings
* Plugin URI: https://github.com/WordPress/gutenberg
* Author: Gutenberg Team
*
* @package gutenberg-test-iframed-iframed-enqueue-block-editor-settings
*/

add_action(
'block_editor_settings_all',
function( $settings ) {
$settings['styles'][] = array(
'css' => 'p { border: 1px solid red }',
'__unstableType' => 'plugin',
);
return $settings;
}
);
108 changes: 108 additions & 0 deletions packages/e2e-tests/specs/editor/plugins/iframed-enqueue-block-editor-settings.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
/**
* WordPress dependencies
*/
import {
activatePlugin,
createNewPost,
deactivatePlugin,
canvas,
activateTheme,
} from '@wordpress/e2e-test-utils';

async function getComputedStyle( context, selector, property ) {
return await context.evaluate(
( sel, prop ) =>
window.getComputedStyle( document.querySelector( sel ) )[ prop ],
selector,
property
);
}

describe( 'iframed block editor settings styles', () => {
beforeEach( async () => {
// Activate the empty theme (block based theme), which is iframed.
await activateTheme( 'emptytheme' );
await activatePlugin(
'gutenberg-test-iframed-enqueue-block-editor-settings'
);
await createNewPost();
} );

afterEach( async () => {
await deactivatePlugin(
'gutenberg-test-iframed-enqueue-block-editor-settings'
);
await activateTheme( 'twentytwentyone' );
} );

it( 'should load styles added through block editor settings', async () => {
await page.waitForSelector( 'iframe[name="editor-canvas"]' );
// Expect a red border (added in PHP).
expect( await getComputedStyle( canvas(), 'p', 'border-color' ) ).toBe(
'rgb(255, 0, 0)'
);

await page.evaluate( () => {
const settings = window.wp.data
.select( 'core/editor' )
.getEditorSettings();
wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
...settings,
styles: [
...settings.styles,
{
css: 'p { border-width: 2px; }',
__unstableType: 'plugin',
},
],
} );
} );

// Expect a 2px border (added in JS).
expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
'2px'
);
} );

it( 'should load theme styles added through block editor settings', async () => {
await page.waitForSelector( 'iframe[name="editor-canvas"]' );

await page.evaluate( () => {
// Make sure that theme styles are added even if the theme styles
// preference is off.
window.wp.data
.dispatch( 'core/edit-post' )
.toggleFeature( 'themeStyles' );
const settings = window.wp.data
.select( 'core/editor' )
.getEditorSettings();
wp.data.dispatch( 'core/editor' ).updateEditorSettings( {
...settings,
styles: [
...settings.styles,
{
css: 'p { border-width: 2px; }',
__unstableType: 'theme',
},
],
} );
} );

// Expect a 1px border because theme styles are disabled.
expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
'1px'
);

await page.evaluate( () => {
// Now enable theme styles.
window.wp.data
.dispatch( 'core/edit-post' )
.toggleFeature( 'themeStyles' );
} );

// Expect a 2px border because theme styles are enabled.
expect( await getComputedStyle( canvas(), 'p', 'border-width' ) ).toBe(
'2px'
);
} );
} );
49 changes: 47 additions & 2 deletions packages/edit-post/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ import {
store as editorStore,
} from '@wordpress/editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { BlockBreadcrumb } from '@wordpress/block-editor';
import {
BlockBreadcrumb,
privateApis as blockEditorPrivateApis,
} from '@wordpress/block-editor';
import { Button, ScrollLock, Popover } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { PluginArea } from '@wordpress/plugins';
Expand Down Expand Up @@ -51,6 +54,9 @@ import WelcomeGuide from '../welcome-guide';
import ActionsPanel from './actions-panel';
import StartPageOptions from '../start-page-options';
import { store as editPostStore } from '../../store';
import { unlock } from '../../lock-unlock';

const { getLayoutStyles } = unlock( blockEditorPrivateApis );

const interfaceLabels = {
/* translators: accessibility text for the editor top bar landmark region. */
Expand All @@ -65,7 +71,7 @@ const interfaceLabels = {
footer: __( 'Editor footer' ),
};

function Layout( { styles } ) {
function Layout() {
const isMobileViewport = useViewportMatch( 'medium', '<' );
const isHugeViewport = useViewportMatch( 'huge', '>=' );
const isLargeViewport = useViewportMatch( 'large' );
Expand All @@ -89,10 +95,45 @@ function Layout( { styles } ) {
showBlockBreadcrumbs,
isTemplateMode,
documentLabel,
styles,
} = useSelect( ( select ) => {
const { getEditorSettings, getPostTypeLabel } = select( editorStore );
const { isFeatureActive } = select( editPostStore );
const editorSettings = getEditorSettings();
const postTypeLabel = getPostTypeLabel();
const hasThemeStyles = isFeatureActive( 'themeStyles' );

const themeStyles = [];
const presetStyles = [];
editorSettings.styles?.forEach( ( style ) => {
if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
themeStyles.push( style );
} else {
presetStyles.push( style );
}
} );

const defaultEditorStyles = [
...editorSettings.defaultEditorStyles,
...presetStyles,
];

// If theme styles are not present or displayed, ensure that
// base layout styles are still present in the editor.
if (
! editorSettings.disableLayoutStyles &&
! ( hasThemeStyles && themeStyles.length )
) {
defaultEditorStyles.push( {
css: getLayoutStyles( {
style: {},
selector: 'body',
hasBlockGapSupport: false,
hasFallbackGapSupport: true,
fallbackGapValue: '0.5em',
} ),
} );
}

return {
isTemplateMode: select( editPostStore ).isEditingTemplate(),
Expand Down Expand Up @@ -125,6 +166,10 @@ function Layout( { styles } ) {
),
// translators: Default label for the Document in the Block Breadcrumb.
documentLabel: postTypeLabel || _x( 'Document', 'noun' ),
styles:
hasThemeStyles && themeStyles.length
? editorSettings.styles
: defaultEditorStyles,
};
}, [] );

Expand Down
44 changes: 1 addition & 43 deletions packages/edit-post/src/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
import { useMemo } from '@wordpress/element';
import { SlotFillProvider } from '@wordpress/components';
import { store as coreStore } from '@wordpress/core-data';
Expand All @@ -28,7 +27,6 @@ import { unlock } from './lock-unlock';
import useCommonCommands from './hooks/commands/use-common-commands';

const { ExperimentalEditorProvider } = unlock( editorPrivateApis );
const { getLayoutStyles } = unlock( blockEditorPrivateApis );
const { useCommands } = unlock( coreCommandsPrivateApis );

function Editor( { postId, postType, settings, initialEdits, ...props } ) {
Expand All @@ -39,7 +37,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
focusMode,
isDistractionFree,
hasInlineToolbar,
hasThemeStyles,
post,
preferredStyleVariations,
hiddenBlockTypes,
Expand Down Expand Up @@ -83,7 +80,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
focusMode: isFeatureActive( 'focusMode' ),
isDistractionFree: isFeatureActive( 'distractionFree' ),
hasInlineToolbar: isFeatureActive( 'inlineToolbar' ),
hasThemeStyles: isFeatureActive( 'themeStyles' ),
preferredStyleVariations: select( preferencesStore ).get(
'core/edit-post',
'preferredStyleVariations'
Expand Down Expand Up @@ -155,44 +151,6 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
keepCaretInsideBlock,
] );

const styles = useMemo( () => {
const themeStyles = [];
const presetStyles = [];
settings.styles?.forEach( ( style ) => {
if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
themeStyles.push( style );
} else {
presetStyles.push( style );
}
} );

const defaultEditorStyles = [
...settings.defaultEditorStyles,
...presetStyles,
];

// If theme styles are not present or displayed, ensure that
// base layout styles are still present in the editor.
if (
! settings.disableLayoutStyles &&
! ( hasThemeStyles && themeStyles.length )
) {
defaultEditorStyles.push( {
css: getLayoutStyles( {
style: {},
selector: 'body',
hasBlockGapSupport: false,
hasFallbackGapSupport: true,
fallbackGapValue: '0.5em',
} ),
} );
}

return hasThemeStyles && themeStyles.length
? settings.styles
: defaultEditorStyles;
}, [ settings, hasThemeStyles ] );

if ( ! post ) {
return null;
}
Expand All @@ -211,7 +169,7 @@ function Editor( { postId, postType, settings, initialEdits, ...props } ) {
<ErrorBoundary>
<CommandMenu />
<EditorInitialization postId={ postId } />
<Layout styles={ styles } />
<Layout />
</ErrorBoundary>
<PostLockedModal />
</ExperimentalEditorProvider>
Expand Down

1 comment on commit db67a79

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in db67a79.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5621718042
📝 Reported issues:

Please sign in to comment.