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

Jump to bottom

useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered #55288

Merged
merged 4 commits into from
Oct 15, 2023
Merged

useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered #55288

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e744fb
useBlockPreview: Try alternative fix for displaying local style overr…
andrewserong Oct 12, 2023
1d03683
Avoid duplicate styles, fix rendering issues in Safari
andrewserong Oct 13, 2023
f2ca821
Add more explanatory comments
andrewserong Oct 13, 2023
f076055
Remove additional check for styles within the block preview, as it is…
andrewserong Oct 15, 2023
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
13 changes: 13 additions & 0 deletions packages/block-editor/src/components/block-preview/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import deprecated from '@wordpress/deprecated';
*/
import { ExperimentalBlockEditorProvider } from '../provider';
import AutoHeightBlockPreview from './auto';
import EditorStyles from '../editor-styles';
import { store as blockEditorStore } from '../../store';
import { BlockListItems } from '../block-list';

Expand Down Expand Up @@ -92,6 +93,17 @@ export function BlockPreview( {
*/
export default memo( BlockPreview );

function InnerStyles() {
const { styles } = useSelect( ( select ) => {
andrewserong marked this conversation as resolved.
Show resolved Hide resolved
const settings = select( blockEditorStore ).getSettings();
return {
styles: settings.styles,
};
}, [] );

return <EditorStyles styles={ styles } />;
Copy link
Member

Choose a reason for hiding this comment

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

How are these styles being added right now, or previously before the bug?
Why does EditorStyles not include these already?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Prior to the bug being introduced the styles were output via a portal, so even in a child preview with its own block editor provider, the generated styles were being output by the parent. However, since moving over to the block editor store-based state approach for style overrides, this preview no-longer propagates (or renders) any styles generated by the blocks within its preview, because the local-to-the-preview state isn't being used anywhere. Or to put it differently setStyleOverride will only update the preview's block editor store, and not the parent environment's block editor store, which is where EditorStyles is currently used.

The proposed fix in this PR is to ensure that the preview also outputs EditorStyles, but only those styles generated from within the preview.

I've updated the PR description with the following:

Prior to this PR, for things that use useBlockPreview, the styles that are generated within that preview were not output anywhere. This is because ExperimentalBlockEditorProvider uses its own registry, so is designed to have values passed down to it, but not to propagate values outside of itself. So any calls to setStyleOverride would update state within the local block editor provider, and not be captured by the parent's EditorStyles.

}

/**
* This hook is used to lightly mark an element as a block preview wrapper
* element. Call this hook and pass the returned props to the element to mark as
Expand Down Expand Up @@ -128,6 +140,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
value={ renderedBlocks }
settings={ settings }
>
<InnerStyles />
<BlockListItems renderAppender={ false } layout={ layout } />
</ExperimentalBlockEditorProvider>
);
Expand Down
Loading