Skip to content

Commit a759fd9

Browse files
bfintalArukuenkaeizenCopilot
authored
feat: size and spacing steps (#3452)
* feat: size and spacing steps * working range with steps * fix: remove extra assignment * feat: add markmode in four range control * feat: apply preset controls to fontSize, padding, margin, height * feat: generate global css for presets * feat: size and spacing steps * working range with steps * fix: remove extra assignment * feat: add markmode in four range control * feat: apply preset controls to fontSize, padding, margin, height * feat: generate global css for presets * fix: apply generated css * fix: make fontSizes string to store CSS variables * fix: add default to prioritization * feat: support for custom presets * feat: dynamically add styles in editor * feat: dynamically add styles in editor with editor loader * fix: get current marked value, go to markmode * fix: css generation should consider custom, by each preset, not by property * fix: add additional functionalities to usePresetControls * fix: allow AdvancedRangeControl to set custom onReset * fix: do not add style for discarded presets * fix: add comments, title in generated css * fix: FourRangeControl markmode and initial value * feat: add row and column gap * feat: add blockHeight and borderRadius * feat: add blockHeight and borderRadius loader * fix: editorLoader merge * feat: Use Global Typography sizes as preset * feat: add vertical/horizontal to mark mode for four range * fix: removing of unit picker according to four range mode * fix: useTypographyAsPresets reactivity * feat: initial init * fix: separate none and custom, fix issue with setting to none * fix: selecting font pair/type scale overwritting previous changes * chore: move other functions to utils * fix: only get the new style for onChange, since changeStyle now handles merging * fix: set the value when changing from mark to custom * fix: typography min and max slider for rem * fix: use only "var" in detecting CSS variable * fix: FourRangeControl synchronization of markmode; default markmode * feat: add none presets to padding and margin similar to native * fix: use extractNumbersAndUnits that can process clamp, min, etc. * fix: add rem support to allow custom mode to have values when switching, convert from rem if only has px support * feat: support mimic/clamping by using WP generated presets * fix: global preset control title * feat: apply body to html * fix: add margin to apply html toggle * fix: remove hasCSSVariableValue, always assume that marks has string value * fix: get_option is never null * fix: use wp_json_file_decode * fix: remove JSON stringify since customPresets is just an array * fix: separate loading of presets in another function * fix: use wp_style_engine_get_stylesheet_from_css_rules to generate styles * fix: translate only the words * fix: move updating presets with typography to editor loader * fix: add typography deprecation for font size * fix: add block height deprecations * fix: add row and column gaps deprecations * fix: add row and column gaps deprecations * tweaked premium notice wording * fix: still match previous value even the custom values changes * fix: implement presets in the design system; fix issues with reactivity, variable type, units, etc. * fix: typography font size steps * fix: sync mark mode * fix: sync state when succeeding call to change styles * fixed value preview * fix: error in getting css var name * feat: add use size preset by default option * added more descriptive text * temporarily skip since the test breaks now * fix: two-way value conversion between preset and custom mode * version bump to 3.16.0 for the default option to kick in * version bump to 3.16.0 for the default option to kick in * prevent errors if upgrading and value is a number * optimized to prevent repetitive calls * fix: update markmode when changing device type * fix: move use size presets by default to editor settings * fix: saving of new typography * fix: only cofirm when font family is changed * fix: clean style object for comparison * update test for global typography * fix: remove unused hasCSSVariableValue * fix: add inner column spacing presets * fix: add inner column > inner column spacing presets * fix: also clean typography style for consistency * fix: consider unit conversion during two-way value conversion between preset and custom mode * fix: consider unit conversion during two-way value conversion between preset and custom mode * fix: remove placeholder for custom css in number input * fix: add fallback tooltip for theme.json data with no name like blocksy * fix: bug fixes * fix: bug fix * fix: four range reactivity * fix: do not actually change value when switching mode * fix: add presets to contentHeight and innerBlockRowGap * fix: add deprecation code to affected blocks, including removing V4 * fix: bump attribute added version to 3.16.0 and migration version to 3.15.3 * Added translation Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: [email protected] <> Co-authored-by: Alquen Sarmiento <[email protected]> Co-authored-by: Mikhaela Tapia <[email protected]> Co-authored-by: Copilot <[email protected]>
1 parent 084fd6c commit a759fd9

File tree

102 files changed

+3949
-338
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

102 files changed

+3949
-338
lines changed

‎e2e/tests/global-settings.spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,26 +85,26 @@ test.describe( 'Global Settings', () => {
8585
await page.getByLabel( 'Stackable Settings' ).click()
8686
await page.getByRole( 'button', { name: 'Global Typography' } ).click()
8787

88-
// Set Global Typography Styles of Heading 2 to have a font-size of 32
88+
// Set Global Typography Styles of Heading 2 to have a text-transform uppercase
8989
await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
90-
await page.locator( '.stk-popover .components-base-control:nth-of-type(2)', { hasText: /Size/ } ).getByRole( 'textbox' ).fill( '32' )
90+
await page.locator( '.stk-popover .components-base-control:nth-of-type(4)', { hasText: /Transform/ } ).getByRole( 'listbox' ).selectOption( 'uppercase' )
9191
await page.locator( '.ugb-global-settings-typography-control' ).nth( 1 ).locator( '.components-base-control__field > .ugb-button-icon-control__wrapper > .components-button' ).click()
9292

93-
// Verify if the Heading 2 in Global Typography Styles has correct font size
94-
await expect( page.getByRole( 'heading', { name: 'Heading 2' } ) ).toHaveCSS( 'font-size', '32px' )
93+
// Verify if the Heading 2 in Global Typography Styles has correct text-transform
94+
await expect( page.getByRole( 'heading', { name: 'Heading 2' } ) ).toHaveCSS( 'text-transform', 'uppercase' )
9595

9696
// Open Block Settings
9797
await page.getByLabel( 'Settings', { exact: true } ).click()
9898

99-
// Check if the added Stackable Heading Block has a font-size of 32
99+
// Check if the added Stackable Heading Block has a text-transform uppercase
100100
editor.insertBlock( {
101101
name: 'stackable/heading',
102102
attributes: {
103103
text: 'test',
104104
},
105105
} )
106106

107-
await expect( editor.canvas.locator( '[data-type="stackable/heading"] > .stk-block-heading > h2[role="textbox"]' ) ).toHaveCSS( 'font-size', '32px' )
107+
await expect( editor.canvas.locator( '[data-type="stackable/heading"] > .stk-block-heading > h2[role="textbox"]' ) ).toHaveCSS( 'text-transform', 'uppercase' )
108108

109109
// Reset Global Typography Styles
110110
await page.getByLabel( 'Stackable Settings' ).click()

‎plugin.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* Author: Gambit Technologies, Inc
77
* Author URI: http://gambit.ph
88
* Text Domain: stackable-ultimate-gutenberg-blocks
9-
* Version: 3.15.3
9+
* Version: 3.16.0
1010
*
1111
* @package Stackable
1212
*/
@@ -24,7 +24,7 @@
2424

2525
defined( 'STACKABLE_SHOW_PRO_NOTICES' ) || define( 'STACKABLE_SHOW_PRO_NOTICES', true );
2626
defined( 'STACKABLE_BUILD' ) || define( 'STACKABLE_BUILD', 'free' );
27-
defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.15.3' );
27+
defined( 'STACKABLE_VERSION' ) || define( 'STACKABLE_VERSION', '3.16.0' );
2828
defined( 'STACKABLE_FILE' ) || define( 'STACKABLE_FILE', __FILE__ );
2929
defined( 'STACKABLE_I18N' ) || define( 'STACKABLE_I18N', 'stackable-ultimate-gutenberg-blocks' ); // Plugin slug.
3030
defined( 'STACKABLE_DESIGN_LIBRARY_URL' ) || define( 'STACKABLE_DESIGN_LIBRARY_URL', 'https://storage.googleapis.com/stackable-plugin-assets' ); // Design Library CDN URL
@@ -235,6 +235,7 @@ function is_frontend() {
235235
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
236236
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );
237237
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/color-schemes/index.php' );
238+
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/preset-controls/index.php' );
238239
require_once( plugin_dir_path( __FILE__ ) . 'src/custom-block-styles.php' );
239240
require_once( plugin_dir_path( __FILE__ ) . 'src/css-optimize.php' );
240241
require_once( plugin_dir_path( __FILE__ ) . 'src/compatibility/index.php' );

‎src/block-components/alignment/attributes.js‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
export const addAttributes = attrObject => {
1+
import { deprecatedAddAttributes } from './deprecated/index'
2+
3+
export const addAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
4+
deprecatedAddAttributes( attrObject, attrNameTemplate )
5+
26
// Assume that the block uses the BlockDiv Block Component and has a
37
// uniqueId attribute
48
attrObject.add( {
@@ -53,13 +57,26 @@ export const addAttributes = attrObject => {
5357
type: 'number',
5458
default: '',
5559
},
60+
},
61+
versionAdded: '3.0.0',
62+
versionDeprecated: '',
63+
} )
64+
65+
attrObject.add( {
66+
attributes: {
5667
innerBlockRowGap: {
5768
stkResponsive: true,
58-
type: 'number',
69+
type: 'string',
70+
default: '',
71+
},
72+
containerHeight: {
73+
stkResponsive: true,
74+
type: 'string',
5975
default: '',
6076
},
6177
},
62-
versionAdded: '3.0.0',
78+
attrNameTemplate,
79+
versionAdded: '3.16.0',
6380
versionDeprecated: '',
6481
} )
6582
}

‎src/block-components/alignment/deprecated/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { getAttrNameFunction } from '~stackable/util'
2+
3+
export const deprecatedAddAttributes = ( attrObject, attrNameTemplate = '%s' ) => {
4+
attrObject.add( {
5+
attributes: {
6+
innerBlockRowGap: {
7+
stkResponsive: true,
8+
type: 'number',
9+
default: '',
10+
},
11+
},
12+
attrNameTemplate,
13+
versionAdded: '3.0.0',
14+
versionDeprecated: '3.16.0',
15+
} )
16+
}
17+
18+
export const deprecateInnerBlockRowGapAndContainerHeight = {
19+
isEligible: attrNameTemplate => attributes => {
20+
const getAttrName = getAttrNameFunction( attrNameTemplate )
21+
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
22+
23+
const containerHeight = getAttribute( 'containerHeight' )
24+
const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
25+
26+
return typeof containerHeight === 'number' || typeof innerBlockRowGap === 'number'
27+
},
28+
migrate: attrNameTemplate => attributes => {
29+
const getAttrName = getAttrNameFunction( attrNameTemplate )
30+
const getAttribute = _attrName => attributes[ getAttrName( _attrName ) ]
31+
32+
const containerHeight = getAttribute( 'containerHeight' )
33+
const innerBlockRowGap = getAttribute( 'innerBlockRowGap' )
34+
35+
const newAttributes = {
36+
...attributes,
37+
[ getAttrName( 'containerHeight' ) ]: String( containerHeight ),
38+
[ getAttrName( 'innerBlockRowGap' ) ]: String( innerBlockRowGap ),
39+
}
40+
41+
return newAttributes
42+
},
43+
}
44+

‎src/block-components/alignment/edit.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
useBlockAttributesContext,
1414
useBlockSetAttributesContext,
1515
useDeviceType,
16+
usePresetControls,
1617
} from '~stackable/hooks'
1718

1819
/**
@@ -86,6 +87,9 @@ export const Edit = memo( props => {
8687
enableContentAlign = true,
8788
} = props
8889

90+
const blockHeightMarks = usePresetControls( 'blockHeights' )?.getPresetMarks() || null
91+
const spacingSizeMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
92+
8993
const containerSize = props.hasContainerSize && <>
9094
<ControlSeparator />
9195
{ props.hasContainerHeight &&
@@ -100,6 +104,7 @@ export const Edit = memo( props => {
100104
allowReset={ true }
101105
placeholder="0"
102106
visualGuide={ { selector: '.stk-%s-container', highlight: 'outline' } }
107+
marks={ blockHeightMarks }
103108
/>
104109
}
105110
<AdvancedRangeControl
@@ -331,6 +336,7 @@ export const Edit = memo( props => {
331336
highlight: 'row-gap',
332337
value: innerBlockRowGap,
333338
} }
339+
marks={ spacingSizeMarks }
334340
/>
335341
}
336342
{ ( innerBlockOrientation && innerBlockWrap === 'wrap' ) &&

‎src/block-components/alignment/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { addStyles } from './style'
44

55
export * from './use-alignment'
66

7+
export { deprecateInnerBlockRowGapAndContainerHeight } from './deprecated/index'
8+
79
export const Alignment = () => {
810
return null
911
}

‎src/block-components/alignment/style.js‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -211,8 +211,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
211211
styleRule: 'columnGap',
212212
attrName: 'innerBlockColumnGap',
213213
key: 'innerBlockColumnGapEdit',
214-
format: `%spx`,
215214
responsive: 'all',
215+
valueCallback: value => {
216+
// Substitute with using format to work with preset controls
217+
if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
218+
return value
219+
}
220+
return value + 'px'
221+
},
216222
enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
217223
dependencies: [
218224
'innerBlockOrientation',
@@ -225,8 +231,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
225231
styleRule: 'columnGap',
226232
attrName: 'innerBlockColumnGap',
227233
key: 'innerBlockColumnGapSave',
228-
format: `%spx`,
229234
responsive: 'all',
235+
valueCallback: value => {
236+
// Substitute with using format to work with preset controls
237+
if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
238+
return value
239+
}
240+
return value + 'px'
241+
},
230242
enabledCallback: getAttribute => getAttribute( 'innerBlockOrientation' ) === 'horizontal',
231243
dependencies: [
232244
'innerBlockOrientation',
@@ -241,12 +253,18 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
241253
styleRule: 'rowGap',
242254
attrName: 'innerBlockRowGap',
243255
key: 'innerBlockRowGapEdit',
244-
format: `%spx`,
245256
responsive: 'all',
246257
enabledCallback: getAttribute => {
247258
return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
248259
( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )
249260
},
261+
valueCallback: value => {
262+
// Substitute with using format to work with preset controls
263+
if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
264+
return value
265+
}
266+
return value + 'px'
267+
},
250268
dependencies: [
251269
'innerBlockOrientation',
252270
'innerBlockWrap',
@@ -259,8 +277,14 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
259277
styleRule: 'rowGap',
260278
attrName: 'innerBlockRowGap',
261279
key: 'innerBlockRowGapSave',
262-
format: `%spx`,
263280
responsive: 'all',
281+
valueCallback: value => {
282+
// Substitute with using format to work with preset controls
283+
if ( typeof value === 'string' && value.startsWith( 'var' ) ) {
284+
return value
285+
}
286+
return value + 'px'
287+
},
264288
enabledCallback: getAttribute => {
265289
return getAttribute( 'innerBlockOrientation' ) !== 'horizontal' ||
266290
( getAttribute( 'innerBlockOrientation' ) === 'horizontal' && getAttribute( 'innerBlockWrap' ) === 'wrap' )

‎src/block-components/block-div/deprecated.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { deprecationBackgrounColorOpacity, deprecateShadowColor } from '../helpers'
1+
import {
2+
deprecationBackgrounColorOpacity, deprecateShadowColor, deprecateSizeControlHeight,
3+
} from '../helpers'
24

35
import { addFilter } from '@wordpress/hooks'
46
import { semverCompare } from '~stackable/util'
@@ -38,3 +40,12 @@ export const deprecateBlockShadowColor = {
3840
return deprecateShadowColor.migrate( 'block%s' )( attributes )
3941
},
4042
}
43+
44+
export const deprecateBlockHeight = {
45+
isEligible: attributes => {
46+
return deprecateSizeControlHeight.isEligible( 'block%s' )( attributes )
47+
},
48+
migrate: attributes => {
49+
return deprecateSizeControlHeight.migrate( 'block%s' )( attributes )
50+
},
51+
}

‎src/block-components/block-div/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ import { CustomAttributes } from '../custom-attributes'
1818
import { version as VERSION } from 'stackable'
1919

2020
export { useUniqueId }
21-
export { deprecateBlockBackgroundColorOpacity, deprecateBlockShadowColor } from './deprecated'
21+
export {
22+
deprecateBlockBackgroundColorOpacity, deprecateBlockShadowColor, deprecateBlockHeight,
23+
} from './deprecated'
2224

2325
export const BlockDiv = memo( props => {
2426
const {

‎src/block-components/button/edit.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ import {
1212
AdvancedSelectControl,
1313
} from '~stackable/components'
1414
import { i18n } from 'stackable'
15-
import { useBlockAttributesContext, useBlockLayoutDefaults } from '~stackable/hooks'
15+
import {
16+
useBlockAttributesContext, useBlockLayoutDefaults, usePresetControls,
17+
} from '~stackable/hooks'
1618

1719
/**
1820
* WordPress dependencies
@@ -185,6 +187,9 @@ const SizeControls = props => {
185187
const { getPlaceholder } = useBlockLayoutDefaults()
186188

187189
const buttonPaddingPlaceholder = getPlaceholder( paddingPlaceholderName, { single: false } )
190+
191+
const presetMarks = usePresetControls( 'spacingSizes' )?.getPresetMarks() || null
192+
188193
return ( <>
189194
{ props.hasFullWidth && (
190195
<AdvancedToggleControl
@@ -228,6 +233,7 @@ const SizeControls = props => {
228233
title: __( 'Button padding', i18n ),
229234
description: __( 'Adjusts the space between the button text and button borders', i18n ),
230235
} }
236+
marks={ presetMarks }
231237
/>
232238
</> )
233239
}

0 commit comments

Comments
 (0)