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

Try improving block variation placeholders #58685

Closed
wants to merge 1 commit into from
Closed

Try improving block variation placeholders #58685

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
31 changes: 12 additions & 19 deletions packages/block-editor/src/components/block-variation-picker/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,9 @@
.block-editor-block-variation-picker {
.components-placeholder__instructions {
// Defer to vertical margins applied by template picker options.
margin-bottom: 0;
}

.components-placeholder__fieldset {
// Options will render horizontally, but the immediate children of the
// fieldset are the options and the skip button, oriented vertically.
flex-direction: column;
}

&.has-many-variations .components-placeholder__fieldset {
// Allow options to occupy a greater amount of the available space if
// many options exist.
max-width: 90%;
margin-top: $grid-unit-10;
}
}

Expand All @@ -22,27 +12,30 @@
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: $grid-unit-10;
margin: 0;
width: 100%;
margin: $grid-unit-20 0;
padding: 0;
list-style: none;

> li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
gap: $grid-unit-05;
list-style: none;
margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0;
flex-shrink: 1;
width: 75px;
text-align: center;

button {
display: inline-flex;
margin-right: 0;
}
}

.block-editor-block-variation-picker__variation {
padding: $grid-unit-10;
}
// .block-editor-block-variation-picker__variation {
// padding: $grid-unit-10;
// }

.block-editor-block-variation-picker__variation-label {
font-family: $default-font;
Expand Down Expand Up @@ -70,7 +63,7 @@
// Override default styles inherited from <Button /> to allow button
// to grow vertically.
height: auto;
padding: 0;
// padding: 0;
}

&::before {
Expand Down
11 changes: 7 additions & 4 deletions packages/block-editor/src/components/block-variation-picker/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ function BlockVariationPicker( {
variations,
onSelect,
allowSkip,
hasVariationLabels = true,
} ) {
const classes = classnames( 'block-editor-block-variation-picker', {
'has-many-variations': variations.length > 4,
Expand All @@ -42,7 +43,7 @@ function BlockVariationPicker( {
{ variations.map( ( variation ) => (
<li key={ variation.name }>
<Button
variant="secondary"
variant="tertiary"
icon={
variation.icon && variation.icon.src
? variation.icon.src
Expand All @@ -53,9 +54,11 @@ function BlockVariationPicker( {
className="block-editor-block-variation-picker__variation"
label={ variation.description || variation.title }
/>
<span className="block-editor-block-variation-picker__variation-label">
{ variation.title }
</span>
{ hasVariationLabels && (
<span className="block-editor-block-variation-picker__variation-label">
{ variation.title }
</span>
) }
</li>
) ) }
</ul>
Expand Down
4 changes: 0 additions & 4 deletions packages/block-editor/src/components/media-placeholder/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@
flex-shrink: 1;
}

.block-editor-media-placeholder__button {
margin-bottom: 0.5rem;
}

.block-editor-media-placeholder__cancel-button.is-link {
margin: 1em;
display: block;
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/columns/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,9 @@ function Placeholder( { clientId, name, setAttributes } ) {
<__experimentalBlockVariationPicker
icon={ blockType?.icon?.src }
label={ blockType?.title }
instructions={ __( 'Choose a layout to start with.' ) }
variations={ variations }
hasVariationLabels={ false }
onSelect={ ( nextVariation = defaultVariation ) => {
if ( nextVariation.attributes ) {
setAttributes( nextVariation.attributes );
Expand All @@ -290,7 +292,6 @@ function Placeholder( { clientId, name, setAttributes } ) {
);
}
} }
allowSkip
/>
</div>
);
Expand Down
60 changes: 37 additions & 23 deletions packages/block-library/src/columns/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,14 @@ const variations = [
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="m39.0625 14h-30.0625v20.0938h30.0625zm-30.0625-2c-1.10457 0-2 .8954-2 2v20.0938c0 1.1045.89543 2 2 2h30.0625c1.1046 0 2-.8955 2-2v-20.0938c0-1.1046-.8954-2-2-2z"
d="M42 10H6C4.89543 10 4 10.8954 4 12V36C4 37.1046 4.89543 38 6 38H42C43.1046 38 44 37.1046 44 36V12C44 10.8954 43.1046 10 42 10ZM6 11.5H42C42.2761 11.5 42.5 11.7239 42.5 12V36C42.5 36.2761 42.2761 36.5 42 36.5H6C5.72386 36.5 5.5 36.2761 5.5 36V12C5.5 11.7239 5.72386 11.5 6 11.5Z"
fill="currentColor"
/>
</SVG>
),
Expand All @@ -35,19 +37,21 @@ const variations = [
},
{
name: 'two-columns-equal',
title: __( '50 / 50' ),
title: __( '50/50' ),
description: __( 'Two columns; equal split' ),
icon: (
<SVG
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z"
d="M23.5 11.5H6C5.72386 11.5 5.5 11.7239 5.5 12V36C5.5 36.2761 5.72386 36.5 6 36.5H23.5V11.5ZM25 11.5H42C42.2761 11.5 42.5 11.7239 42.5 12V36C42.5 36.2761 42.2761 36.5 42 36.5H25V11.5ZM6 10H42C43.1046 10 44 10.8954 44 12V36C44 37.1046 43.1046 38 42 38H6C4.89543 38 4 37.1046 4 36V12C4 10.8954 4.89543 10 6 10Z"
fill="currentColor"
/>
</SVG>
),
Expand All @@ -56,91 +60,101 @@ const variations = [
scope: [ 'block' ],
},
{
name: 'two-columns-one-third-two-thirds',
title: __( '33 / 66' ),
description: __( 'Two columns; one-third, two-thirds split' ),
name: 'three-columns-equal',
title: __( '33/33/33' ),
description: __( 'Three columns; equal split' ),
icon: (
<SVG
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H20V34H39ZM18 34H9V14H18V34Z"
d="M42 10H6C4.89543 10 4 10.8954 4 12V36C4 37.1046 4.89543 38 6 38H42C43.1046 38 44 37.1046 44 36V12C44 10.8954 43.1046 10 42 10ZM6 11.5H16.5V36.5H6C5.72386 36.5 5.5 36.2761 5.5 36V12C5.5 11.7239 5.72386 11.5 6 11.5ZM30 11.5H18V36.5H30V11.5ZM31.5 11.5V36.5H42C42.2761 36.5 42.5 36.2761 42.5 36V12C42.5 11.7239 42.2761 11.5 42 11.5H31.5Z"
fill="currentColor"
/>
</SVG>
),
innerBlocks: [
[ 'core/column', { width: '33.33%' } ],
[ 'core/column', { width: '66.66%' } ],
[ 'core/column' ],
[ 'core/column' ],
[ 'core/column' ],
],
scope: [ 'block' ],
},
{
name: 'two-columns-two-thirds-one-third',
title: __( '66 / 33' ),
description: __( 'Two columns; two-thirds, one-third split' ),
name: 'two-columns-one-third-two-thirds',
title: __( '33/66' ),
description: __( 'Two columns; one-third, two-thirds split' ),
icon: (
<SVG
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H30V34H39ZM28 34H9V14H28V34Z"
d="M6 10H42C43.1046 10 44 10.8954 44 12V36C44 37.1046 43.1046 38 42 38H6C4.89543 38 4 37.1046 4 36V12C4 10.8954 4.89543 10 6 10ZM16.5 11.5H6C5.72386 11.5 5.5 11.7239 5.5 12V36C5.5 36.2761 5.72386 36.5 6 36.5H16.5V11.5ZM18 11.5H42C42.2761 11.5 42.5 11.7239 42.5 12V36C42.5 36.2761 42.2761 36.5 42 36.5H18V11.5Z"
fill="currentColor"
/>
</SVG>
),
innerBlocks: [
[ 'core/column', { width: '66.66%' } ],
[ 'core/column', { width: '33.33%' } ],
[ 'core/column', { width: '66.66%' } ],
],
scope: [ 'block' ],
},
{
name: 'three-columns-equal',
title: __( '33 / 33 / 33' ),
description: __( 'Three columns; equal split' ),
name: 'two-columns-two-thirds-one-third',
title: __( '66/33' ),
description: __( 'Two columns; two-thirds, one-third split' ),
icon: (
<SVG
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fillRule="evenodd"
d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z"
clipRule="evenodd"
d="M6 10H42C43.1046 10 44 10.8954 44 12V36C44 37.1046 43.1046 38 42 38H6C4.89543 38 4 37.1046 4 36V12C4 10.8954 4.89543 10 6 10ZM29.5 11.5H6C5.72386 11.5 5.5 11.7239 5.5 12V36C5.5 36.2761 5.72386 36.5 6 36.5H29.5V11.5ZM31 11.5H42C42.2761 11.5 42.5 11.7239 42.5 12V36C42.5 36.2761 42.2761 36.5 42 36.5H31V11.5Z"
fill="currentColor"
/>
</SVG>
),
innerBlocks: [
[ 'core/column' ],
[ 'core/column' ],
[ 'core/column' ],
[ 'core/column', { width: '66.66%' } ],
[ 'core/column', { width: '33.33%' } ],
],
scope: [ 'block' ],
},
{
name: 'three-columns-wider-center',
title: __( '25 / 50 / 25' ),
title: __( '25/50/25' ),
description: __( 'Three columns; wide center column' ),
icon: (
<SVG
width="48"
height="48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fillRule="evenodd"
d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM31 34H17V14h14v20zm2 0V14h6v20h-6zm-18 0H9V14h6v20z"
clipRule="evenodd"
d="M42 10H6C4.89543 10 4 10.8954 4 12V36C4 37.1046 4.89543 38 6 38H42C43.1046 38 44 37.1046 44 36V12C44 10.8954 43.1046 10 42 10ZM6 11.5H14.5V36.5H6C5.72386 36.5 5.5 36.2761 5.5 36V12C5.5 11.7239 5.72386 11.5 6 11.5ZM32 11.5H16V36.5H32V11.5ZM33.5 11.5V36.5H42C42.2761 36.5 42.5 36.2761 42.5 36V12C42.5 11.7239 42.2761 11.5 42 11.5H33.5Z"
fill="currentColor"
/>
</SVG>
),
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/group/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
}
.components-placeholder__instructions {
text-align: center;
margin-bottom: 18px;
margin-bottom: $grid-unit-20;
}
.wp-block-group-placeholder__variations svg {
fill: $gray-400 !important;
Expand Down
5 changes: 2 additions & 3 deletions packages/block-library/src/group/placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n';
import { store as blocksStore } from '@wordpress/blocks';
import { Path, SVG, Button, Placeholder } from '@wordpress/components';
import { useState, useEffect } from '@wordpress/element';
import { group } from '@wordpress/icons';

/**
* Returns a custom variation icon.
Expand Down Expand Up @@ -142,9 +143,7 @@ function GroupPlaceHolder( { name, onSelect } ) {
} );
return (
<div { ...blockProps }>
<Placeholder
instructions={ __( 'Group blocks together. Select a layout:' ) }
>
<Placeholder icon={ group } label={ __( 'Group' ) }>
{ /*
* Taken from BlockVariationPicker component.
* Disable reason: The `list` ARIA role is redundant but
Expand Down
28 changes: 8 additions & 20 deletions packages/components/src/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
font-size: $default-font-size;
box-sizing: border-box;
position: relative;
padding: 1em;
padding: $grid-unit-30;
width: 100%;
text-align: left;
margin: 0;
color: $gray-900;
gap: $grid-unit-10;

// Some editor styles unset this.
-moz-font-smoothing: subpixel-antialiased;
Expand Down Expand Up @@ -43,8 +44,7 @@

.components-placeholder__label {
display: flex;
font-weight: 600;
margin-bottom: $grid-unit-20;
font-weight: 500;
align-items: center;

> svg,
Expand All @@ -71,6 +71,8 @@
flex-direction: row;
width: 100%;
flex-wrap: wrap;
gap: $grid-unit-10;
margin: $grid-unit-20 0 0;

p {
font-family: $default-font;
Expand All @@ -89,25 +91,11 @@
flex: 1 1 auto;
}

.components-placeholder__instructions {
margin-bottom: 1em;
}

.components-placeholder__error {
margin-top: 1em;
margin-top: $grid-unit-20;
width: 100%;
}

.components-placeholder__fieldset .components-button {
margin-right: $grid-unit-15;
margin-bottom: $grid-unit-15; // If buttons wrap we need vertical space between.

&:last-child {
margin-bottom: 0;
margin-right: 0;
}
}

// Any `<Button />` component with `variant="link"` prop will need extra spacing if placed
// immediately after a button which is *not* an `variant="link"` style button. This is because
// `variant="link"` has no padding so we need to account for this to avoid the buttons butting
Expand All @@ -126,8 +114,8 @@
// Medium and large sizes.
&.is-large {
.components-placeholder__label {
font-size: 18pt;
font-weight: normal;
font-size: $default-font-size;
font-weight: 500;
}
}

Expand Down
Loading