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

Cover block: Allow setting the height from the placeholder state. #35068

Merged
merged 9 commits into from Oct 13, 2021
+37 −1
Merged

Cover block: Allow setting the height from the placeholder state. #35068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
fe6ddd6
initial commit
ramonjd Sep 22, 2021
d3cce6c
Added some copy.
ramonjd Sep 24, 2021
6e18643
Ensure that the resizeable placeholder has a consistent background co…
ramonjd Sep 28, 2021
137e17c
Experiment to add vertical classes to the placeholder and use it to d…
ramonjd Sep 30, 2021
d24a05a
limit the resize behaviour to `is-large` placeholders
ramonjd Sep 30, 2021
fb0ec6e
Ensure the placeholder takes up the maximium available width set by t…
ramonjd Oct 8, 2021
fb8998b
We need to reshuffle the order of the elements to ensure that:
ramonjd Oct 8, 2021
eb6cfe3
Bumping min-height of is-large placeholder resizer down to 240px
ramonjd Oct 10, 2021
ec445b7
Because we removed `minHeight={ COVER_MIN_HEIGHT }` on the resizeable…
ramonjd Oct 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/base-styles/_z-index.scss
View file
Open in desktop
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
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/media-placeholder/index.js
View file
Open in desktop
Expand Up @@ -78,6 +78,7 @@ export function MediaPlaceholder( {
children,
mediaLibraryButton,
placeholder,
style,
} ) {
const mediaUpload = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
Expand Down Expand Up @@ -248,6 +249,7 @@ export function MediaPlaceholder( {
notices={ notices }
onDoubleClick={ onDoubleClick }
preview={ mediaPreview }
style={ style }
>
{ content }
{ children }
Expand Down
18 changes: 17 additions & 1 deletion packages/block-library/src/cover/edit.js
View file
Open in desktop
Expand Up @@ -198,7 +198,6 @@ function ResizableCover( {
onResizeStop( elt.clientHeight );
setIsResizing( false );
} }
minHeight={ COVER_MIN_HEIGHT }
{ ...props }
/>
);
Expand Down Expand Up @@ -274,6 +273,7 @@ function CoverPlaceholder( {
noticeUI,
noticeOperations,
onSelectMedia,
style,
} ) {
const { removeAllNotices, createErrorNotice } = noticeOperations;
return (
Expand All @@ -294,6 +294,7 @@ function CoverPlaceholder( {
removeAllNotices();
createErrorNotice( message );
} }
style={ style }
>
{ children }
</MediaPlaceholder>
Expand Down Expand Up @@ -641,6 +642,7 @@ function CoverEdit( {
noticeUI={ noticeUI }
onSelectMedia={ onSelectMedia }
noticeOperations={ noticeOperations }
style={ { minHeight: temporaryMinHeight || minHeight } }
>
<div className="wp-block-cover__placeholder-background-options">
<ColorPalette
Expand All @@ -651,6 +653,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
17 changes: 17 additions & 0 deletions packages/block-library/src/cover/editor.scss
View file
Open in desktop
Expand Up @@ -9,6 +9,22 @@
&.is-placeholder {
min-height: auto !important;
padding: 0 !important;

// Resizeable placeholder for placeholder.
.block-library-cover__resize-container {
display: none;
}
.components-placeholder {
&.is-large {
min-height: 240px;
justify-content: flex-start;
z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
+ .block-library-cover__resize-container {
min-height: 240px;
display: block;
}
}
}
}

&.components-placeholder h2 {
Expand Down Expand Up @@ -64,6 +80,7 @@
left: 0;
right: 0;
bottom: 0;
min-height: 50px;
}

.block-library-cover__resize-container:not(.is-resizing) {
Expand Down