From 4d5dd1069fb74cce2605ecb7cd624b10970109dc Mon Sep 17 00:00:00 2001 From: Joen A <1204802+jasmussen@users.noreply.github.com> Date: Fri, 26 Apr 2024 15:14:03 +0200 Subject: [PATCH] Unify placeholders (#59275) * 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 --- .../block-variation-picker/content.scss | 94 +++++-------------- .../block-variation-picker/index.js | 5 +- .../components/media-placeholder/content.scss | 11 --- .../src/components/media-placeholder/index.js | 6 +- packages/block-library/src/columns/edit.js | 1 + .../block-library/src/columns/variations.js | 46 +++------ packages/block-library/src/embed/editor.scss | 2 - .../src/embed/embed-placeholder.js | 30 ++++-- packages/block-library/src/group/editor.scss | 47 ---------- .../block-library/src/group/placeholder.js | 36 +++---- .../src/post-featured-image/editor.scss | 1 + .../block-library/src/site-logo/editor.scss | 1 + packages/components/CHANGELOG.md | 1 + .../components/src/placeholder/style.scss | 46 +++------ 14 files changed, 95 insertions(+), 232 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/content.scss b/packages/block-editor/src/components/block-variation-picker/content.scss index 882e2748f6c92..e4636f288078d 100644 --- a/packages/block-editor/src/components/block-variation-picker/content.scss +++ b/packages/block-editor/src/components/block-variation-picker/content.scss @@ -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 @@ -422,7 +422,7 @@ export function MediaPlaceholder( { @@ -435,7 +435,7 @@ export function MediaPlaceholder( { const defaultButton = ( { open } ) => { return ( { ' ' } - - + + { ' ' } + + + ) } ); diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 7ea432f30f016..076d7a1881085 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -53,50 +53,3 @@ } } -.wp-block-group__placeholder { - .wp-block-group-placeholder__variations { - list-style: none; - display: flex; - justify-content: center; - flex-direction: row; - flex-wrap: wrap; - width: 100%; - padding: 0; - margin: 0; - } - .components-placeholder__instructions { - margin-bottom: 18px; - } - .wp-block-group-placeholder__variations svg { - fill: $gray-400 !important; - } - .wp-block-group-placeholder__variations svg:hover { - fill: var(--wp-admin-theme-color) !important; - } - .wp-block-group-placeholder__variations > li { - margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15; - width: auto; - display: flex; - flex-direction: column; - align-items: center; - } - .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button { - width: 44px; - height: 32px; - padding: 0; - &:hover { - box-shadow: none; - } - } - .components-placeholder { - min-height: auto; - padding: $grid-unit-30; - align-items: center; - } - .is-small, - .is-medium { - .wp-block-group-placeholder__variations > li { - margin: $grid-unit-15; - } - } -} diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js index 16a99a9287338..ed3e53c3eb2b9 100644 --- a/packages/block-library/src/group/placeholder.js +++ b/packages/block-library/src/group/placeholder.js @@ -20,42 +20,41 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => { group: ( - + ), 'group-row': ( - + ), 'group-stack': ( - + ), 'group-grid': ( - - + ), }; @@ -159,11 +158,12 @@ function GroupPlaceHolder( { name, onSelect } ) { { variations.map( ( variation ) => (