fix (variation picker): attributes not present in free version (#2178)

* fix (variation picker): attributes not present in free version

* Add `attribute` property to each variations for blocks that have
variations. The `attribute` property defines a `className` property that
is the variation name prefixed with 'is-style-'. This determines if a
variation is active.

* className typo

* Add missing attribue property to variations.

* Update float variation className.

* Correct className for interted-vertical variation of testimonial block.

* Remove extraneous whitespace.

Co-authored-by: Marco Enrico <[email protected]>

Author: bfintal

src/block/accordion/variations.js

@@ -112,6 +112,9 @@ const variations = applyFilters(
 		{
 			name: 'shadow',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Shadow', i18n ) ),
+			attributes: {
+				className: 'is-style-shadow',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Shadow', i18n ),
 			pickerIcon: ImageShadow,
@@ -121,6 +124,9 @@ const variations = applyFilters(
 		{
 			name: 'colored',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Colored', i18n ) ),
+			attributes: {
+				className: 'is-style-colored',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Colored', i18n ),
 			pickerIcon: ImageColored,
@@ -130,6 +136,9 @@ const variations = applyFilters(
 		{
 			name: 'plus',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Plus', i18n ) ),
+			attributes: {
+				className: 'is-style-plus',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Plus', i18n ),
 			pickerIcon: ImagePlus,

src/block/blockquote/variations.js

@@ -80,6 +80,9 @@ const variations = applyFilters(
 		{
 			name: 'highlighted',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Highlighted', i18n ) ),
+			attributes: {
+				className: 'is-style-highlighted',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Highlighted', i18n ),
 			pickerIcon: ImageHighlighted,
@@ -89,6 +92,9 @@ const variations = applyFilters(
 		{
 			name: 'huge',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Huge', i18n ) ),
+			attributes: {
+				className: 'is-style-huge',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Huge', i18n ),
 			pickerIcon: ImageHuge,
@@ -98,6 +104,9 @@ const variations = applyFilters(
 		{
 			name: 'centered-quote',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Centered Quote', i18n ) ),
+			attributes: {
+				className: 'is-style-centered-quote',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Centered Quote', i18n ),
 			pickerIcon: ImageCenteredQuote,

src/block/call-to-action/variations.js

@@ -74,6 +74,9 @@ const variations = applyFilters(
 		{
 			name: 'horizontal-2',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal 2', i18n ) ),
+			attributes: {
+				className: 'is-style-horizontal-2',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Horizontal 2', i18n ),
 			pickerIcon: ImageHorizontal2,
@@ -83,6 +86,9 @@ const variations = applyFilters(
 		{
 			name: 'horizontal-3',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal 3', i18n ) ),
+			attributes: {
+				className: 'is-style-horizontal-3',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Horizontal 3', i18n ),
 			pickerIcon: ImageHorizontal3,
@@ -92,6 +98,9 @@ const variations = applyFilters(
 		{
 			name: 'split-centered',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Split Centered', i18n ) ),
+			attributes: {
+				className: 'is-style-split-centered',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Split Centered', i18n ),
 			pickerIcon: ImageSplitCentered,

src/block/card/variations.js

@@ -122,6 +122,9 @@ const variations = applyFilters(
 		{
 			name: 'horizontal',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal', i18n ) ),
+			attributes: {
+				className: 'is-style-horizontal',
+			},
 			pickerTitle: __( 'Horizontal', i18n ),
 			pickerIcon: ImageHorizontal,
 			isActive: [ 'className' ],
@@ -131,6 +134,9 @@ const variations = applyFilters(
 		{
 			name: 'full',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Full', i18n ) ),
+			attributes: {
+				className: 'is-style-full',
+			},
 			pickerTitle: __( 'Full', i18n ),
 			pickerIcon: ImageFull,
 			isActive: [ 'className' ],
@@ -140,6 +146,9 @@ const variations = applyFilters(
 		{
 			name: 'faded',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Faded', i18n ) ),
+			attributes: {
+				className: 'is-style-faded',
+			},
 			pickerTitle: __( 'Faded', i18n ),
 			pickerIcon: ImageFaded,
 			isActive: [ 'className' ],

src/block/feature-grid/variations.js

@@ -92,7 +92,7 @@ const variations = applyFilters(
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Float', i18n ) ),
 			attributes: {
 				innerBlockContentAlign: 'alignwide',
-				className: 'is-style-horizontal',
+				className: 'is-style-float',
 				align: 'full',
 			},
 			isActive: [ 'className' ],
@@ -165,6 +165,9 @@ const variations = applyFilters(
 		{
 			name: 'horizontal',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal', i18n ) ),
+			attributes: {
+				className: 'is-style-horizontal',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Horizontal', i18n ),
 			pickerIcon: ImageHorizontal,
@@ -174,6 +177,9 @@ const variations = applyFilters(
 		{
 			name: 'large-mid',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Large Mid', i18n ) ),
+			attributes: {
+				className: 'is-style-large-mid',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Large Mid', i18n ),
 			pickerIcon: ImageLargeMid,
@@ -183,6 +189,9 @@ const variations = applyFilters(
 		{
 			name: 'offset',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Offset', i18n ) ),
+			attributes: {
+				className: 'is-style-offset',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Offset', i18n ),
 			pickerIcon: ImageOffset,
@@ -192,6 +201,9 @@ const variations = applyFilters(
 		{
 			name: 'zigzag',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Zizag', i18n ) ),
+			attributes: {
+				className: 'is-style-zigzag',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Zigzag', i18n ),
 			pickerIcon: ImageZigZag,

src/block/feature/variations.js

@@ -94,6 +94,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-shape-1',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Shape 1', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-shape-1',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Shape 1', i18n ),
 			pickerIcon: ImageOverlapShape1,
@@ -103,6 +106,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-shape-2',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Shape 2', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-shape-2',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Shape 2', i18n ),
 			pickerIcon: ImageOverlapShape2,
@@ -112,6 +118,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-shape-3',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Shape 3', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-shape-3',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Shape 3', i18n ),
 			pickerIcon: ImageOverlapShape3,
@@ -121,6 +130,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-shape-4',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Shape 4', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-shape-4',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Shape 4', i18n ),
 			pickerIcon: ImageOverlapShape4,
@@ -130,6 +142,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-shape-5',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Shape 5', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-shape-5',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Shape 5', i18n ),
 			pickerIcon: ImageOverlapShape5,
@@ -139,6 +154,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-background-1',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Background 1', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-background-1',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Background 1', i18n ),
 			pickerIcon: ImageOverlapBg1,
@@ -148,6 +166,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-background-2',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Background 2', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-background-2',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Background 2', i18n ),
 			pickerIcon: ImageOverlapBg2,
@@ -157,6 +178,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-background-3',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Background 3', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-background-3',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Background 3', i18n ),
 			pickerIcon: ImageOverlapBg3,
@@ -166,6 +190,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-background-4',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Background 4', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-background-4',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Background 4', i18n ),
 			pickerIcon: ImageOverlapBg4,
@@ -175,6 +202,9 @@ const variations = applyFilters(
 		{
 			name: 'overlap-background-5',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Overlap Background 5', i18n ) ),
+			attributes: {
+				className: 'is-style-overlap-background-5',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Overlap Background 5', i18n ),
 			pickerIcon: ImageOverlapBg5,

src/block/hero/variations.js

@@ -109,6 +109,9 @@ const variations = applyFilters(
 		{
 			name: 'half-overlay',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Half Overlay', i18n ) ),
+			attributes: {
+				className: 'is-style-half-overlay',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Half Overlay', i18n ),
 			pickerIcon: ImageHalfOverlay,
@@ -118,6 +121,9 @@ const variations = applyFilters(
 		{
 			name: 'center-overlay',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Center Overlay', i18n ) ),
+			attributes: {
+				className: 'is-style-center-overlay',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Center Overlay', i18n ),
 			pickerIcon: ImageCenterOverlay,
@@ -127,6 +133,9 @@ const variations = applyFilters(
 		{
 			name: 'side-overlay',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Side Overlay', i18n ) ),
+			attributes: {
+				className: 'is-style-side-overlay',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Side Overlay', i18n ),
 			pickerIcon: ImageSideOverlay,
@@ -136,6 +145,9 @@ const variations = applyFilters(
 		{
 			name: 'half',
 			description: __( 'Half Layout', i18n ),
+			attributes: {
+				className: 'is-style-half',
+			},
 			isActive: [ 'className' ],
 			pickerTitle: __( 'Half', i18n ),
 			pickerIcon: ImageHalf,

src/block/image-box/variations.js

@@ -140,6 +140,9 @@ const variations = applyFilters(
 		{
 			name: 'box',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Box', i18n ) ),
+			attributes: {
+				className: 'is-style-box',
+			},
 			pickerTitle: __( 'Box', i18n ),
 			pickerIcon: ImageBox,
 			isActive: [ 'className' ],
@@ -149,6 +152,9 @@ const variations = applyFilters(
 		{
 			name: 'captioned',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Captioned', i18n ) ),
+			attributes: {
+				className: 'is-style-captioned',
+			},
 			pickerTitle: __( 'Captioned', i18n ),
 			pickerIcon: ImageCaptioned,
 			isActive: [ 'className' ],
@@ -158,6 +164,9 @@ const variations = applyFilters(
 		{
 			name: 'fade',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Fade', i18n ) ),
+			attributes: {
+				className: 'is-style-fade',
+			},
 			pickerTitle: __( 'Fade', i18n ),
 			pickerIcon: ImageFade,
 			isActive: [ 'className' ],
@@ -167,6 +176,9 @@ const variations = applyFilters(
 		{
 			name: 'line',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Line', i18n ) ),
+			attributes: {
+				className: 'is-style-line',
+			},
 			pickerTitle: __( 'Line', i18n ),
 			pickerIcon: ImageLine,
 			isActive: [ 'className' ],

src/block/notification/variations.js

@@ -117,6 +117,9 @@ const variations = applyFilters(
 		{
 			name: 'side',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Side', i18n ) ),
+			attributes: {
+				className: 'is-style-side',
+			},
 			pickerTitle: __( 'Side', i18n ),
 			pickerIcon: ImageSide,
 			isActive: [ 'className' ],
@@ -126,6 +129,9 @@ const variations = applyFilters(
 		{
 			name: 'bordered',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Bordered', i18n ) ),
+			attributes: {
+				className: 'is-style-bordered',
+			},
 			pickerTitle: __( 'Bordered', i18n ),
 			pickerIcon: ImageBordered,
 			isActive: [ 'className' ],
@@ -135,6 +141,9 @@ const variations = applyFilters(
 		{
 			name: 'outlined',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Outlined', i18n ) ),
+			attributes: {
+				className: 'is-style-outlined',
+			},
 			pickerTitle: __( 'Outlined', i18n ),
 			pickerIcon: ImageOutlined,
 			isActive: [ 'className' ],
@@ -144,6 +153,9 @@ const variations = applyFilters(
 		{
 			name: 'large-icon',
 			description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Large Icon', i18n ) ),
+			attributes: {
+				className: 'is-style-large-icon',
+			},
 			pickerTitle: __( 'Large Icon', i18n ),
 			pickerIcon: ImageLargeIcon,
 			isActive: [ 'className' ],