Skip to content

Add BlockCanvasCover SlotFill #42

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
maxschmeling merged 6 commits into from
Oct 7, 2025
Merged

Add BlockCanvasCover SlotFill #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d9e17bb
Add <BlockCanvasCover> and <VisualEditorOverlay>
maxschmeling Oct 3, 2025
1ae56e5
Pass containerRef instead of containerElement in <BlockCanvasCover>
maxschmeling Oct 6, 2025
4b384a6
Remove VisualEditorOverlay
maxschmeling Oct 7, 2025
f1d2d93
Merge branch 'vip-rtc' into fix/VIP-1940/non-iframe-awareness-ui
maxschmeling Oct 7, 2025
63f5b27
npm run docs:build
maxschmeling Oct 7, 2025
9ac8e21
Move <BlockCanvasCover> definition
maxschmeling Oct 7, 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
4 changes: 4 additions & 0 deletions packages/block-editor/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,10 @@ _Returns_

- `Element`: Block Breadcrumb.

### BlockCanvasCover

Undocumented declaration.

### BlockColorsStyleSelector

Undocumented declaration.
Expand Down
44 changes: 44 additions & 0 deletions packages/block-editor/src/components/block-canvas/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
import { useMergeRefs, useViewportMatch } from '@wordpress/compose';
import { useRef } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { createSlotFill } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -19,6 +20,8 @@ import { useBlockCommands } from '../use-block-commands';
import { store as blockEditorStore } from '../../store';
import { unlock } from '../../lock-unlock';

export const BlockCanvasCover = createSlotFill( 'BlockCanvasCover' );

// EditorStyles is a memoized component, so avoid passing a new
// object reference on each render.
const EDITOR_STYLE_TRANSFORM_OPTIONS = {
Expand Down Expand Up @@ -74,6 +77,27 @@ export function ExperimentalBlockCanvas( {
>
{ children }
</WritingFlow>

<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>

@ingeniumed ingeniumed Oct 7, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Have a feeling the test failures might be due to the lack of a lock/unlock being used? I could be wrong here.

@maxschmeling maxschmeling Oct 7, 2025

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

It isn't a private API and the other usages of createSlotFill don't need it.

{ ( covers ) =>
covers.map( ( cover, index ) => (
<div
key={ index }
className="block-canvas-cover"
style={ {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
pointerEvents: 'none',
} }
>
{ cover }
</div>
) )
}
</BlockCanvasCover.Slot>
</BlockTools>
);
}
Expand All @@ -95,6 +119,26 @@ export function ExperimentalBlockCanvas( {
>
<EditorStyles styles={ styles } />
{ children }
<BlockCanvasCover.Slot fillProps={ { containerRef: localRef } }>
{ ( covers ) =>
covers.map( ( cover, index ) => (
<div
key={ index }
className="block-canvas-cover"
style={ {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
pointerEvents: 'none',
} }
>
{ cover }
</div>
) )
}
</BlockCanvasCover.Slot>
</Iframe>
</BlockTools>
);
Expand Down
1 change: 1 addition & 0 deletions packages/block-editor/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,4 @@ export * from './utils';
export { storeConfig, store } from './store';
export { SETTINGS_DEFAULTS } from './store/defaults';
export { privateApis } from './private-apis';
export { BlockCanvasCover } from './components/block-canvas';
Loading