Skip to content

Commit

Permalink
We need to reshuffle the order of the elements to ensure that:
Browse files Browse the repository at this point in the history
- a user can interact with the placeholder controls
- we can target the resizer as a sibling of `.components-placeholder.is-large`

Also cleaning up the CSS and removing unused styles.
  • Loading branch information
ramonjd committed Oct 8, 2021
1 parent c4cacb2 commit 7145dff
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 56 deletions.
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ $z-layers: (
".edit-widgets-header": 30,
".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter
".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block
".wp-block-cover.is-placeholder .components-placeholder.is-large": 1, // Cover block resizer component inside a large placeholder.
".wp-block-cover.has-background-dim::before": 1, // Overlay area inside block cover need to be higher than the video background.
".wp-block-cover__image-background": 0, // Image background inside cover block.
".wp-block-cover__video-background": 0, // Video background inside cover block.
Expand Down
72 changes: 35 additions & 37 deletions packages/block-library/src/cover/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -277,29 +277,27 @@ function CoverPlaceholder( {
} ) {
const { removeAllNotices, createErrorNotice } = noticeOperations;
return (
<div className="cover-block__cover-placeholder-container">
<MediaPlaceholder
icon={ <BlockIcon icon={ icon } /> }
labels={ {
title: __( 'Cover' ),
instructions: __(
'Drag and drop onto this block, upload, or select existing media from your library.'
),
} }
onSelect={ onSelectMedia }
accept="image/*,video/*"
allowedTypes={ ALLOWED_MEDIA_TYPES }
notices={ noticeUI }
disableMediaButtons={ disableMediaButtons }
onError={ ( message ) => {
removeAllNotices();
createErrorNotice( message );
} }
style={ style }
>
{ children }
</MediaPlaceholder>
</div>
<MediaPlaceholder
icon={ <BlockIcon icon={ icon } /> }
labels={ {
title: __( 'Cover' ),
instructions: __(
'Drag and drop onto this block, upload, or select existing media from your library.'
),
} }
onSelect={ onSelectMedia }
accept="image/*,video/*"
allowedTypes={ ALLOWED_MEDIA_TYPES }
notices={ noticeUI }
disableMediaButtons={ disableMediaButtons }
onError={ ( message ) => {
removeAllNotices();
createErrorNotice( message );
} }
style={ style }
>
{ children }
</MediaPlaceholder>
);
}

Expand Down Expand Up @@ -641,20 +639,6 @@ function CoverEdit( {
noticeOperations={ noticeOperations }
style={ { minHeight: temporaryMinHeight || minHeight } }
>
<ResizableCover
className="block-library-cover__resize-container"
onResizeStart={ () => {
setAttributes( { minHeightUnit: 'px' } );
toggleSelection( false );
} }
onResize={ setTemporaryMinHeight }
onResizeStop={ ( newMinHeight ) => {
toggleSelection( true );
setAttributes( { minHeight: newMinHeight } );
setTemporaryMinHeight( null );
} }
showHandle={ isSelected }
/>
<div className="wp-block-cover__placeholder-background-options">
<ColorPalette
disableCustomColors={ true }
Expand All @@ -664,6 +648,20 @@ function CoverEdit( {
/>
</div>
</CoverPlaceholder>
<ResizableCover
className="block-library-cover__resize-container"
onResizeStart={ () => {
setAttributes( { minHeightUnit: 'px' } );
toggleSelection( false );
} }
onResize={ setTemporaryMinHeight }
onResizeStop={ ( newMinHeight ) => {
toggleSelection( true );
setAttributes( { minHeight: newMinHeight } );
setTemporaryMinHeight( null );
} }
showHandle={ isSelected }
/>
</div>
</>
);
Expand Down
35 changes: 16 additions & 19 deletions packages/block-library/src/cover/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,22 @@
&.is-placeholder {
min-height: auto !important;
padding: 0 !important;

// Resizeable placeholder
.components-resizable-box__container {
display: none;
}
.components-placeholder {
&.is-large {
min-height: 250px;
justify-content: flex-start;
z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+ .components-resizable-box__container {
min-height: 250px;
display: block;
}
}
}
}

&.components-placeholder h2 {
Expand Down Expand Up @@ -116,22 +132,3 @@
.block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
background-attachment: scroll;
}

// Resizeable placeholder
.wp-block-cover.is-placeholder .cover-block__cover-placeholder-container {
width: 100%;
.components-resizable-box__container {
display: none;
}
.components-placeholder {
justify-content: flex-start;
&.is-large {
min-height: 250px;

.components-resizable-box__container {
min-height: 250px;
display: block;
}
}
}
}

0 comments on commit 7145dff

Please sign in to comment.