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 block DOM: remove extra div wrapper #19010

Merged
merged 5 commits into from Jan 6, 2020
Merged
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -3,7 +3,7 @@
// value is designed to work with).

$z-layers: (
".block-editor-block-list__block-edit::before": 0,
".block-editor-block-list__block::before": 0,
".block-editor-block-switcher__arrow": 1,
".block-editor-block-list__block {core/image aligned wide or fullwide}": 20,
".block-library-classic__toolbar": 10,
@@ -41,7 +41,7 @@ $z-layers: (

// Should have higher index than the inset/underlay used for dragging
".components-placeholder__fieldset": 1,
".block-editor-block-list__block-edit .reusable-block-edit-panel *": 1,
".block-editor-block-list__block .reusable-block-edit-panel *": 1,

// Show drop zone above most standard content, but below any overlays
".components-drop-zone": 40,
@@ -501,73 +501,71 @@ function BlockListBlock( {
clientId={ clientId }
rootClientId={ rootClientId }
/> }
<div className="block-editor-block-list__block-edit">
{ ( isCapturingDescendantToolbars ) && (
// A slot made available on all ancestors of the selected Block
// to allow child Blocks to render their toolbars into the DOM
// of the appropriate parent.
<ChildToolbarSlot />
) }
{ ( shouldShowBreadcrumb || shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
<Popover
noArrow
animate={ false }
// Position above the anchor, pop out towards the right,
// and position in the left corner.
// To do: refactor `Popover` to make this prop clearer.
position="top right left"
focusOnMount={ false }
anchorRef={ blockNodeRef.current }
className="block-editor-block-list__block-popover"
__unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true }
__unstableSlotName="block-toolbar"
// Allow subpixel positioning for the block movement animation.
__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && wrapper.current }
__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && wrapper.current }
>
{ ! hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
{ hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
// If the parent Block is set to consume toolbars of the child Blocks
// then render the child Block's toolbar into the Slot provided
// by the parent.
<ChildToolbar>
{ renderBlockContextualToolbar() }
</ChildToolbar>
) }
{ shouldShowBreadcrumb && (
<BlockBreadcrumb
clientId={ clientId }
ref={ breadcrumb }
data-align={ wrapperProps ? wrapperProps[ 'data-align' ] : undefined }
/>
) }
</Popover>
) }
<IgnoreNestedEvents
ref={ blockNodeRef }
onDragStart={ preventDrag }
onMouseDown={ onMouseDown }
onMouseLeave={ onMouseLeave }
data-block={ clientId }
{ ( isCapturingDescendantToolbars ) && (
// A slot made available on all ancestors of the selected Block
// to allow child Blocks to render their toolbars into the DOM
// of the appropriate parent.
<ChildToolbarSlot />
) }
{ ( shouldShowBreadcrumb || shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
<Popover
noArrow
animate={ false }
// Position above the anchor, pop out towards the right,
// and position in the left corner.
// To do: refactor `Popover` to make this prop clearer.
position="top right left"
focusOnMount={ false }
anchorRef={ blockNodeRef.current }
className="block-editor-block-list__block-popover"
__unstableSticky={ isPartOfMultiSelection ? '.wp-block.is-multi-selected' : true }
__unstableSlotName="block-toolbar"
// Allow subpixel positioning for the block movement animation.
__unstableAllowVerticalSubpixelPosition={ moverDirection !== 'horizontal' && wrapper.current }
__unstableAllowHorizontalSubpixelPosition={ moverDirection === 'horizontal' && wrapper.current }
>
<BlockCrashBoundary onError={ onBlockError }>
{ isValid && blockEdit }
{ isValid && mode === 'html' && (
<BlockHtml clientId={ clientId } />
) }
{ ! isValid && [
<BlockInvalidWarning
key="invalid-warning"
clientId={ clientId }
/>,
<div key="invalid-preview">
{ getSaveElement( blockType, attributes ) }
</div>,
] }
</BlockCrashBoundary>
{ !! hasError && <BlockCrashWarning /> }
</IgnoreNestedEvents>
</div>
{ ! hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && renderBlockContextualToolbar() }
{ hasAncestorCapturingToolbars && ( shouldShowContextualToolbar || isForcingContextualToolbar.current ) && (
// If the parent Block is set to consume toolbars of the child Blocks
// then render the child Block's toolbar into the Slot provided
// by the parent.
<ChildToolbar>
{ renderBlockContextualToolbar() }
</ChildToolbar>
) }
{ shouldShowBreadcrumb && (
<BlockBreadcrumb
clientId={ clientId }
ref={ breadcrumb }
data-align={ wrapperProps ? wrapperProps[ 'data-align' ] : undefined }
/>
) }
</Popover>
) }
<IgnoreNestedEvents
ref={ blockNodeRef }
onDragStart={ preventDrag }
onMouseDown={ onMouseDown }
onMouseLeave={ onMouseLeave }
data-block={ clientId }
>
<BlockCrashBoundary onError={ onBlockError }>
{ isValid && blockEdit }
{ isValid && mode === 'html' && (
<BlockHtml clientId={ clientId } />
) }
{ ! isValid && [
<BlockInvalidWarning
key="invalid-warning"
clientId={ clientId }
/>,
<div key="invalid-preview">
{ getSaveElement( blockType, attributes ) }
</div>,
] }
</BlockCrashBoundary>
{ !! hasError && <BlockCrashWarning /> }
</IgnoreNestedEvents>
{ showEmptyBlockSideInserter && (
<div className="block-editor-block-list__empty-block-inserter">
<Inserter
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.