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 to center
- // icon horizontally.
- justify-content: center;
- width: auto;
-
- &.is-secondary {
- background-color: $white;
- }
- }
-
- &.components-button {
- // Override default styles inherited from 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;
}
}
+
diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index 6fbad1aab612d3..85cf2b37f8a4aa 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -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,
@@ -42,7 +42,8 @@ function BlockVariationPicker( {
{ variations.map( ( variation ) => (
@@ -422,7 +422,7 @@ export function MediaPlaceholder( {
@@ -435,7 +435,7 @@ export function MediaPlaceholder( {
const defaultButton = ( { open } ) => {
return (