Skip to content

Commit fa8560f

Browse files
kaeizenkaeizen
committed
use block-design-system.json
1 parent 3c320c6 commit fa8560f

File tree

31 files changed

+1165
-496
lines changed

31 files changed

+1165
-496
lines changed

‎gulpfile.js‎

Lines changed: 220 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,218 @@ if ( ! function_exists( 'stackable_get_blocks_array') ) {
198198
cb()
199199
} )
200200

201+
gulp.task( 'generate-block-design-system-php', function( cb ) {
202+
const fs = require( 'fs' )
203+
204+
let blockDesignSystem = 'array()'
205+
206+
const toAssocArray = ( key, value, cb, indent ) => {
207+
if ( typeof value === 'object' ) {
208+
const parsed = cb( value, indent + 1 )
209+
return `"${ key }" => ${ parsed }`
210+
}
211+
212+
if ( typeof value === 'string' ) {
213+
return `"${ key }" => "${ value }"`
214+
}
215+
216+
return `"${ key }" => ${ value }`
217+
}
218+
219+
const parseBlockDesignSystem = ( obj, indent ) => {
220+
let content = ''
221+
const tab = '\t'.repeat( indent )
222+
223+
if ( typeof obj === 'object' ) {
224+
content += 'array(\n'
225+
226+
Object.entries( obj ).forEach( ( [ key, value ], index, bds ) => {
227+
if ( key === 'hoverStates' ) {
228+
return
229+
}
230+
231+
content += tab + toAssocArray( key, value, parseBlockDesignSystem, indent )
232+
233+
if ( index !== bds.length - 1 ) {
234+
content += ',\n'
235+
} else {
236+
content += '\n'
237+
}
238+
} )
239+
content += `\t`.repeat( indent - 1 ) + ')'
240+
}
241+
return content
242+
}
243+
244+
const parseBlockDesignSystemSections = ( sections, indent ) => {
245+
const combined = {}
246+
Object.values( sections ).forEach( section => {
247+
Object.entries( section ).forEach( ( [ key, value ] ) => {
248+
combined[ key ] = value
249+
} )
250+
} )
251+
252+
return parseBlockDesignSystem( combined, indent )
253+
}
254+
const jsonPath = path.resolve( __dirname, `src/styles/block-design-system.json` )
255+
if ( fs.existsSync( jsonPath ) ) {
256+
const fileContent = fs.readFileSync( jsonPath, 'utf-8' )
257+
const raw = JSON.parse( fileContent )
258+
blockDesignSystem = parseBlockDesignSystemSections( raw, 4 )
259+
}
260+
261+
// Generate PHP variable string
262+
const script = `<?php
263+
// This is a generated file by gulp generate-block-design-system-php
264+
265+
// Exit if accessed directly.
266+
if ( ! defined( 'ABSPATH' ) ) {
267+
exit;
268+
}
269+
270+
if ( ! class_exists( 'Stackable_Block_Design_System') ) {
271+
class Stackable_Block_Design_System {
272+
273+
function __construct() {
274+
}
275+
276+
public static function get_block_design_system() {
277+
$block_design_system = ${ blockDesignSystem };
278+
279+
return $block_design_system;
280+
}
281+
}
282+
283+
new Stackable_Block_Design_System();
284+
}
285+
?>
286+
`
287+
// Write PHP variable to file
288+
fs.writeFileSync( path.resolve( __dirname, 'src/styles/index.php' ), script )
289+
290+
cb()
291+
} )
292+
293+
gulp.task( 'generate-block-design-system-scss', function( cb ) {
294+
const fs = require( 'fs' )
295+
296+
let blockDesignSystem = ''
297+
298+
const getFourRangeValue = sides => {
299+
if ( Object.values( sides ).every( s => s === sides.top ) ) {
300+
return `${ sides.top }px`
301+
}
302+
303+
if ( sides.top === sides.bottom && sides.right === sides.left ) {
304+
return `${ sides.top }px ${ sides.right }px`
305+
}
306+
307+
return `${ sides.top }px ${ sides.right }px ${ sides.bottom }px ${ sides.left }px`
308+
}
309+
310+
const getDeviceValue = ( obj, device = 'desktop' ) => {
311+
const value = obj[ device ]
312+
313+
if ( typeof value === 'number' ) {
314+
return `${ value }px`
315+
}
316+
317+
if ( typeof value === 'object' ) {
318+
return `${ getFourRangeValue( value ) }`
319+
}
320+
321+
if ( value === '' ) {
322+
return 'none'
323+
}
324+
325+
return value
326+
}
327+
328+
const getValue = ( property, obj, indent ) => {
329+
if ( Object.keys( obj ).length === 1 ) {
330+
return getDeviceValue( obj )
331+
}
332+
333+
const tab = `\t`.repeat( indent )
334+
let content = getDeviceValue( obj )
335+
let hoverProperties = ''
336+
if ( 'hoverStates' in obj ) {
337+
hoverProperties += ',\n'
338+
const _hoverProperties = []
339+
Object.keys( obj.hoverStates ).forEach( state => {
340+
if ( obj.hoverStates[ state ] ) {
341+
_hoverProperties.push( tab + `${ property }-${ state }: cssvar(${ property })` )
342+
}
343+
} )
344+
hoverProperties += _hoverProperties.join( ',\n' )
345+
}
346+
347+
if ( 'hoverStates' in obj && Object.keys( obj ).length === 2 ) {
348+
content += hoverProperties
349+
return content
350+
}
351+
352+
content = '(\n'
353+
Object.keys( obj ).forEach( device => {
354+
if ( device === 'hoverStates' ) {
355+
return
356+
}
357+
content += `\t`.repeat( indent + 1 ) + `${ device }: ${ getDeviceValue( obj, device ) },\n`
358+
} )
359+
content += tab + ')'
360+
content += hoverProperties
361+
362+
return content
363+
}
364+
365+
const parseBlockDesignSystem = ( obj, indent ) => {
366+
let content = ''
367+
const tab = `\t`.repeat( indent )
368+
Object.entries( obj ).forEach( ( [ key, v ] ) => {
369+
const value = getValue( key, v, indent )
370+
content += tab + `${ key }: ${ value },\n`
371+
} )
372+
return content
373+
}
374+
375+
const parseBlockDesignSystemSections = ( sections, indent ) => {
376+
let content = ''
377+
if ( typeof sections === 'object' ) {
378+
Object.entries( sections ).forEach( ( [ section, obj ], index, s ) => {
379+
content += ` /**
380+
* ${ section }
381+
*/
382+
`
383+
content += parseBlockDesignSystem( obj, indent )
384+
content += index !== s.length - 1 ? '\n' : ''
385+
} )
386+
}
387+
return content
388+
}
389+
390+
const jsonPath = path.resolve( __dirname, `src/styles/block-design-system.json` )
391+
if ( fs.existsSync( jsonPath ) ) {
392+
const fileContent = fs.readFileSync( jsonPath, 'utf-8' )
393+
const raw = JSON.parse( fileContent )
394+
blockDesignSystem = parseBlockDesignSystemSections( raw, 1 )
395+
}
396+
397+
// Generate PHP variable string
398+
const script = `@import "cssvars";
399+
// This is a generated file by gulp generate-block-design-system-scss
400+
401+
/**
402+
* Default Stackable UI Kit design.
403+
*/
404+
$block-design-system: (
405+
${ blockDesignSystem });
406+
`
407+
// Write to SCSS file
408+
fs.writeFileSync( path.resolve( __dirname, 'src/styles/block-design-system.scss' ), script )
409+
410+
cb()
411+
} )
412+
201413
gulp.task( 'generate-translations-js', gulp.series(
202414
// The collect function has an issue where it will not continue if the
203415
// folder will it writes to doesn't exist, create it to prevent an error.
@@ -492,7 +704,9 @@ gulp.task( 'style-deprecated', gulp.parallel(
492704

493705
gulp.task( 'build-process', gulp.parallel( 'style', 'style-editor', 'welcome-styles', 'style-deprecated', 'generate-translations-js', 'generate-stk-block-typesphp' ) )
494706

495-
gulp.task( 'build', gulp.series( 'build-process' ) )
707+
gulp.task( 'build-block-design-system', gulp.parallel( 'generate-block-design-system-php', 'generate-block-design-system-scss' ) )
708+
709+
gulp.task( 'build', gulp.series( 'build-block-design-system', 'build-process' ) )
496710

497711
gulp.task( 'package', function() {
498712
return gulp.src( buildInclude, { base: './' } )
@@ -507,6 +721,10 @@ gulp.task( 'zip', function() {
507721
} )
508722

509723
const watchFuncs = ( basePath = '.' ) => {
724+
gulp.watch(
725+
[ `${ basePath }/src/styles/block-design-system.json` ],
726+
gulp.parallel( [ 'generate-block-design-system-php', 'generate-block-design-system-scss' ] )
727+
)
510728
gulp.watch(
511729
[ `${ basePath }/src/**/*.scss` ],
512730
gulp.parallel( [ 'style', 'style-editor', 'welcome-styles', 'style-deprecated' ] )
@@ -523,7 +741,7 @@ const watchFuncs = ( basePath = '.' ) => {
523741
)
524742
}
525743

526-
gulp.task( 'watch', gulp.series( 'build-process', function watch( done ) {
744+
gulp.task( 'watch', gulp.series( 'build-block-design-system', 'build-process', function watch( done ) {
527745
watchFuncs()
528746
done()
529747
} ) )

‎plugin.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ function is_frontend() {
229229
require_once( plugin_dir_path( __FILE__ ) . 'src/kses.php' );
230230
require_once( plugin_dir_path( __FILE__ ) . 'src/dynamic-breakpoints.php' );
231231
require_once( plugin_dir_path( __FILE__ ) . 'src/design-library/init.php' );
232+
require_once( plugin_dir_path( __FILE__ ) . 'src/styles/index.php' );
232233
require_once( plugin_dir_path( __FILE__ ) . 'src/global-settings.php' );
233234
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/spacing-and-borders/index.php' );
234235
require_once( plugin_dir_path( __FILE__ ) . 'src/plugins/global-settings/buttons-and-icons/index.php' );

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export const Edit = memo( props => {
5757
/>
5858
<SizeControls.Spacing
5959
attrNameTemplate="block%s"
60-
paddingPlaceholder={ hasBackground ? getPlaceholder( '--stk-block-background-padding' ) : '' }
60+
paddingPlaceholder={ hasBackground ? getPlaceholder( 'block-background-padding' ) : '' }
6161
visualGuide={ {
6262
highlight: 'padding',
6363
} }
@@ -87,9 +87,9 @@ export const Edit = memo( props => {
8787
>
8888
<BorderControls
8989
attrNameTemplate="block%s"
90-
placeholderTemplate="--stk-block-background"
91-
borderTypeValue={ getPlaceholder( '--stk-block-background-border-style' ) }
92-
borderRadiusPlaceholder={ getPlaceholder( '--stk-block-background-border-radius' ) }
90+
placeholderTemplate="block-background"
91+
borderTypeValue={ getPlaceholder( 'block-background-border-style' ) }
92+
borderRadiusPlaceholder={ getPlaceholder( 'block-background-border-radius' ) }
9393
/>
9494
</PanelAdvancedSettings>
9595
</InspectorStyleControls>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Icon = props => (
3939
hasIconGap={ props.hasIconGap }
4040
hasIconPosition={ props.hasIconPosition }
4141
defaultValue={ props.defaultValue }
42-
iconSizePlaceholderName="--stk-button-icon-size"
42+
iconSizePlaceholderName="button-icon-size"
4343
iconGapPlaceholderName={ props.iconGapPlaceholderName }
4444
/>
4545
)
@@ -178,7 +178,7 @@ Colors.defaultProps = {
178178
const SizeControls = props => {
179179
const {
180180
attrNameTemplate = 'button%s',
181-
paddingPlaceholderName = '--stk-button-padding',
181+
paddingPlaceholderName = 'button-padding',
182182
} = props
183183

184184
const getAttrName = getAttributeNameFunc( attrNameTemplate )
@@ -198,7 +198,7 @@ const SizeControls = props => {
198198
attribute={ getAttrName( 'minHeight' ) }
199199
min={ 0 }
200200
max={ 100 }
201-
placeholder={ getPlaceholder( '--stk-button-min-height' ) }
201+
placeholder={ getPlaceholder( 'button-min-height' ) }
202202
/>
203203
{ props.hasWidth && ! props.hasFullWidth && (
204204
<AdvancedRangeControl
@@ -255,16 +255,16 @@ const BorderControls = props => {
255255
} )
256256
const { getPlaceholder } = useBlockLayoutDefaults()
257257

258-
const borderWidthPlaceholder = className === 'is-style-ghost' ? getPlaceholder( '--stk-button-ghost-border-width' ) : getPlaceholder( '--stk-button-border-width' )
258+
const borderWidthPlaceholder = className === 'is-style-ghost' ? getPlaceholder( 'button-ghost-border-width' ) : getPlaceholder( 'button-border-width' )
259259

260260
return (
261261
<_BorderControls
262262
hasBorderRadiusHover={ false }
263263
borderSelector={ props.borderSelector }
264264
borderRadiusPlaceholder={ props.placeholder }
265-
borderTypeValue={ getPlaceholder( '--stk-button-border-style' ) }
265+
borderTypeValue={ getPlaceholder( 'button-border-style' ) }
266266
borderWidthPlaceholder={ borderWidthPlaceholder }
267-
placeholderTemplate="--stk-button"
267+
placeholderTemplate="button"
268268
{ ...props }
269269
/>
270270
)

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -256,7 +256,7 @@ export const Controls = props => {
256256
defaultLocked={ true }
257257
min={ [ 0, 0 ] }
258258
sliderMax={ [ 200, 30 ] }
259-
placeholder={ numInnerBlocks === 1 ? '0' : getPlaceholder( '--stk-column-margin' ) }
259+
placeholder={ numInnerBlocks === 1 ? '0' : getPlaceholder( 'column-margin' ) }
260260
visualGuide={ {
261261
selector: '.stk-%s-column > * > * > [data-type="stackable/column"] > * > .stk-column > .stk-inner-blocks',
262262
highlight: 'column-spacing',
@@ -274,7 +274,7 @@ export const Controls = props => {
274274
responsive="all"
275275
min={ 0 }
276276
sliderMax={ 100 }
277-
placeholder={ getPlaceholder( '--stk-columns-column-gap' ) }
277+
placeholder={ getPlaceholder( 'columns-column-gap' ) }
278278
visualGuide={ {
279279
selector: '.stk-%s-column > * > *',
280280
highlight: 'columns:column-gap',
@@ -291,7 +291,7 @@ export const Controls = props => {
291291
responsive="all"
292292
min={ 0 }
293293
sliderMax={ 100 }
294-
placeholder={ getPlaceholder( '--stk-columns-row-gap' ) }
294+
placeholder={ getPlaceholder( 'columns-row-gap' ) }
295295
helpTooltip={ {
296296
// TODO: Add a working video
297297
description: __( 'Sets the distance between two or more columns', i18n ),

‎src/block-components/container-div/edit.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ export const Edit = props => {
6666
<SizeControls.Spacing
6767
attrNameTemplate="container%s"
6868
enableMargin={ false }
69-
paddingPlaceholder={ getPlaceholder( '--stk-container-padding' ) }
69+
paddingPlaceholder={ getPlaceholder( 'container-padding' ) }
7070
visualGuide={ {
7171
selector: '.stk-%s-container',
7272
} }
@@ -93,9 +93,9 @@ export const Edit = props => {
9393
>
9494
<BorderControls
9595
attrNameTemplate="container%s"
96-
placeholderTemplate="--stk-container"
97-
borderTypeValue={ getPlaceholder( '--stk-container-border-style' ) }
98-
borderRadiusPlaceholder={ getPlaceholder( '--stk-container-border-radius' ) }
96+
placeholderTemplate="container"
97+
borderTypeValue={ getPlaceholder( 'container-border-style' ) }
98+
borderRadiusPlaceholder={ getPlaceholder( 'container-border-radius' ) }
9999
/>
100100
</PanelAdvancedSettings>
101101
</InspectorStyleControls>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export const Edit = props => {
4949
defaultValue,
5050
onChangeIcon,
5151
iconGapPlaceholder = '0',
52-
iconSizePlaceholderName = '--stk-icon-size',
52+
iconSizePlaceholderName = 'icon-size',
5353
attrNameTemplate,
5454
} = props
5555

0 commit comments

Comments
 (0)