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

Lighter InnerBlocks: allow blocks to render own wrappers #19910

Merged
merged 12 commits into from
Mar 2, 2020
Prev Previous commit
Next Next commit
Incorporate #19849
  • Loading branch information
ellatrix committed Mar 2, 2020
commit 91d6183aae0567180fdebd7f6c0d1b7f726b6674
2 changes: 1 addition & 1 deletion packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ $z-layers: (

// Small screen inner blocks overlay must be displayed above drop zone,
// settings menu, and movers.
".block-editor-inner-blocks.has-overlay::after": 60,
".block-editor-block-list__layout.has-overlay::after": 60,

// The toolbar, when contextual, should be above any adjacent nested block click overlays.
".block-editor-block-contextual-toolbar": 61,
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-list/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -226,14 +226,14 @@
}

// Reusable blocks clickthrough overlays.
&.is-reusable > .block-editor-inner-blocks.has-overlay {
&.is-reusable > .block-editor-inner-blocks > .block-editor-block-list__layout.has-overlay {
// Remove only the top click overlay.
&::after {
display: none;
}

// Restore it for subsequent.
.block-editor-inner-blocks.has-overlay::after {
.block-editor-block-list__layout.has-overlay::after {
display: block;
}
}
Expand Down
15 changes: 9 additions & 6 deletions packages/block-editor/src/components/inner-blocks/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ class InnerBlocks extends Component {
hasOverlay,
__experimentalCaptureToolbars: captureToolbars,
forwardedRef,
className,
...props
} = this.props;
const { templateInProcess } = this.state;
Expand All @@ -158,10 +159,16 @@ class InnerBlocks extends Component {
return null;
}

const classes = classnames( className, {
'has-overlay': enableClickThrough && hasOverlay,
'is-capturing-toolbar': captureToolbars,
} );

const blockList = (
<BlockList
ref={ forwardedRef }
rootClientId={ clientId }
className={ classes }
{ ...omit( props, [
'templateLock',
'isSmallScreen',
Expand All @@ -178,17 +185,13 @@ class InnerBlocks extends Component {
] ) }
Copy link
Member Author

Choose a reason for hiding this comment

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

This component could benefit from a hooks rewrite, which will remove the need to omit props used by this component. I'll consider it out of scope for this PR though.

Copy link
Contributor

Choose a reason for hiding this comment

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

So just to clarify here, the extra ...props are needed for the "style" in this PR right?

Copy link
Member Author

Choose a reason for hiding this comment

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

That's correct. Any remaining props on InnerBlocks should be passed down to the block wrapper.

/>
);

if ( props.tagName ) {
return blockList;
}

const classes = classnames( 'block-editor-inner-blocks', {
'has-overlay': enableClickThrough && hasOverlay,
'is-capturing-toolbar': captureToolbars,
} );

return (
<div className={ classes } ref={ forwardedRef }>
<div className="block-editor-inner-blocks" ref={ forwardedRef }>
{ blockList }
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/inner-blocks/style.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
// Add clickable overlay to blocks with nesting.
// This makes it easy to select all layers of the block.
.block-editor-inner-blocks.has-overlay {
.block-editor-block-list__layout.has-overlay {
&::after {
content: "";
position: absolute;
top: -$block-padding;
right: -$block-padding;
bottom: -$block-padding;
left: -$block-padding;
z-index: z-index(".block-editor-inner-blocks.has-overlay::after");
z-index: z-index(".block-editor-block-list__layout.has-overlay::after");
}
}

Expand Down