Skip to content

Commit 200fd02

Browse files
bfintalbfintal
authored
Feat: Added layout switcher (#2173)
* added layout picker * fixed hero layout when switching * fixed some layouts for switching
1 parent 795225b commit 200fd02

File tree

23 files changed

+563
-200
lines changed

23 files changed

+563
-200
lines changed

‎src/block/accordion/edit.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,20 @@ const Edit = props => {
8080
setIsOpen( ! isOpen )
8181
}
8282
}
83-
headerEl.addEventListener( 'click', onClick )
83+
headerEl?.addEventListener( 'click', onClick )
8484
return () => {
85-
headerEl.removeEventListener( 'click', onClick )
85+
headerEl?.removeEventListener( 'click', onClick )
8686
}
8787
}, [ clientId, isOpen, setIsOpen, hasInitClickHandler ] )
8888

89+
// If the className changes (e.g. layout switch), we need to re-apply the
90+
// Accordion open/close click handler.
91+
useEffect( () => {
92+
if ( hasInitClickHandler ) {
93+
setHasInitClickHandler( false )
94+
}
95+
}, [ props.className ] )
96+
8997
// When first adding an accordion, the inner blocks may not be rendered yet, wait for it.
9098
if ( ! hasInitClickHandler ) {
9199
const headerEl = document.querySelector( `[data-block="${ clientId }"] [data-type="stackable/column"]` )

‎src/block/accordion/variations.js‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,14 @@ const variations = applyFilters(
3232
[
3333
{
3434
name: 'default',
35-
title: __( 'Default', i18n ),
36-
icon: ImageDefault,
3735
isDefault: true,
3836
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Default', i18n ) ),
37+
attributes: {
38+
className: 'is-style-default',
39+
},
40+
isActive: [ 'className' ],
41+
pickerTitle: __( 'Default', i18n ),
42+
pickerIcon: ImageDefault,
3943
innerBlocks: [
4044
[ 'stackable/column', {
4145
templateLock: 'insert', hasContainer: true, htmlTag: 'summary',
@@ -61,10 +65,9 @@ const variations = applyFilters(
6165
},
6266
{
6367
name: 'plain',
64-
title: __( 'Plain', i18n ),
6568
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Plain', i18n ) ),
66-
icon: ImagePlain,
6769
attributes: {
70+
className: 'is-style-plain',
6871
blockBorderType: 'solid',
6972
blockBorderColor: '#dfdad1',
7073
blockBorderWidth: {
@@ -74,6 +77,9 @@ const variations = applyFilters(
7477
top: '', right: '', bottom: 24, left: '',
7578
},
7679
},
80+
isActive: [ 'className' ],
81+
pickerTitle: __( 'Plain', i18n ),
82+
pickerIcon: ImagePlain,
7783
innerBlocks: [
7884
[ 'stackable/column', {
7985
templateLock: 'insert', htmlTag: 'summary',
@@ -105,25 +111,28 @@ const variations = applyFilters(
105111
},
106112
{
107113
name: 'shadow',
108-
title: __( 'Shadow', i18n ),
109114
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Shadow', i18n ) ),
110-
icon: ImageShadow,
115+
isActive: [ 'className' ],
116+
pickerTitle: __( 'Shadow', i18n ),
117+
pickerIcon: ImageShadow,
111118
isPremium: ! isPro,
112119
scope: [ 'block' ],
113120
},
114121
{
115122
name: 'colored',
116-
title: __( 'Colored', i18n ),
117123
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Colored', i18n ) ),
118-
icon: ImageColored,
124+
isActive: [ 'className' ],
125+
pickerTitle: __( 'Colored', i18n ),
126+
pickerIcon: ImageColored,
119127
isPremium: ! isPro,
120128
scope: [ 'block' ],
121129
},
122130
{
123131
name: 'plus',
124-
title: __( 'Plus', i18n ),
125132
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Plus', i18n ) ),
126-
icon: ImagePlus,
133+
isActive: [ 'className' ],
134+
pickerTitle: __( 'Plus', i18n ),
135+
pickerIcon: ImagePlus,
127136
isPremium: ! isPro,
128137
scope: [ 'block' ],
129138
},

‎src/block/blockquote/variations.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,16 @@ const variations = applyFilters(
3232
[
3333
{
3434
name: 'default',
35-
title: __( 'Default', i18n ),
3635
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Default', i18n ) ),
3736
isDefault: true,
38-
icon: ImageDefault,
3937
attributes: {
38+
className: 'is-style-default',
4039
hasContainer: true,
40+
contentAlign: 'left',
4141
},
42+
isActive: [ 'className' ],
43+
pickerTitle: __( 'Default', i18n ),
44+
pickerIcon: ImageDefault,
4245
innerBlocks: [
4346
[ 'stackable/icon', { icon: renderToString( <SVGDefaultQuote /> ), linkHasLink: false } ],
4447
[ 'stackable/text', {
@@ -49,9 +52,14 @@ const variations = applyFilters(
4952
},
5053
{
5154
name: 'simple',
52-
title: __( 'Simple', i18n ),
5355
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Simple', i18n ) ),
54-
icon: ImageSimple,
56+
attributes: {
57+
className: 'is-style-simple',
58+
contentAlign: 'left',
59+
},
60+
isActive: [ 'className' ],
61+
pickerTitle: __( 'Simple', i18n ),
62+
pickerIcon: ImageSimple,
5563
innerBlocks: [
5664
[ 'stackable/icon', {
5765
icon: renderToString( <SVGDefaultQuote /> ),
@@ -71,25 +79,28 @@ const variations = applyFilters(
7179
},
7280
{
7381
name: 'highlighted',
74-
title: __( 'Highlighted', i18n ),
7582
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Highlighted', i18n ) ),
76-
icon: ImageHighlighted,
83+
isActive: [ 'className' ],
84+
pickerTitle: __( 'Highlighted', i18n ),
85+
pickerIcon: ImageHighlighted,
7786
isPremium: ! isPro,
7887
scope: [ 'block' ],
7988
},
8089
{
8190
name: 'huge',
82-
title: __( 'Huge', i18n ),
8391
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Huge', i18n ) ),
84-
icon: ImageHuge,
92+
isActive: [ 'className' ],
93+
pickerTitle: __( 'Huge', i18n ),
94+
pickerIcon: ImageHuge,
8595
isPremium: ! isPro,
8696
scope: [ 'block' ],
8797
},
8898
{
8999
name: 'centered-quote',
90-
title: __( 'Centered Quote', i18n ),
91100
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Centered Quote', i18n ) ),
92-
icon: ImageCenteredQuote,
101+
isActive: [ 'className' ],
102+
pickerTitle: __( 'Centered Quote', i18n ),
103+
pickerIcon: ImageCenteredQuote,
93104
isPremium: ! isPro,
94105
scope: [ 'block' ],
95106
},

‎src/block/button-group/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const settings = applyFilters( 'stackable.block.metadata', {
3737
supports: {
3838
anchor: true,
3939
align: [ 'center', 'wide', 'full' ],
40+
stkLayoutReset: false,
4041
},
4142
variations,
4243

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

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@ const variations = applyFilters(
3030
[
3131
{
3232
name: 'default',
33-
title: __( 'Default', i18n ),
3433
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Default', i18n ) ),
3534
isDefault: true,
36-
icon: ImageDefault,
3735
attributes: {
36+
className: 'is-style-default',
3837
hasContainer: true,
3938
},
39+
isActive: [ 'className' ],
40+
pickerTitle: __( 'Default', i18n ),
41+
pickerIcon: ImageDefault,
4042
innerBlocks: [
4143
[ 'stackable/heading', { text: _x( 'Title for This Block', 'Heading placeholder', i18n ), textTag: 'h3' } ],
4244
[ 'stackable/text', { text: _x( 'Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.', 'Content placeholder', i18n ) } ],
@@ -48,9 +50,7 @@ const variations = applyFilters(
4850
},
4951
{
5052
name: 'horizontal',
51-
title: __( 'Horizontal', i18n ),
5253
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal', i18n ) ),
53-
icon: ImageHorizontal,
5454
attributes: {
5555
className: 'is-style-horizontal',
5656
hasContainer: true,
@@ -59,6 +59,9 @@ const variations = applyFilters(
5959
innerBlockVerticalAlign: 'center',
6060
align: 'wide',
6161
},
62+
isActive: [ 'className' ],
63+
pickerTitle: __( 'Horizontal', i18n ),
64+
pickerIcon: ImageHorizontal,
6265
innerBlocks: [
6366
[ 'stackable/heading', { text: _x( 'Title for This Block', 'Heading placeholder', i18n ), textTag: 'h3' } ],
6467
[ 'stackable/text', { text: _x( 'Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.', 'Content placeholder', i18n ) } ],
@@ -70,25 +73,28 @@ const variations = applyFilters(
7073
},
7174
{
7275
name: 'horizontal-2',
73-
title: __( 'Horizontal 2', i18n ),
7476
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal 2', i18n ) ),
75-
icon: ImageHorizontal2,
77+
isActive: [ 'className' ],
78+
pickerTitle: __( 'Horizontal 2', i18n ),
79+
pickerIcon: ImageHorizontal2,
7680
isPremium: ! isPro,
7781
scope: [ 'block' ],
7882
},
7983
{
8084
name: 'horizontal-3',
81-
title: __( 'Horizontal 3', i18n ),
8285
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal 3', i18n ) ),
83-
icon: ImageHorizontal3,
86+
isActive: [ 'className' ],
87+
pickerTitle: __( 'Horizontal 3', i18n ),
88+
pickerIcon: ImageHorizontal3,
8489
isPremium: ! isPro,
8590
scope: [ 'block' ],
8691
},
8792
{
8893
name: 'split-centered',
89-
title: __( 'Split Centered', i18n ),
9094
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Split Centered', i18n ) ),
91-
icon: ImageSplitCentered,
95+
isActive: [ 'className' ],
96+
pickerTitle: __( 'Split Centered', i18n ),
97+
pickerIcon: ImageSplitCentered,
9298
isPremium: ! isPro,
9399
scope: [ 'block' ],
94100
},

‎src/block/card/variations.js‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,15 @@ const variations = applyFilters(
3030
[
3131
{
3232
name: 'default',
33-
title: __( 'Default', i18n ),
3433
isDefault: true,
3534
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Default', i18n ) ),
3635
attributes: {
3736
className: 'is-style-default',
37+
hasContainer: true,
3838
},
39-
icon: ImageDefault,
39+
isActive: [ 'className' ],
40+
pickerTitle: __( 'Default', i18n ),
41+
pickerIcon: ImageDefault,
4042
innerBlocks: [
4143
[ 'stackable/heading', {} ],
4244
[ 'stackable/subtitle', { text: _x( 'Subtitle for This Block', 'Subtitle placeholder', i18n ) } ],
@@ -49,13 +51,15 @@ const variations = applyFilters(
4951
},
5052
{
5153
name: 'default-2',
52-
title: __( 'Default 2', i18n ),
5354
isDefault: true,
5455
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Default 2', i18n ) ),
5556
attributes: {
5657
className: 'is-style-default-2',
58+
hasContainer: true,
5759
},
58-
icon: ImageDefault2,
60+
isActive: [ 'className' ],
61+
pickerTitle: __( 'Default 2', i18n ),
62+
pickerIcon: ImageDefault2,
5963
innerBlocks: [
6064
[ 'stackable/heading', {} ],
6165
[ 'stackable/text', { text: _x( 'Description for this block. Use this space for describing your block. Any text will do. Description for this block. You can use this space for describing your block.', 'Content placeholder', i18n ) } ],
@@ -117,25 +121,28 @@ const variations = applyFilters(
117121
},
118122
{
119123
name: 'horizontal',
120-
title: __( 'Horizontal', i18n ),
121124
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Horizontal', i18n ) ),
122-
icon: ImageHorizontal,
125+
pickerTitle: __( 'Horizontal', i18n ),
126+
pickerIcon: ImageHorizontal,
127+
isActive: [ 'className' ],
123128
isPremium: ! isPro,
124129
scope: [ 'block' ],
125130
},
126131
{
127132
name: 'full',
128-
title: __( 'Full', i18n ),
129133
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Full', i18n ) ),
130-
icon: ImageFull,
134+
pickerTitle: __( 'Full', i18n ),
135+
pickerIcon: ImageFull,
136+
isActive: [ 'className' ],
131137
isPremium: ! isPro,
132138
scope: [ 'block' ],
133139
},
134140
{
135141
name: 'faded',
136-
title: __( 'Faded', i18n ),
137142
description: sprintf( _x( '%s Layout', 'Block layout name', i18n ), __( 'Faded', i18n ) ),
138-
icon: ImageFaded,
143+
pickerTitle: __( 'Faded', i18n ),
144+
pickerIcon: ImageFaded,
145+
isActive: [ 'className' ],
139146
isPremium: ! isPro,
140147
scope: [ 'block' ],
141148
},

‎src/block/columns/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const settings = applyFilters( 'stackable.block.metadata', {
3131
anchor: true,
3232
align: [ 'center', 'wide', 'full' ],
3333
stkAlign: true,
34+
stkLayoutReset: false,
3435
},
3536
example,
3637

0 commit comments

Comments
 (0)