From ddcd303ee6ade00eb2389d7a6f78a54c37ee4765 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Wed, 6 Mar 2024 12:44:34 -0500 Subject: [PATCH 1/8] [MOOSE-109]: migrate create wp controls script; new balance control --- .../assets/js/utils/create-wp-controls.js | 261 ++++++++++++++++++ .../themes/core/assets/pcss/_utilities.pcss | 3 + .../themes/core/assets/pcss/global/reset.pcss | 9 - .../core/assets/pcss/media/_utilities.pcss | 34 +++ .../core/assets/pcss/spacing/_utilities.pcss | 30 +- .../themes/core/blocks/core/column/editor.js | 174 ++---------- .../themes/core/blocks/core/heading/editor.js | 26 ++ .../core/blocks/core/heading/style.pcss | 4 + .../themes/core/blocks/core/image/editor.js | 40 +++ .../themes/core/blocks/core/image/style.pcss | 8 + .../core/blocks/core/paragraph/editor.js | 26 ++ .../core/blocks/core/paragraph/style.pcss | 4 + 12 files changed, 440 insertions(+), 179 deletions(-) create mode 100644 wp-content/themes/core/assets/js/utils/create-wp-controls.js create mode 100644 wp-content/themes/core/assets/pcss/media/_utilities.pcss create mode 100644 wp-content/themes/core/blocks/core/heading/editor.js create mode 100644 wp-content/themes/core/blocks/core/image/editor.js create mode 100644 wp-content/themes/core/blocks/core/paragraph/editor.js diff --git a/wp-content/themes/core/assets/js/utils/create-wp-controls.js b/wp-content/themes/core/assets/js/utils/create-wp-controls.js new file mode 100644 index 00000000..4e82d8e2 --- /dev/null +++ b/wp-content/themes/core/assets/js/utils/create-wp-controls.js @@ -0,0 +1,261 @@ +/** + * @module create-wp-controls + * + * @description handles creating WP controls given an object of settings + */ + +import { InspectorControls } from '@wordpress/block-editor'; +import { + PanelBody, + ToggleControl, + __experimentalNumberControl as NumberControl, // eslint-disable-line +} from '@wordpress/components'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { Fragment } from '@wordpress/element'; +import { addFilter } from '@wordpress/hooks'; +import { __ } from '@wordpress/i18n'; + +const state = { + settings: {}, +}; + +/** + * @function applyBlockProps + * + * @description applys additional conditional props to core blocks + * + * @param {*} props + * @param {*} block + * @param {*} attributes + * + * @return {*} return original or updated props + */ +const applyBlockProps = ( props, block, attributes ) => { + // return default props if block isn't in the includes array + if ( ! state.settings.blocks.includes( block.name ) ) { + return props; + } + + state.settings.controls.forEach( ( control ) => { + if ( attributes[ control.attribute ] === undefined ) { + return props; + } + + // determine if we should add a class name to the block + if ( + Object.keys( control ).includes( 'applyClass' ) && + props.className && + ! props.className.includes( control.applyClass ) && + attributes[ control.attribute ] && + attributes[ control.attribute ] !== control.defaultValue + ) { + props.className = `${ props.className } ${ control.applyClass }`; + } + + // determine if we should add style properties to the block + // assumes we only have one style property to add and assigns it to the value of the control created + if ( + Object.keys( control ).includes( 'applyStyleProperty' ) && + attributes[ control.attribute ] && + attributes[ control.attribute ] !== control.defaultValue + ) { + props.style = { + ...props.style, + [ control.applyStyleProperty ]: attributes[ control.attribute ], + }; + } + } ); + + return props; +}; + +/** + * @function applyEditorBlockProps + * + * @description assigns new props / classes to the block + */ +const applyEditorBlockProps = createHigherOrderComponent( + ( BlockListBlock ) => { + return ( props ) => { + const { name, attributes } = props; + const classes = attributes.classes + ? attributes.classes.split( ' ' ) + : []; + + // return default BlockListBlock if we're dealing with an unsupported block + if ( ! state.settings.blocks.includes( name ) ) { + return ; + } + + // loop through controls to assign classes if necessary + state.settings.controls.forEach( ( control ) => { + if ( + Object.keys( control ).includes( 'applyClass' ) && + ! classes.includes( control.applyClass ) && + attributes[ control.attribute ] && + attributes[ control.attribute ] !== control.defaultValue + ) { + classes.push( control.applyClass ); + } + } ); + + return ; + }; + } +); + +/** + * @function determineControlToRender + * + * @description based on provided settings, choose a type of WP control to render; currently supports ToggleControl & NumberControl. + * + * @param {*} control + * @param {*} attributes + * @param {*} setAttributes + * + * @return {*} returns WP React control component + */ +const determineControlToRender = ( control, attributes, setAttributes ) => { + if ( control.type === 'toggle' ) { + return ( + { + setAttributes( { + [ control.attribute ]: + ! attributes[ control.attribute ], + } ); + } } + /> + ); + } else if ( control.type === 'number' ) { + return ( + { + setAttributes( { + [ control.attribute ]: newValue, + } ); + } } + min={ 0 } + isShiftStepEnabled={ false } + /> + ); + } +}; + +/** + * @function addBlockControls + * + * @description based on provided settings, adds new controls to existing blocks + */ +const addBlockControls = createHigherOrderComponent( ( BlockEdit ) => { + return ( props ) => { + const { attributes, setAttributes, name, isSelected } = props; + + // return default Edit function if block doesn't match blocks we want to target + if ( ! state.settings.blocks.includes( name ) ) { + return ; + } + + // set default attributes if not set + state.settings.controls.forEach( ( control ) => { + if ( ! attributes[ control.attribute ] ) { + attributes[ control.attribute ] = control.defaultValue; + } + } ); + + return ( + + + { isSelected && ( + + + { state.settings.controls.map( ( control ) => + determineControlToRender( + control, + attributes, + setAttributes + ) + ) } + + + ) } + + ); + }; +}, 'addBlockControls' ); + +/** + * @function addBlockAttributes + * + * @description adds new attributes to existing blocks + * + * @param {*} settings + * @param {*} name + * + * @return {*} existing or updated settings + */ +const addBlockAttributes = ( settings, name ) => { + if ( ! state.settings.blocks.includes( name ) ) { + return settings; + } + + if ( settings?.attributes !== undefined ) { + settings.attributes = { + ...settings.attributes, + ...state.settings.attributes, + }; + } + + return settings; +}; + +/** + * @function init + * + * @description assumes settings object is provided; if not, module does nothing + * + * @param {*} settings + */ +const init = ( settings = null ) => { + if ( ! settings ) { + return; + } + + state.settings = settings; + + addFilter( + 'blocks.registerBlockType', + 'tribe/add-block-attributes', + addBlockAttributes + ); + + addFilter( + 'editor.BlockEdit', + 'tribe/add-block-controls', + addBlockControls + ); + + addFilter( + 'editor.BlockListBlock', + 'tribe/add-editor-block-props', + applyEditorBlockProps + ); + + addFilter( + 'blocks.getSaveContent.extraProps', + 'tribe/apply-block-props', + applyBlockProps + ); +}; + +export default init; diff --git a/wp-content/themes/core/assets/pcss/_utilities.pcss b/wp-content/themes/core/assets/pcss/_utilities.pcss index 66c79a19..4d6dcc9f 100644 --- a/wp-content/themes/core/assets/pcss/_utilities.pcss +++ b/wp-content/themes/core/assets/pcss/_utilities.pcss @@ -21,3 +21,6 @@ /* Cards */ @import "cards/_utilities.pcss"; + +/* Media */ +@import "media/_utilities.pcss"; diff --git a/wp-content/themes/core/assets/pcss/global/reset.pcss b/wp-content/themes/core/assets/pcss/global/reset.pcss index 3daa2e06..6beaf015 100644 --- a/wp-content/themes/core/assets/pcss/global/reset.pcss +++ b/wp-content/themes/core/assets/pcss/global/reset.pcss @@ -34,15 +34,6 @@ figcaption { display: block; } -/** - * Avoid text overflows. - */ -p, -:--heading { - overflow-wrap: break-word; - hyphens: auto; -} - /** * Add the correct font size in all browsers. */ diff --git a/wp-content/themes/core/assets/pcss/media/_utilities.pcss b/wp-content/themes/core/assets/pcss/media/_utilities.pcss new file mode 100644 index 00000000..324a7fd7 --- /dev/null +++ b/wp-content/themes/core/assets/pcss/media/_utilities.pcss @@ -0,0 +1,34 @@ +/* ------------------------------------------------------------------------- + * + * Aspect Ratio Helpers + * + * Useful for fixing the height of an element based on it's width. + * Since the default Image block contains aspect ratio controls, + * these helpers should only be used if using an aspect ratio that doesn't + * exist within WP. + * + * Example: + *
+ * + *
+ * + * ------------------------------------------------------------------------- */ + +.s-aspect-ratio-cover, +.s-aspect-ratio-cover > img { + height: 100%; + width: 100%; + object-fit: cover; +} + +.s-aspect-ratio-1-1 { + aspect-ratio: 1 / 1; +} + +.s-aspect-ratio-4-3 { + aspect-ratio: 4 / 3; +} + +.s-aspect-ratio-16-9 { + aspect-ratio: 16 / 9; +} diff --git a/wp-content/themes/core/assets/pcss/spacing/_utilities.pcss b/wp-content/themes/core/assets/pcss/spacing/_utilities.pcss index 60bc2603..f505f808 100644 --- a/wp-content/themes/core/assets/pcss/spacing/_utilities.pcss +++ b/wp-content/themes/core/assets/pcss/spacing/_utilities.pcss @@ -1,31 +1,23 @@ /* ------------------------------------------------------------------------- * - * Aspect Ratio Helpers - * - * Useful for fixing the height of an element based on it's width. - * - * Example: - *
- * - *
+ * Spacing Helpers * * ------------------------------------------------------------------------- */ -.s-aspect-ratio-cover, -.s-aspect-ratio-cover > img { - height: 100%; - width: 100%; - object-fit: cover; +.s-remove-margin { + margin: 0 !important; /* override editor default */ } -.s-aspect-ratio-1-1 { - aspect-ratio: 1 / 1; +.s-remove-margin--vertical { + margin-top: 0 !important; /* override editor default */ + margin-bottom: 0 !important; /* override editor default */ } -.s-aspect-ratio-4-3 { - aspect-ratio: 4 / 3; +.s-remove-margin--horizontal { + margin-left: 0 !important; /* override editor default */ + margin-right: 0 !important; /* override editor default */ } -.s-aspect-ratio-16-9 { - aspect-ratio: 16 / 9; +.s-remove-margin--top { + margin-top: 0 !important; /* override editor default */ } diff --git a/wp-content/themes/core/blocks/core/column/editor.js b/wp-content/themes/core/blocks/core/column/editor.js index ef9e10f2..13c8d4ae 100644 --- a/wp-content/themes/core/blocks/core/column/editor.js +++ b/wp-content/themes/core/blocks/core/column/editor.js @@ -1,155 +1,27 @@ -/** - * @module stacking-order - * - * @description handles setting up stacking order settings for columns block - */ - -import { InspectorAdvancedControls } from '@wordpress/block-editor'; -// eslint-disable-next-line -import { __experimentalNumberControl as NumberControl } from '@wordpress/components'; -import { createHigherOrderComponent } from '@wordpress/compose'; -import { Fragment } from '@wordpress/element'; -import { addFilter } from '@wordpress/hooks'; +import createWPControls from 'utils/create-wp-controls'; import { __ } from '@wordpress/i18n'; -/** - * @function applyAnimationProps - * - * @description updates props on the block with new animation settings - * - * @param {Object} props - * @param {Object} block - * @param {Object} attributes - * - * @return {Object} updated props object - */ -const applyStackingOrderProps = ( props, block, attributes ) => { - // return default props if block isn't in the includes array - if ( block.name !== 'core/column' ) { - return props; - } - - const { stackingOrder } = attributes; - - if ( stackingOrder === undefined || stackingOrder === 0 ) { - return props; - } - - props.className = `${ props.className } tribe-has-stacking-order`; - props.style = { - ...props.style, - '--tribe-stacking-order': stackingOrder, - }; - - return props; -}; - -/** - * @function stackingOrderControls - * - * @description creates component that overrides the edit functionality of the block with new stacking order controls - */ -const stackingOrderControls = createHigherOrderComponent( ( BlockEdit ) => { - return ( props ) => { - const { attributes, setAttributes, isSelected, name } = props; - - // return default Edit function if block isn't a column block - if ( name !== 'core/column' ) { - return ; - } - - const { stackingOrder } = attributes; - - let blockClass = - attributes.className !== undefined - ? attributes.className - : 'wp-block-column'; - const blockStyles = { ...props.style }; - - if ( stackingOrder !== undefined && stackingOrder !== 0 ) { - blockClass = `${ blockClass } tribe-has-stacking-order`; - blockStyles[ '--tribe-stacking-order' ] = stackingOrder; - } - - const blockProps = { - ...props, - attributes: { - ...attributes, - className: blockClass, - }, - style: blockStyles, - }; - - return ( - - - { isSelected && ( - - { - setAttributes( { - stackingOrder: newValue, - } ); - } } - min={ 0 } - isShiftStepEnabled={ false } - /> - - ) } - - ); - }; -}, 'stackingOrderControls' ); - -/** - * @function addStackingOrderAttributes - * - * @description add new attributes to blocks for stacking order settings - * - * @param {Object} settings - * @param {string} name - * - * @return {Object} returns updates settings object - */ -const addStackingOrderAttributes = ( settings, name ) => { - // return default settings if block isn't a column block - if ( name !== 'core/column' ) { - return settings; - } - - if ( settings?.attributes !== undefined ) { - settings.attributes = { - ...settings.attributes, - stackingOrder: { - type: 'string', - }, - }; - } - - return settings; +const settings = { + attributes: { + stackingOrder: { + type: 'string', + }, + }, + blocks: [ 'core/column' ], + controls: [ + { + applyClass: 'tribe-has-stacking-order', + applyStyleProperty: '--tribe-stacking-order', + attribute: 'stackingOrder', + defaultValue: 0, + helpText: __( + 'The stacking order of the element at mobile breakpoints. This setting only applies if the "Stack on mobile" setting for the Columns block is turned on.', + 'tribe' + ), + label: __( 'Stacking Order', 'tribe' ), + type: 'number', + }, + ], }; -// register block filters for adding stacking order controls -addFilter( - 'blocks.registerBlockType', - 'tribe/add-stacking-order-options', - addStackingOrderAttributes -); - -addFilter( - 'editor.BlockEdit', - 'tribe/stacking-order-advanced-control', - stackingOrderControls -); - -addFilter( - 'blocks.getSaveContent.extraProps', - 'tribe/apply-stacking-order-classes', - applyStackingOrderProps -); +createWPControls( settings ); diff --git a/wp-content/themes/core/blocks/core/heading/editor.js b/wp-content/themes/core/blocks/core/heading/editor.js new file mode 100644 index 00000000..de5a16ac --- /dev/null +++ b/wp-content/themes/core/blocks/core/heading/editor.js @@ -0,0 +1,26 @@ +import createWPControls from 'utils/create-wp-controls'; +import { __ } from '@wordpress/i18n'; + +const settings = { + attributes: { + useBalancedText: { + type: 'boolean', + }, + }, + blocks: [ 'core/heading' ], + controls: [ + { + applyClass: 'has-balanced-text', + attribute: 'useBalancedText', + defaultValue: false, + helpText: __( + 'Turning this feature on sets text-wrap to balance to allow better responsive text', + 'tribe' + ), + label: __( 'Use Balanced Text', 'tribe' ), + type: 'toggle', + }, + ], +}; + +createWPControls( settings ); diff --git a/wp-content/themes/core/blocks/core/heading/style.pcss b/wp-content/themes/core/blocks/core/heading/style.pcss index 9c3faf60..8f21e384 100644 --- a/wp-content/themes/core/blocks/core/heading/style.pcss +++ b/wp-content/themes/core/blocks/core/heading/style.pcss @@ -39,4 +39,8 @@ @mixin t-display-xx-small; } + + &.has-balanced-text { + text-wrap: balance !important; + } } diff --git a/wp-content/themes/core/blocks/core/image/editor.js b/wp-content/themes/core/blocks/core/image/editor.js new file mode 100644 index 00000000..5b1ec8c6 --- /dev/null +++ b/wp-content/themes/core/blocks/core/image/editor.js @@ -0,0 +1,40 @@ +import createWPControls from 'utils/create-wp-controls'; +import { __ } from '@wordpress/i18n'; + +const settings = { + attributes: { + removeMargin: { + type: 'boolean', + }, + widthFillsContainer: { + type: 'boolean', + }, + }, + blocks: [ 'core/image' ], + controls: [ + { + applyClass: 's-remove-margin--vertical', + attribute: 'removeMargin', + defaultValue: false, + helpText: __( + 'Turning this feature on will remove default vertical margins from this block.', + 'tribe' + ), + label: __( 'Remove Margins', 'tribe' ), + type: 'toggle', + }, + { + applyClass: 'is-full-width', + attribute: 'widthFillsContainer', + defaultValue: false, + helpText: __( + 'Determines if the image should fill the width of the container it sits in. The editor must ensure the uploaded image is large enough to fill the area. If the image is not large enough to fill the area it could look pixelated.', + 'tribe' + ), + label: __( 'Width Fills Container', 'tribe' ), + type: 'toggle', + }, + ], +}; + +createWPControls( settings ); diff --git a/wp-content/themes/core/blocks/core/image/style.pcss b/wp-content/themes/core/blocks/core/image/style.pcss index 34795e5c..39e07064 100644 --- a/wp-content/themes/core/blocks/core/image/style.pcss +++ b/wp-content/themes/core/blocks/core/image/style.pcss @@ -10,4 +10,12 @@ margin-bottom: 0; text-align: left; } + + &.is-full-width { + width: 100%; + + & img { + width: 100%; + } + } } diff --git a/wp-content/themes/core/blocks/core/paragraph/editor.js b/wp-content/themes/core/blocks/core/paragraph/editor.js new file mode 100644 index 00000000..970ce0e6 --- /dev/null +++ b/wp-content/themes/core/blocks/core/paragraph/editor.js @@ -0,0 +1,26 @@ +import createWPControls from 'utils/create-wp-controls'; +import { __ } from '@wordpress/i18n'; + +const settings = { + attributes: { + useBalancedText: { + type: 'boolean', + }, + }, + blocks: [ 'core/paragraph' ], + controls: [ + { + applyClass: 'has-balanced-text', + attribute: 'useBalancedText', + defaultValue: false, + helpText: __( + 'Turning this feature on sets text-wrap to balance to allow better responsive text', + 'tribe' + ), + label: __( 'Use Balanced Text', 'tribe' ), + type: 'toggle', + }, + ], +}; + +createWPControls( settings ); diff --git a/wp-content/themes/core/blocks/core/paragraph/style.pcss b/wp-content/themes/core/blocks/core/paragraph/style.pcss index 86047dd7..dc2db9a2 100644 --- a/wp-content/themes/core/blocks/core/paragraph/style.pcss +++ b/wp-content/themes/core/blocks/core/paragraph/style.pcss @@ -15,4 +15,8 @@ @mixin t-body-small; } + + &.has-balanced-text { + text-wrap: balance !important; + } } From e4ae2a97311d074de21acbc9b6a387858967ab31 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Wed, 6 Mar 2024 14:54:31 -0500 Subject: [PATCH 2/8] [MOOSE-109]: update balanced text helper text --- wp-content/themes/core/blocks/core/heading/editor.js | 2 +- wp-content/themes/core/blocks/core/paragraph/editor.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/wp-content/themes/core/blocks/core/heading/editor.js b/wp-content/themes/core/blocks/core/heading/editor.js index de5a16ac..430aa17f 100644 --- a/wp-content/themes/core/blocks/core/heading/editor.js +++ b/wp-content/themes/core/blocks/core/heading/editor.js @@ -14,7 +14,7 @@ const settings = { attribute: 'useBalancedText', defaultValue: false, helpText: __( - 'Turning this feature on sets text-wrap to balance to allow better responsive text', + 'Enable to evenly balance text over multiple lines', 'tribe' ), label: __( 'Use Balanced Text', 'tribe' ), diff --git a/wp-content/themes/core/blocks/core/paragraph/editor.js b/wp-content/themes/core/blocks/core/paragraph/editor.js index 970ce0e6..c91a079c 100644 --- a/wp-content/themes/core/blocks/core/paragraph/editor.js +++ b/wp-content/themes/core/blocks/core/paragraph/editor.js @@ -14,7 +14,7 @@ const settings = { attribute: 'useBalancedText', defaultValue: false, helpText: __( - 'Turning this feature on sets text-wrap to balance to allow better responsive text', + 'Enable to evenly balance text over multiple lines', 'tribe' ), label: __( 'Use Balanced Text', 'tribe' ), From a8ac8ea15481ab51a177a4b25d9b8f076eaf05b2 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Fri, 22 Mar 2024 10:26:13 -0400 Subject: [PATCH 3/8] [MOOSE-109]: add select control on columns to override gap property --- .../assets/js/utils/create-wp-controls.js | 43 +++++++++++-- .../themes/core/blocks/core/columns/editor.js | 62 +++++++++++++++++++ .../core/blocks/core/columns/style.pcss | 6 +- 3 files changed, 106 insertions(+), 5 deletions(-) create mode 100644 wp-content/themes/core/blocks/core/columns/editor.js diff --git a/wp-content/themes/core/assets/js/utils/create-wp-controls.js b/wp-content/themes/core/assets/js/utils/create-wp-controls.js index 4e82d8e2..6c1dfafc 100644 --- a/wp-content/themes/core/assets/js/utils/create-wp-controls.js +++ b/wp-content/themes/core/assets/js/utils/create-wp-controls.js @@ -7,6 +7,7 @@ import { InspectorControls } from '@wordpress/block-editor'; import { PanelBody, + SelectControl, ToggleControl, __experimentalNumberControl as NumberControl, // eslint-disable-line } from '@wordpress/components'; @@ -81,13 +82,14 @@ const applyEditorBlockProps = createHigherOrderComponent( const classes = attributes.classes ? attributes.classes.split( ' ' ) : []; + const styles = { style: {} }; // return default BlockListBlock if we're dealing with an unsupported block if ( ! state.settings.blocks.includes( name ) ) { return ; } - // loop through controls to assign classes if necessary + // loop through controls to assign classes & styles if necessary state.settings.controls.forEach( ( control ) => { if ( Object.keys( control ).includes( 'applyClass' ) && @@ -97,9 +99,27 @@ const applyEditorBlockProps = createHigherOrderComponent( ) { classes.push( control.applyClass ); } + + // styles get added to the `wrapperProps` attribute on the BlockListBlock + if ( + Object.keys( control ).includes( 'applyStyleProperty' ) && + attributes[ control.attribute ] && + attributes[ control.attribute ] !== control.defaultValue + ) { + styles.style = { + [ control.applyStyleProperty ]: + attributes[ control.attribute ], + }; + } } ); - return ; + return ( + + ); }; } ); @@ -138,15 +158,30 @@ const determineControlToRender = ( control, attributes, setAttributes ) => { label={ control.label } value={ attributes[ control.attribute ] } help={ control.helpText } - onChange={ ( newValue ) => { + onChange={ ( value ) => { setAttributes( { - [ control.attribute ]: newValue, + [ control.attribute ]: value, } ); } } min={ 0 } isShiftStepEnabled={ false } /> ); + } else if ( control.type === 'select' ) { + return ( + { + setAttributes( { + [ control.attribute ]: value, + } ); + } } + /> + ); } }; diff --git a/wp-content/themes/core/blocks/core/columns/editor.js b/wp-content/themes/core/blocks/core/columns/editor.js new file mode 100644 index 00000000..13191399 --- /dev/null +++ b/wp-content/themes/core/blocks/core/columns/editor.js @@ -0,0 +1,62 @@ +import createWPControls from 'utils/create-wp-controls'; +import { __ } from '@wordpress/i18n'; + +const settings = { + attributes: { + customGap: { + type: 'string', + }, + }, + blocks: [ 'core/columns' ], + controls: [ + { + applyClass: 'tribe-has-custom-gap', + applyStyleProperty: '--tribe-custom-gap', + attribute: 'customGap', + defaultValue: '', + helpText: __( + 'The spacing variable the Columns block should use to override the default column/row gap', + 'tribe' + ), + label: __( 'Custom Spacing Gap', 'tribe' ), + type: 'select', + selectOptions: [ + { + disabled: true, + label: __( 'Select an option', 'tribe' ), + value: '', + }, + { + label: __( 'Spacer 10', 'tribe' ), + value: 'var(--spacer-10)', + }, + { + label: __( 'Spacer 20', 'tribe' ), + value: 'var(--spacer-20)', + }, + { + label: __( 'Spacer 30', 'tribe' ), + value: 'var(--spacer-30)', + }, + { + label: __( 'Spacer 40', 'tribe' ), + value: 'var(--spacer-40)', + }, + { + label: __( 'Spacer 50', 'tribe' ), + value: 'var(--spacer-50)', + }, + { + label: __( 'Spacer 60', 'tribe' ), + value: 'var(--spacer-60)', + }, + { + label: __( 'Spacer 70', 'tribe' ), + value: 'var(--spacer-70)', + }, + ], + }, + ], +}; + +createWPControls( settings ); diff --git a/wp-content/themes/core/blocks/core/columns/style.pcss b/wp-content/themes/core/blocks/core/columns/style.pcss index f627ded6..58cc7dc4 100644 --- a/wp-content/themes/core/blocks/core/columns/style.pcss +++ b/wp-content/themes/core/blocks/core/columns/style.pcss @@ -3,5 +3,9 @@ */ .wp-block-columns { - gap: var(--spacing-40) var(--wp--custom--spacing--grid-gutter); + gap: var(--spacer-40) var(--wp--custom--spacing--grid-gutter); + + &.tribe-has-custom-gap { + gap: var(--tribe-custom-gap); + } } From 8327afa8919148c4449c4905b135b19f213fc9c5 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Fri, 22 Mar 2024 10:33:18 -0400 Subject: [PATCH 4/8] [MOOSE-109]: allow blank spacing to be chosen for columns spacing --- wp-content/themes/core/blocks/core/columns/editor.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/wp-content/themes/core/blocks/core/columns/editor.js b/wp-content/themes/core/blocks/core/columns/editor.js index 13191399..46e16fca 100644 --- a/wp-content/themes/core/blocks/core/columns/editor.js +++ b/wp-content/themes/core/blocks/core/columns/editor.js @@ -22,8 +22,7 @@ const settings = { type: 'select', selectOptions: [ { - disabled: true, - label: __( 'Select an option', 'tribe' ), + label: __( 'No custom gap', 'tribe' ), value: '', }, { From c4e0b170050885efcb23ea25105335a56fb47dc1 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Thu, 30 May 2024 14:10:02 -0400 Subject: [PATCH 5/8] [MOOSE-109]: remove balanced text controls --- .../themes/core/blocks/core/heading/editor.js | 26 ------------------- .../core/blocks/core/paragraph/editor.js | 26 ------------------- 2 files changed, 52 deletions(-) delete mode 100644 wp-content/themes/core/blocks/core/heading/editor.js delete mode 100644 wp-content/themes/core/blocks/core/paragraph/editor.js diff --git a/wp-content/themes/core/blocks/core/heading/editor.js b/wp-content/themes/core/blocks/core/heading/editor.js deleted file mode 100644 index 430aa17f..00000000 --- a/wp-content/themes/core/blocks/core/heading/editor.js +++ /dev/null @@ -1,26 +0,0 @@ -import createWPControls from 'utils/create-wp-controls'; -import { __ } from '@wordpress/i18n'; - -const settings = { - attributes: { - useBalancedText: { - type: 'boolean', - }, - }, - blocks: [ 'core/heading' ], - controls: [ - { - applyClass: 'has-balanced-text', - attribute: 'useBalancedText', - defaultValue: false, - helpText: __( - 'Enable to evenly balance text over multiple lines', - 'tribe' - ), - label: __( 'Use Balanced Text', 'tribe' ), - type: 'toggle', - }, - ], -}; - -createWPControls( settings ); diff --git a/wp-content/themes/core/blocks/core/paragraph/editor.js b/wp-content/themes/core/blocks/core/paragraph/editor.js deleted file mode 100644 index c91a079c..00000000 --- a/wp-content/themes/core/blocks/core/paragraph/editor.js +++ /dev/null @@ -1,26 +0,0 @@ -import createWPControls from 'utils/create-wp-controls'; -import { __ } from '@wordpress/i18n'; - -const settings = { - attributes: { - useBalancedText: { - type: 'boolean', - }, - }, - blocks: [ 'core/paragraph' ], - controls: [ - { - applyClass: 'has-balanced-text', - attribute: 'useBalancedText', - defaultValue: false, - helpText: __( - 'Enable to evenly balance text over multiple lines', - 'tribe' - ), - label: __( 'Use Balanced Text', 'tribe' ), - type: 'toggle', - }, - ], -}; - -createWPControls( settings ); From cefd81a6e84a724af2f7c50135b84172383bc5be Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Thu, 30 May 2024 14:11:32 -0400 Subject: [PATCH 6/8] [MOOSE-109]: remove balanced text styles; remove columns custom gap --- .../themes/core/blocks/core/columns/editor.js | 61 ------------------- .../core/blocks/core/columns/style.pcss | 4 -- .../core/blocks/core/heading/style.pcss | 4 -- .../core/blocks/core/paragraph/style.pcss | 4 -- 4 files changed, 73 deletions(-) delete mode 100644 wp-content/themes/core/blocks/core/columns/editor.js diff --git a/wp-content/themes/core/blocks/core/columns/editor.js b/wp-content/themes/core/blocks/core/columns/editor.js deleted file mode 100644 index 46e16fca..00000000 --- a/wp-content/themes/core/blocks/core/columns/editor.js +++ /dev/null @@ -1,61 +0,0 @@ -import createWPControls from 'utils/create-wp-controls'; -import { __ } from '@wordpress/i18n'; - -const settings = { - attributes: { - customGap: { - type: 'string', - }, - }, - blocks: [ 'core/columns' ], - controls: [ - { - applyClass: 'tribe-has-custom-gap', - applyStyleProperty: '--tribe-custom-gap', - attribute: 'customGap', - defaultValue: '', - helpText: __( - 'The spacing variable the Columns block should use to override the default column/row gap', - 'tribe' - ), - label: __( 'Custom Spacing Gap', 'tribe' ), - type: 'select', - selectOptions: [ - { - label: __( 'No custom gap', 'tribe' ), - value: '', - }, - { - label: __( 'Spacer 10', 'tribe' ), - value: 'var(--spacer-10)', - }, - { - label: __( 'Spacer 20', 'tribe' ), - value: 'var(--spacer-20)', - }, - { - label: __( 'Spacer 30', 'tribe' ), - value: 'var(--spacer-30)', - }, - { - label: __( 'Spacer 40', 'tribe' ), - value: 'var(--spacer-40)', - }, - { - label: __( 'Spacer 50', 'tribe' ), - value: 'var(--spacer-50)', - }, - { - label: __( 'Spacer 60', 'tribe' ), - value: 'var(--spacer-60)', - }, - { - label: __( 'Spacer 70', 'tribe' ), - value: 'var(--spacer-70)', - }, - ], - }, - ], -}; - -createWPControls( settings ); diff --git a/wp-content/themes/core/blocks/core/columns/style.pcss b/wp-content/themes/core/blocks/core/columns/style.pcss index 58cc7dc4..28565336 100644 --- a/wp-content/themes/core/blocks/core/columns/style.pcss +++ b/wp-content/themes/core/blocks/core/columns/style.pcss @@ -4,8 +4,4 @@ .wp-block-columns { gap: var(--spacer-40) var(--wp--custom--spacing--grid-gutter); - - &.tribe-has-custom-gap { - gap: var(--tribe-custom-gap); - } } diff --git a/wp-content/themes/core/blocks/core/heading/style.pcss b/wp-content/themes/core/blocks/core/heading/style.pcss index 8f21e384..9c3faf60 100644 --- a/wp-content/themes/core/blocks/core/heading/style.pcss +++ b/wp-content/themes/core/blocks/core/heading/style.pcss @@ -39,8 +39,4 @@ @mixin t-display-xx-small; } - - &.has-balanced-text { - text-wrap: balance !important; - } } diff --git a/wp-content/themes/core/blocks/core/paragraph/style.pcss b/wp-content/themes/core/blocks/core/paragraph/style.pcss index dc2db9a2..86047dd7 100644 --- a/wp-content/themes/core/blocks/core/paragraph/style.pcss +++ b/wp-content/themes/core/blocks/core/paragraph/style.pcss @@ -15,8 +15,4 @@ @mixin t-body-small; } - - &.has-balanced-text { - text-wrap: balance !important; - } } From 7efa1f1beaaa617dd0686436d19216d3c4121304 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Tue, 25 Jun 2024 14:49:51 -0400 Subject: [PATCH 7/8] [MOOSE-109]: update aspect ratio helpers; remove image controls --- .../core/assets/pcss/media/_utilities.pcss | 22 +++++----- .../themes/core/blocks/core/image/editor.js | 40 ------------------- 2 files changed, 13 insertions(+), 49 deletions(-) delete mode 100644 wp-content/themes/core/blocks/core/image/editor.js diff --git a/wp-content/themes/core/assets/pcss/media/_utilities.pcss b/wp-content/themes/core/assets/pcss/media/_utilities.pcss index 324a7fd7..013e59e0 100644 --- a/wp-content/themes/core/assets/pcss/media/_utilities.pcss +++ b/wp-content/themes/core/assets/pcss/media/_utilities.pcss @@ -8,27 +8,31 @@ * exist within WP. * * Example: - *
+ *
* *
* * ------------------------------------------------------------------------- */ -.s-aspect-ratio-cover, -.s-aspect-ratio-cover > img { +.aspect-ratio-cover, +.aspect-ratio-cover > img { height: 100%; width: 100%; object-fit: cover; } -.s-aspect-ratio-1-1 { - aspect-ratio: 1 / 1; +.aspect-ratio-4-5 { + aspect-ratio: 4 / 5; } -.s-aspect-ratio-4-3 { - aspect-ratio: 4 / 3; +.aspect-ratio-5-4 { + aspect-ratio: 5 / 4; } -.s-aspect-ratio-16-9 { - aspect-ratio: 16 / 9; +.aspect-ratio-16-10 { + aspect-ratio: 16 / 10; +} + +.aspect-ratio-10-16 { + aspect-ratio: 10 / 16; } diff --git a/wp-content/themes/core/blocks/core/image/editor.js b/wp-content/themes/core/blocks/core/image/editor.js deleted file mode 100644 index 5b1ec8c6..00000000 --- a/wp-content/themes/core/blocks/core/image/editor.js +++ /dev/null @@ -1,40 +0,0 @@ -import createWPControls from 'utils/create-wp-controls'; -import { __ } from '@wordpress/i18n'; - -const settings = { - attributes: { - removeMargin: { - type: 'boolean', - }, - widthFillsContainer: { - type: 'boolean', - }, - }, - blocks: [ 'core/image' ], - controls: [ - { - applyClass: 's-remove-margin--vertical', - attribute: 'removeMargin', - defaultValue: false, - helpText: __( - 'Turning this feature on will remove default vertical margins from this block.', - 'tribe' - ), - label: __( 'Remove Margins', 'tribe' ), - type: 'toggle', - }, - { - applyClass: 'is-full-width', - attribute: 'widthFillsContainer', - defaultValue: false, - helpText: __( - 'Determines if the image should fill the width of the container it sits in. The editor must ensure the uploaded image is large enough to fill the area. If the image is not large enough to fill the area it could look pixelated.', - 'tribe' - ), - label: __( 'Width Fills Container', 'tribe' ), - type: 'toggle', - }, - ], -}; - -createWPControls( settings ); From c589363868fd4b7db64ec182c3c5fc20e5772386 Mon Sep 17 00:00:00 2001 From: Geoff Dusome Date: Tue, 25 Jun 2024 15:23:36 -0400 Subject: [PATCH 8/8] [MOOSE-109]: add docs; update changelog --- CHANGELOG.md | 2 + docs/create-wp-controls-script.md | 90 +++++++++++++++++++ .../assets/js/utils/create-wp-controls.js | 2 + 3 files changed, 94 insertions(+) create mode 100644 docs/create-wp-controls-script.md diff --git a/CHANGELOG.md b/CHANGELOG.md index b2807e87..4b657f35 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,8 @@ All notable changes to this project will be documented in this file. The format - Updated: Updated GitHub default & 3rd-party action versions to eliminate (node version warnings)[https://github.com/moderntribe/moose/actions/runs/9617664104]. - Chore: WP version to 6.5.5 - Chore: Composer updates including plugins: limit-login-attempts-reloaded (2.26.8 => 2.26.11), seo-by-rank-math (1.0.218 => 1.0.221), social-sharing-block (1.1.0 => 1.2.0), advanced-custom-fields-pro (6.2.9 => 6.3.2.1) +- Added: Create WP Controls script & documentation. +- Changed: Column block now uses the Create WP Controls script to create the "stacking order" controls. ## [2024.05] - Updated: Pattern definition consistency for usage of `Inserter:` diff --git a/docs/create-wp-controls-script.md b/docs/create-wp-controls-script.md new file mode 100644 index 00000000..a23fd413 --- /dev/null +++ b/docs/create-wp-controls-script.md @@ -0,0 +1,90 @@ +# Create WP Controls Script + +The "Create WP Controls" script is used to quickly and easily add custom, core WP controls to core blocks. Note that while this can be used to add controls to custom blocks, it should only be used with core blocks, as there are better ways to add controls to custom blocks. + +## Supported Control Types + +- [ToggleControl](https://wordpress.github.io/gutenberg/?path=/docs/components-togglecontrol--docs) / `toggle`: A true/false field that can be used to assign a class or property when the control is toggled. +- [NumberControl](https://wordpress.github.io/gutenberg/?path=/docs/components-experimental-numbercontrol--docs) / `number`: A text field that only accepts numbers. Can be used to set a property with the number entered into the field. +- [SelectControl](https://wordpress.github.io/gutenberg/?path=/docs/components-selectcontrol--docs) / `select`: A normal select box field that can be used to give the user options and assign a property based on the value selected. + +## Usage + +1. Import the script +```js +import createWPControls from 'utils/create-wp-controls'; +``` + +2. Create your settings object +```js +const settings = { + attributes: { + stackingOrder: { + type: 'string', + }, + }, + blocks: [ 'core/column' ], + controls: [ + { + applyClass: 'tribe-has-stacking-order', + applyStyleProperty: '--tribe-stacking-order', + attribute: 'stackingOrder', + defaultValue: 0, + helpText: __( + 'The stacking order of the element at mobile breakpoints. This setting only applies if the "Stack on mobile" setting for the Columns block is turned on.', + 'tribe' + ), + label: __( 'Stacking Order', 'tribe' ), + type: 'number', + }, + ], +}; +``` + +Let's break this down a little bit: + +```js +attributes: { + stackingOrder: { + type: 'string', + }, +}, +``` +> :bulb: First, we're creating an `attributes` object that is defining the attributes we want to add to the block. In this case, we're creating a `stackingOrder` attribute for the `core/column` block. + +```js +blocks: [ 'core/column' ], +``` +> :bulb: Next, we define what blocks we want the controls to appear on. In this case we're saying that this control should appear on the `core/column` block. + +```js +controls: [ + { + applyClass: 'tribe-has-stacking-order', + applyStyleProperty: '--tribe-stacking-order', + attribute: 'stackingOrder', + defaultValue: 0, + helpText: __( + 'The stacking order of the element at mobile breakpoints. This setting only applies if the "Stack on mobile" setting for the Columns block is turned on.', + 'tribe' + ), + label: __( 'Stacking Order', 'tribe' ), + type: 'number', + }, +], +``` +> :bulb: Lastly, we're defining the controls array that will be used to define what controls we want to create for the block we've defined. In this case we're defining a `number` control with a default value of `0`. The `applyClass` property tells the create control script that when the value is changed from the default, we should apply the `tribe-has-stacking-order` class. The `applyStyleProperty` property tells the create control script that the `--tribe-stacking-order` style property should be set to the value of the control when the default is changed. + +> :memo: **Note:** You do not always have to set both the `applyClass` and `applyStyleProperty` properties. You can use one or the other separately. Using them together though can be a powerful tool in order to only apply the style property if the class is applied. + +3. Call the create controls script and pass in your settings array. + +```js +createWPControls( settings ); +``` + +## Limitations + +- Because the script currently only supports specific controls, additional time will be required to extend the script if a different type of control needs to be added. This can be done in the `determineControlToRender` function within the script. Make sure to import your control type! +- Currently the script only supports adding a class or a style property. There are no other functions of the script in terms of block output. +- Not really a limitation but I should note that we shouldn't use this script unless it's decided with the project team that these controls should be created using this method. There are other ways that may be better for your projects (block styles, adding classes manually, etc). If you feel strongly that this script gives the client the best experience, go for it! diff --git a/wp-content/themes/core/assets/js/utils/create-wp-controls.js b/wp-content/themes/core/assets/js/utils/create-wp-controls.js index 6c1dfafc..44138912 100644 --- a/wp-content/themes/core/assets/js/utils/create-wp-controls.js +++ b/wp-content/themes/core/assets/js/utils/create-wp-controls.js @@ -2,6 +2,8 @@ * @module create-wp-controls * * @description handles creating WP controls given an object of settings + * + * @see https://github.com/moderntribe/moose/tree/main/docs/create-wp-controls-script.md */ import { InspectorControls } from '@wordpress/block-editor';