Skip to content

Commit

Permalink
Unify placeholders (WordPress#59275)
Browse files Browse the repository at this point in the history 
* Draft/Experiment: Explore unified placeholders.

* Remove comments.

* Update label.

* Update hover styles.

* Update changelog.

* Use 2px consistent icons across group and columns

* Use : in variation instructions

* Add target for hover

* Show title.

* Initial layout work.

* Improve behavior for narrow contexts.

* Polish.

* Apply margin to Group as well.

* Center the buttons when small.

* Center upload, 4px padding.

* Address feedback (4px gap, justification)

* Update embed block.

* Fix site logo centering, improve very small contexts.

---------

Co-authored-by: Rich Tabor <hi@richtabor.com>
  • Loading branch information
@jasmussen @richtabor @huubl
2 people authored and huubl committed Apr 26, 2024
1 parent b355835 commit 4d5dd10
Show file tree
Hide file tree
Showing 14 changed files with 95 additions and 232 deletions.
94 changes: 22 additions & 72 deletions packages/block-editor/src/components/block-variation-picker/content.scss
View file
@@ -1,89 +1,39 @@
.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%;
}
}

.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
.block-editor-block-variation-picker__variations,
.block-editor-block-variation-picker__skip,
.wp-block-group-placeholder__variations {
list-style: none;
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: $grid-unit-20 0;
padding: 0;
list-style: none;
margin: 0;
gap: $grid-unit-10;
font-size: $helptext-font-size;

> li {
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;
}
svg {
fill: $gray-400 !important;
}

.block-editor-block-variation-picker__variation {
padding: $grid-unit-10;
.components-button {
padding: 4px;
}

.block-editor-block-variation-picker__variation-label {
font-family: $default-font;
font-size: 12px;
display: block;
line-height: 1.4;
.components-button:hover {
background: none !important; // !important to simplify the selector.
}
}

.block-editor-block-variation-picker__variation {
width: 100%;

&.components-button.has-icon {
// Override default styles inherited from <Button /> to center
// icon horizontally.
justify-content: center;
width: auto;

&.is-secondary {
background-color: $white;
}
}

&.components-button {
// Override default styles inherited from <Button /> to allow button
// to grow vertically.
height: auto;
padding: 0;
}

&::before {
// Use `padding-bottom` trick to style element as perfect square.
content: "";
padding-bottom: 100%;
}

&:first-child {
margin-left: 0;
.components-button:hover svg {
fill: var(--wp-admin-theme-color) !important;
}

&:last-child {
margin-right: 0;
& > li {
width: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: $grid-unit-05;
}
}

5 changes: 3 additions & 2 deletions packages/block-editor/src/components/block-variation-picker/index.js
View file
Expand Up @@ -13,7 +13,7 @@ import { layout } from '@wordpress/icons';
function BlockVariationPicker( {
icon = layout,
label = __( 'Choose variation' ),
instructions = __( 'Select a variation to start with.' ),
instructions = __( 'Select a variation to start with:' ),
variations,
onSelect,
allowSkip,
Expand Down Expand Up @@ -42,7 +42,8 @@ function BlockVariationPicker( {
{ variations.map( ( variation ) => (
<li key={ variation.name }>
<Button
variant="secondary"
__next40pxDefaultSize
variant="tertiary"
icon={
variation.icon && variation.icon.src
? variation.icon.src
Expand Down
11 changes: 0 additions & 11 deletions packages/block-editor/src/components/media-placeholder/content.scss
View file
@@ -1,10 +1,3 @@
.block-editor-media-placeholder__url-input-container {
// Reset the margin to ensure the url popover is adjacent to the button.
.block-editor-media-placeholder__button {
margin-bottom: 0;
}
}

.block-editor-media-placeholder__url-input-form {
display: flex;

Expand All @@ -29,10 +22,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
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/media-placeholder/index.js
View file
Expand Up @@ -81,7 +81,7 @@ const URLSelectionUI = ( {
className="block-editor-media-placeholder__button"
onClick={ openURLInput }
isPressed={ isURLInputVisible }
variant="tertiary"
variant="secondary"
>
{ __( 'Insert from URL' ) }
</Button>
Expand Down Expand Up @@ -422,7 +422,7 @@ export function MediaPlaceholder( {
<Button
className="block-editor-media-placeholder__button"
onClick={ onToggleFeaturedImage }
variant="tertiary"
variant="secondary"
>
{ __( 'Use featured image' ) }
</Button>
Expand All @@ -435,7 +435,7 @@ export function MediaPlaceholder( {
const defaultButton = ( { open } ) => {
return (
<Button
variant="tertiary"
variant="secondary"
onClick={ () => {
open();
} }
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/columns/edit.js
View file
Expand Up @@ -274,6 +274,7 @@ function Placeholder( { clientId, name, setAttributes } ) {
icon={ blockType?.icon?.src }
label={ blockType?.title }
variations={ variations }
instructions={ __( 'Divide into columns. Select a layout:' ) }
onSelect={ ( nextVariation = defaultVariation ) => {
if ( nextVariation.attributes ) {
setAttributes( nextVariation.attributes );
Expand Down
46 changes: 12 additions & 34 deletions packages/block-library/src/columns/variations.js
View file
Expand Up @@ -18,16 +18,12 @@ const variations = [
description: __( 'One column' ),
icon: (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
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"
/>
<Path d="M0 10a2 2 0 0 1 2-2h44a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Z" />
</SVG>
),
innerBlocks: [ [ 'core/column' ] ],
Expand All @@ -39,16 +35,12 @@ const variations = [
description: __( 'Two columns; equal split' ),
icon: (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
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"
/>
<Path d="M0 10a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm25 0a2 2 0 0 1 2-2h19a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H27a2 2 0 0 1-2-2V10Z" />
</SVG>
),
isDefault: true,
Expand All @@ -61,16 +53,12 @@ const variations = [
description: __( 'Two columns; one-third, two-thirds split' ),
icon: (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
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"
/>
<Path d="M0 10a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm17 0a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H19a2 2 0 0 1-2-2V10Z" />
</SVG>
),
innerBlocks: [
Expand All @@ -85,16 +73,12 @@ const variations = [
description: __( 'Two columns; two-thirds, one-third split' ),
icon: (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
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"
/>
<Path d="M0 10a2 2 0 0 1 2-2h27a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V10Zm33 0a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35a2 2 0 0 1-2-2V10Z" />
</SVG>
),
innerBlocks: [
Expand All @@ -109,15 +93,12 @@ const variations = [
description: __( 'Three columns; equal split' ),
icon: (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
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"
/>
<Path d="M0 10a2 2 0 0 1 2-2h10.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm16.5 0c0-1.105.864-2 1.969-2H29.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H18.47c-1.105 0-1.969-.895-1.969-2V10Zm17 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2H35.469c-1.105 0-1.969-.895-1.969-2V10Z" />
</SVG>
),
innerBlocks: [
Expand All @@ -133,15 +114,12 @@ const variations = [
description: __( 'Three columns; wide center column' ),
icon: (
<SVG
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
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"
/>
<Path d="M0 10a2 2 0 0 1 2-2h7.531c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H2a2 2 0 0 1-2-2V10Zm13.5 0c0-1.105.864-2 1.969-2H32.53c1.105 0 1.969.895 1.969 2v28c0 1.105-.864 2-1.969 2H15.47c-1.105 0-1.969-.895-1.969-2V10Zm23 0c0-1.105.864-2 1.969-2H46a2 2 0 0 1 2 2v28a2 2 0 0 1-2 2h-7.531c-1.105 0-1.969-.895-1.969-2V10Z" />
</SVG>
),
innerBlocks: [
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/embed/editor.scss
View file
Expand Up @@ -19,8 +19,6 @@
}

.wp-block-embed__learn-more {
margin-top: 1em;

@at-root .wp-block-post-content & {
a {
color: var(--wp-admin-theme-color);
Expand Down
30 changes: 21 additions & 9 deletions packages/block-library/src/embed/embed-placeholder.js
View file
Expand Up @@ -2,7 +2,13 @@
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { Button, Placeholder, ExternalLink } from '@wordpress/components';
import {
Button,
Placeholder,
ExternalLink,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
import { BlockIcon } from '@wordpress/block-editor';

const EmbedPlaceholder = ( {
Expand Down Expand Up @@ -47,17 +53,23 @@ const EmbedPlaceholder = ( {
</ExternalLink>
</div>
{ cannotEmbed && (
<div className="components-placeholder__error">
<VStack spacing={ 3 } className="components-placeholder__error">
<div className="components-placeholder__instructions">
{ __( 'Sorry, this content could not be embedded.' ) }
</div>
<Button variant="secondary" onClick={ tryAgain }>
{ _x( 'Try again', 'button label' ) }
</Button>{ ' ' }
<Button variant="secondary" onClick={ fallback }>
{ _x( 'Convert to link', 'button label' ) }
</Button>
</div>
<HStack
expanded={ false }
spacing={ 3 }
justify="flex-start"
>
<Button variant="secondary" onClick={ tryAgain }>
{ _x( 'Try again', 'button label' ) }
</Button>{ ' ' }
<Button variant="secondary" onClick={ fallback }>
{ _x( 'Convert to link', 'button label' ) }
</Button>
</HStack>
</VStack>
) }
</Placeholder>
);
Expand Down

0 comments on commit 4d5dd10

Please sign in to comment.