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 882e2748f6c92c..e4636f288078d3 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 7ea432f30f0168..076d7a18810853 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 16a99a9287338d..ed3e53c3eb2b9c 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 ) => (