From 31040259e134e59c731840e1e4dd4200da026647 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Tue, 5 Dec 2023 14:01:04 -0500 Subject: [PATCH 01/37] Update PanelArea, start POC test for filtering labels --- .eslintrc.json | 2 +- src/components/panel-area/index.js | 12 +- .../controls/layout/components/Display.js | 8 +- .../controls/layout/index.js | 358 +++++++++--------- 4 files changed, 196 insertions(+), 184 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 686997cb1..dc06fc997 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -64,7 +64,7 @@ "no-alert": "error", "no-bitwise": "error", "no-caller": "error", - "no-console": "error", + "no-console": "warn", "no-const-assign": "error", "no-debugger": "error", "no-dupe-args": "error", diff --git a/src/components/panel-area/index.js b/src/components/panel-area/index.js index 9934e343b..6ba56dc4f 100644 --- a/src/components/panel-area/index.js +++ b/src/components/panel-area/index.js @@ -1,10 +1,11 @@ -import ApplyFilters from '../apply-filters/'; -import objectIsEmpty from '../../utils/object-is-empty'; import { PanelBody } from '@wordpress/components'; import { applyFilters } from '@wordpress/hooks'; +import { forwardRef } from '@wordpress/element'; +import ApplyFilters from '../apply-filters/'; +import objectIsEmpty from '../../utils/object-is-empty'; import useLocalStorageState from 'use-local-storage-state'; -export default function PanelArea( props ) { +const PanelArea = forwardRef( function PanelArea( props, ref ) { const { title = false, initialOpen = false, @@ -37,6 +38,7 @@ export default function PanelArea( props ) { { title ? ( ); -} +} ); + +export default PanelArea; diff --git a/src/extend/inspector-control/controls/layout/components/Display.js b/src/extend/inspector-control/controls/layout/components/Display.js index c700df225..f42f31cac 100644 --- a/src/extend/inspector-control/controls/layout/components/Display.js +++ b/src/extend/inspector-control/controls/layout/components/Display.js @@ -1,10 +1,16 @@ import { __ } from '@wordpress/i18n'; import { SelectControl } from '@wordpress/components'; +import { applyFilters } from '@wordpress/hooks'; export default function Display( { value, onChange } ) { return ( { !! useInnerContainer && - + } { layout.display && ! useInnerContainer && - setAttributes( { - [ getAttribute( 'display', componentProps, true ) ]: nextDisplay, - } ) } - /> + setAttributes( { + [ getAttribute( 'display', componentProps, true ) ]: nextDisplay, + } ) } + /> } { isFlexItem( { device, display, displayTablet, displayMobile } ) && ! useInnerContainer && - <> - { layout.flexDirection && - { - const currentDirection = getAttribute( 'flexDirection', componentProps ); - value = currentDirection.includes( 'reverse' ) ? value + '-reverse' : value; + <> + { layout.flexDirection && + { + const currentDirection = getAttribute( 'flexDirection', componentProps ); + value = currentDirection.includes( 'reverse' ) ? value + '-reverse' : value; - setAttributes( { - [ getAttribute( 'flexDirection', componentProps, true ) ]: value !== getAttribute( 'flexDirection', componentProps ) ? value : '', - } ); - } } - onReverse={ ( value ) => { - if ( '' === value ) { - value = 'row'; - } + setAttributes( { + [ getAttribute( 'flexDirection', componentProps, true ) ]: value !== getAttribute( 'flexDirection', componentProps ) ? value : '', + } ); + } } + onReverse={ ( value ) => { + if ( '' === value ) { + value = 'row'; + } - value = value.includes( 'reverse' ) ? value.replace( '-reverse', '' ) : value + '-reverse'; + value = value.includes( 'reverse' ) ? value.replace( '-reverse', '' ) : value + '-reverse'; - setAttributes( { - [ getAttribute( 'flexDirection', componentProps, true ) ]: value, - } ); - } } - label={ __( 'Direction', 'generateblocks' ) } - directionValue={ directionValue } - fallback={ getResponsivePlaceholder( 'flexDirection', attributes, device, 'row' ) } - /> - } + setAttributes( { + [ getAttribute( 'flexDirection', componentProps, true ) ]: value, + } ); + } } + label={ __( 'Direction', 'generateblocks' ) } + directionValue={ directionValue } + fallback={ getResponsivePlaceholder( 'flexDirection', attributes, device, 'row' ) } + /> + } - { layout.alignItems && - setAttributes( { - [ getAttribute( 'alignItems', componentProps, true ) ]: value !== getAttribute( 'alignItems', componentProps ) ? value : '', - } ) } - label={ __( 'Align Items', 'generateblocks' ) } - attributeName="alignItems" - directionValue={ directionValue } - fallback={ getResponsivePlaceholder( 'alignItems', attributes, device, '' ) } - /> - } + { layout.alignItems && + setAttributes( { + [ getAttribute( 'alignItems', componentProps, true ) ]: value !== getAttribute( 'alignItems', componentProps ) ? value : '', + } ) } + label={ __( 'Align Items', 'generateblocks' ) } + attributeName="alignItems" + directionValue={ directionValue } + fallback={ getResponsivePlaceholder( 'alignItems', attributes, device, '' ) } + /> + } - { layout.justifyContent && - setAttributes( { - [ getAttribute( 'justifyContent', componentProps, true ) ]: value !== getAttribute( 'justifyContent', componentProps ) ? value : '', - } ) } - label={ __( 'Justify Content', 'generateblocks' ) } - attributeName="justifyContent" - directionValue={ directionValue } - fallback={ getResponsivePlaceholder( 'justifyContent', attributes, device, '' ) } - /> - } + { layout.justifyContent && + setAttributes( { + [ getAttribute( 'justifyContent', componentProps, true ) ]: value !== getAttribute( 'justifyContent', componentProps ) ? value : '', + } ) } + label={ __( 'Justify Content', 'generateblocks' ) } + attributeName="justifyContent" + directionValue={ directionValue } + fallback={ getResponsivePlaceholder( 'justifyContent', attributes, device, '' ) } + /> + } - { layout.flexWrap && - setAttributes( { - [ getAttribute( 'flexWrap', componentProps, true ) ]: value !== getAttribute( 'flexWrap', componentProps ) ? value : '', - } ) } - label={ __( 'Wrap', 'generateblocks' ) } - attributeName="flexWrap" - directionValue={ directionValue } - fallback={ getResponsivePlaceholder( 'flexWrap', attributes, device, '' ) } - /> - } + { layout.flexWrap && + setAttributes( { + [ getAttribute( 'flexWrap', componentProps, true ) ]: value !== getAttribute( 'flexWrap', componentProps ) ? value : '', + } ) } + label={ __( 'Wrap', 'generateblocks' ) } + attributeName="flexWrap" + directionValue={ directionValue } + fallback={ getResponsivePlaceholder( 'flexWrap', attributes, device, '' ) } + /> + } - { ( layout.columnGap || layout.rowGap ) && - - { layout.columnGap && - setAttributes( { - [ getAttribute( 'columnGap', componentProps, true ) ]: value, - } ) } - /> - } + { ( layout.columnGap || layout.rowGap ) && + + { layout.columnGap && + setAttributes( { + [ getAttribute( 'columnGap', componentProps, true ) ]: value, + } ) } + /> + } - { layout.rowGap && - setAttributes( { - [ getAttribute( 'rowGap', componentProps, true ) ]: value, - } ) } - /> - } - + { layout.rowGap && + setAttributes( { + [ getAttribute( 'rowGap', componentProps, true ) ]: value, + } ) } + /> } - + + } + } { ! useInnerContainer && - <> - { layout.position && - setAttributes( { - [ getAttribute( 'position', componentProps, true ) ]: value, - } ) } - /> - } + <> + { layout.position && + setAttributes( { + [ getAttribute( 'position', componentProps, true ) ]: value, + } ) } + /> + } - { layout.overflow && - - setAttributes( { - [ getAttribute( 'overflowX', componentProps, true ) ]: value, - } ) } - /> + { layout.overflow && + + setAttributes( { + [ getAttribute( 'overflowX', componentProps, true ) ]: value, + } ) } + /> - setAttributes( { - [ getAttribute( 'overflowY', componentProps, true ) ]: value, - } ) } - /> - - } - + setAttributes( { + [ getAttribute( 'overflowY', componentProps, true ) ]: value, + } ) } + /> + + } + } { layout.zIndex && + <> + { !! useInnerContainer && 'Desktop' === device && <> - { !! useInnerContainer && 'Desktop' === device && - <> - setAttributes( { zindex: value } ) } - /> - - setAttributes( { innerZindex: value } ) } - /> - - } + setAttributes( { zindex: value } ) } + /> - { ! useInnerContainer && - setAttributes( { - [ getAttribute( 'zindex', componentProps, true ) ]: value, - [ getAttribute( 'position', componentProps, true ) ]: ! getAttribute( 'position', componentProps ) - ? 'relative' - : getAttribute( 'position', componentProps ), - } ) } - /> - } + setAttributes( { innerZindex: value } ) } + /> + } + + { ! useInnerContainer && + setAttributes( { + [ getAttribute( 'zindex', componentProps, true ) ]: value, + [ getAttribute( 'position', componentProps, true ) ]: ! getAttribute( 'position', componentProps ) + ? 'relative' + : getAttribute( 'position', componentProps ), + } ) } + /> + } + } { layout.themeWidth && - <> - { - setAttributes( { - align: value, - } ); - } } - /> - + <> + { + setAttributes( { + align: value, + } ); + } } + /> + } { !! useInnerContainer && - + } { flexChildPanel.enabled && - + } ); From a7ceb193d69c0175b4d6b1293a9cc96a4644dbb7 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Tue, 5 Dec 2023 14:18:00 -0500 Subject: [PATCH 02/37] Apply additional label filters for testing --- .../controls/layout/index.js | 33 ++++++++++++++++--- 1 file changed, 28 insertions(+), 5 deletions(-) diff --git a/src/extend/inspector-control/controls/layout/index.js b/src/extend/inspector-control/controls/layout/index.js index 2ffa78c0d..e668a8909 100644 --- a/src/extend/inspector-control/controls/layout/index.js +++ b/src/extend/inspector-control/controls/layout/index.js @@ -1,7 +1,10 @@ import { __ } from '@wordpress/i18n'; +import { useContext, useRef, useState } from '@wordpress/element'; +import { SelectControl } from '@wordpress/components'; +import { applyFilters } from '@wordpress/hooks'; + import PanelArea from '../../../../components/panel-area'; import getIcon from '../../../../utils/get-icon'; -import { useContext, useRef, useState } from '@wordpress/element'; import ControlsContext from '../../../../block-context'; import LayoutControl from './components/LayoutControl'; import Display from './components/Display'; @@ -14,7 +17,6 @@ import ZIndex from './components/ZIndex'; import FlexChild from '../flex-child-panel'; import MigrateInnerContainer from '../../../../components/migrate-inner-container'; import UnitControl from '../../../../components/unit-control'; -import { SelectControl } from '@wordpress/components'; import { positionOptions, overflowOptions } from './options'; import FlexControl from '../../../../components/flex-control'; import getDeviceType from '../../../../utils/get-device-type'; @@ -42,6 +44,27 @@ export default function Layout( { attributes, setAttributes } ) { const directionValue = getAttribute( 'flexDirection', componentProps ) || getResponsivePlaceholder( 'flexDirection', attributes, device, 'row' ); + const labels = { + columnGap: applyFilters( + 'generateblocks.editor.control.label', + __( 'Column Gap', 'generateblocks' ), + getAttribute( 'columnGap', componentProps ), + 'columnGap', + ), + rowGap: applyFilters( + 'generateblocks.editor.control.label', + __( 'Row Gap', 'generateblocks' ), + getAttribute( 'rowGap', componentProps ), + 'rowGap', + ), + flexDirection: applyFilters( + 'generateblocks.editor.control.label', + __( 'Direction', 'generateblocks' ), + directionValue, + 'flexDirection', + ), + }; + return ( @@ -142,7 +165,7 @@ export default function Layout( { attributes, setAttributes } ) { { layout.columnGap && Date: Wed, 6 Dec 2023 10:58:19 -0500 Subject: [PATCH 03/37] Update context to use original blockName key instead of ID This will make the code more clear also --- src/block-context/button-container.js | 2 +- src/block-context/button.js | 2 +- src/block-context/container.js | 2 +- src/block-context/grid.js | 2 +- src/block-context/headline.js | 2 +- src/block-context/image.js | 2 +- src/components/panel-area/index.js | 12 ++++++++++-- 7 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/block-context/button-container.js b/src/block-context/button-container.js index 8242f3be7..4f9f6e340 100644 --- a/src/block-context/button-container.js +++ b/src/block-context/button-container.js @@ -2,7 +2,7 @@ import defaultContext from './default'; import { defaultsDeep } from 'lodash'; const buttonContainerContext = defaultsDeep( { - id: 'buttonContainer', + blockName: 'buttonContainer', supports: { responsiveTabs: true, spacing: { diff --git a/src/block-context/button.js b/src/block-context/button.js index 7c62c2b06..2594ce1f3 100644 --- a/src/block-context/button.js +++ b/src/block-context/button.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const buttonContext = defaultsDeep( { - id: 'button', + blockName: 'button', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/block-context/container.js b/src/block-context/container.js index b60a04744..0d949ad0a 100644 --- a/src/block-context/container.js +++ b/src/block-context/container.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const containerContext = defaultsDeep( { - id: 'container', + blockName: 'container', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/block-context/grid.js b/src/block-context/grid.js index 3eb3ad9d8..8ec7e6efd 100644 --- a/src/block-context/grid.js +++ b/src/block-context/grid.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const gridContext = defaultsDeep( { - id: 'grid', + blockName: 'grid', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/block-context/headline.js b/src/block-context/headline.js index 369040db3..83a758069 100644 --- a/src/block-context/headline.js +++ b/src/block-context/headline.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const headlineContext = defaultsDeep( { - id: 'headline', + blockName: 'headline', supports: { responsiveTabs: true, layout: { diff --git a/src/block-context/image.js b/src/block-context/image.js index 7c0f816a7..549da5034 100644 --- a/src/block-context/image.js +++ b/src/block-context/image.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const imageContext = defaultsDeep( { - id: 'image', + blockName: 'image', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/components/panel-area/index.js b/src/components/panel-area/index.js index 6ba56dc4f..d6f3e43c7 100644 --- a/src/components/panel-area/index.js +++ b/src/components/panel-area/index.js @@ -1,9 +1,10 @@ import { PanelBody } from '@wordpress/components'; import { applyFilters } from '@wordpress/hooks'; -import { forwardRef } from '@wordpress/element'; +import { forwardRef, useContext } from '@wordpress/element'; import ApplyFilters from '../apply-filters/'; import objectIsEmpty from '../../utils/object-is-empty'; import useLocalStorageState from 'use-local-storage-state'; +import ControlsContext from '../../block-context'; const PanelArea = forwardRef( function PanelArea( props, ref ) { const { @@ -17,6 +18,8 @@ const PanelArea = forwardRef( function PanelArea( props, ref ) { children, } = props; + const { blockName } = useContext( ControlsContext ); + const [ panels, setPanels ] = useLocalStorageState( 'generateblocksPanels', { ssr: true, @@ -35,7 +38,12 @@ const PanelArea = forwardRef( function PanelArea( props, ref ) { } return ( - + { title ? ( Date: Wed, 6 Dec 2023 10:59:00 -0500 Subject: [PATCH 04/37] WIP refactor to use new ids and blockName pattern --- .../inspector-control/controls/background-panel/index.js | 8 ++++---- src/extend/inspector-control/controls/borders/index.js | 4 ++-- src/extend/inspector-control/controls/colors/index.js | 4 ++-- .../inspector-control/controls/flex-child-panel/index.js | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/extend/inspector-control/controls/background-panel/index.js b/src/extend/inspector-control/controls/background-panel/index.js index f832a841c..efe676bca 100644 --- a/src/extend/inspector-control/controls/background-panel/index.js +++ b/src/extend/inspector-control/controls/background-panel/index.js @@ -13,7 +13,7 @@ import Attachment from './components/attachment'; import GradientControl from '../../../../components/gradient'; export default function BackgroundPanel( { attributes, setAttributes } ) { - const { id, isInQueryLoop, supports: { backgroundPanel } } = useContext( ControlsContext ); + const { blockName, isInQueryLoop, supports: { backgroundPanel } } = useContext( ControlsContext ); const { bgImage, @@ -30,9 +30,9 @@ export default function BackgroundPanel( { attributes, setAttributes } ) { initialOpen={ false } icon={ getIcon( 'gradients' ) } className={ 'gblocks-panel-label' } - id={ `${ id }Background` } attributes={ attributes } setAttributes={ setAttributes } + id="backgrounds" > { !! backgroundPanel.backgroundImage && <> @@ -97,8 +97,8 @@ export default function BackgroundPanel( { attributes, setAttributes } ) { attrGradientColorStopTwo={ 'gradientColorStopTwo' } attrGradientColorOneOpacity={ 'gradientColorOneOpacity' } attrGradientColorTwoOpacity={ 'gradientColorTwoOpacity' } - defaultColorOne={ generateBlocksDefaults[ id ].gradientColorOne } - defaultColorTwo={ generateBlocksDefaults[ id ].gradientColorTwo } + defaultColorOne={ generateBlocksDefaults[ blockName ].gradientColorOne } + defaultColorTwo={ generateBlocksDefaults[ blockName ].gradientColorTwo } /> } diff --git a/src/extend/inspector-control/controls/borders/index.js b/src/extend/inspector-control/controls/borders/index.js index ab53ae38a..e4d05e6ee 100644 --- a/src/extend/inspector-control/controls/borders/index.js +++ b/src/extend/inspector-control/controls/borders/index.js @@ -19,7 +19,7 @@ import { isEqual, isEmpty } from 'lodash'; export default function Borders( { attributes, setAttributes } ) { const device = getDeviceType(); - const { id, supports: { borders: bordersPanel } } = useContext( ControlsContext ); + const { supports: { borders: bordersPanel } } = useContext( ControlsContext ); const [ deviceAttributes, setDeviceAttributes ] = useDeviceAttributes( attributes, setAttributes ); const borderRadiusAttributes = [ 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius' ]; const borderAreas = [ 'borderTop', 'borderRight', 'borderBottom', 'borderLeft' ]; @@ -90,7 +90,7 @@ export default function Borders( { attributes, setAttributes } ) { initialOpen={ false } icon={ getIcon( 'borders' ) } className="gblocks-panel-label" - id={ `${ id }Borders` } + id="borders" > { ( bordersPanel.borderTop || bordersPanel.borderRight || bordersPanel.borderBottom || bordersPanel.borderLeft ) && { flexChildPanel.flex && ( ! useInnerContainer || ( useInnerContainer && isGrid ) ) && Date: Wed, 6 Dec 2023 10:59:19 -0500 Subject: [PATCH 05/37] Update IconPicker to use blockName --- src/components/icon-picker/index.js | 4 ++-- src/extend/inspector-control/controls/icon/index.js | 5 ++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/icon-picker/index.js b/src/components/icon-picker/index.js index 25e29870e..b850e9dc3 100644 --- a/src/components/icon-picker/index.js +++ b/src/components/icon-picker/index.js @@ -56,7 +56,7 @@ class IconPicker extends Component { attrIconLocation, locationOptions, attrRemoveText, - id, + blockName, } = this.props; let iconSVGSets = { @@ -75,7 +75,7 @@ class IconPicker extends Component { const flexAttributes = {}; if ( ! attributes.display.includes( 'flex' ) ) { - flexAttributes.display = 'headline' === id ? 'flex' : 'inline-flex'; + flexAttributes.display = 'headline' === blockName ? 'flex' : 'inline-flex'; } if ( ! attributes.alignItems ) { diff --git a/src/extend/inspector-control/controls/icon/index.js b/src/extend/inspector-control/controls/icon/index.js index a9be44b43..2453a5bfc 100644 --- a/src/extend/inspector-control/controls/icon/index.js +++ b/src/extend/inspector-control/controls/icon/index.js @@ -12,7 +12,7 @@ import getResponsivePlaceholder from '../../../../utils/get-responsive-placehold import getAttribute from '../../../../utils/get-attribute'; export default function IconControls( { attributes, setAttributes } ) { - const { id, supports: { icon: iconSupport } } = useContext( ControlsContext ); + const { supports: { icon: iconSupport } } = useContext( ControlsContext ); const device = getDeviceType(); const { @@ -29,7 +29,7 @@ export default function IconControls( { attributes, setAttributes } ) { initialOpen={ false } icon={ getIcon( 'icons' ) } className="gblocks-panel-label" - id={ `${ id }Icon` } + id="icon" > { 'Desktop' === device && <> @@ -39,7 +39,6 @@ export default function IconControls( { attributes, setAttributes } ) { attrIcon={ 'icon' } attrRemoveText={ 'removeText' } attrAriaLabel={ 'ariaLabel' } - id={ id } /> { !! icon && ! removeText && From 919f3d07d6a912b517c88c6aab7021e6de888da8 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 6 Dec 2023 10:59:27 -0500 Subject: [PATCH 06/37] Remove extra import --- src/extend/inspector-control/controls/layout/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extend/inspector-control/controls/layout/index.js b/src/extend/inspector-control/controls/layout/index.js index e668a8909..7ec271e26 100644 --- a/src/extend/inspector-control/controls/layout/index.js +++ b/src/extend/inspector-control/controls/layout/index.js @@ -1,5 +1,5 @@ import { __ } from '@wordpress/i18n'; -import { useContext, useRef, useState } from '@wordpress/element'; +import { useContext, useRef } from '@wordpress/element'; import { SelectControl } from '@wordpress/components'; import { applyFilters } from '@wordpress/hooks'; From 65c4368fa627826bf36a839260534e5561298cd3 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 6 Dec 2023 11:15:01 -0500 Subject: [PATCH 07/37] Revert context changes This reverts commit bd908579d69cfa4777c05b2734e490e3bd25c99c. --- src/block-context/button-container.js | 2 +- src/block-context/button.js | 2 +- src/block-context/container.js | 2 +- src/block-context/grid.js | 2 +- src/block-context/headline.js | 2 +- src/block-context/image.js | 2 +- src/components/icon-picker/index.js | 4 ++-- src/components/panel-area/index.js | 12 ++---------- .../controls/background-panel/index.js | 8 ++++---- .../inspector-control/controls/borders/index.js | 4 ++-- .../inspector-control/controls/colors/index.js | 4 ++-- .../controls/flex-child-panel/index.js | 4 ++-- src/extend/inspector-control/controls/icon/index.js | 5 +++-- 13 files changed, 23 insertions(+), 30 deletions(-) diff --git a/src/block-context/button-container.js b/src/block-context/button-container.js index 4f9f6e340..8242f3be7 100644 --- a/src/block-context/button-container.js +++ b/src/block-context/button-container.js @@ -2,7 +2,7 @@ import defaultContext from './default'; import { defaultsDeep } from 'lodash'; const buttonContainerContext = defaultsDeep( { - blockName: 'buttonContainer', + id: 'buttonContainer', supports: { responsiveTabs: true, spacing: { diff --git a/src/block-context/button.js b/src/block-context/button.js index 2594ce1f3..7c62c2b06 100644 --- a/src/block-context/button.js +++ b/src/block-context/button.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const buttonContext = defaultsDeep( { - blockName: 'button', + id: 'button', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/block-context/container.js b/src/block-context/container.js index 0d949ad0a..b60a04744 100644 --- a/src/block-context/container.js +++ b/src/block-context/container.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const containerContext = defaultsDeep( { - blockName: 'container', + id: 'container', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/block-context/grid.js b/src/block-context/grid.js index 8ec7e6efd..3eb3ad9d8 100644 --- a/src/block-context/grid.js +++ b/src/block-context/grid.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const gridContext = defaultsDeep( { - blockName: 'grid', + id: 'grid', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/block-context/headline.js b/src/block-context/headline.js index 83a758069..369040db3 100644 --- a/src/block-context/headline.js +++ b/src/block-context/headline.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const headlineContext = defaultsDeep( { - blockName: 'headline', + id: 'headline', supports: { responsiveTabs: true, layout: { diff --git a/src/block-context/image.js b/src/block-context/image.js index 549da5034..7c0f816a7 100644 --- a/src/block-context/image.js +++ b/src/block-context/image.js @@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n'; import { defaultsDeep } from 'lodash'; const imageContext = defaultsDeep( { - blockName: 'image', + id: 'image', supports: { responsiveTabs: true, settingsPanel: { diff --git a/src/components/icon-picker/index.js b/src/components/icon-picker/index.js index b850e9dc3..25e29870e 100644 --- a/src/components/icon-picker/index.js +++ b/src/components/icon-picker/index.js @@ -56,7 +56,7 @@ class IconPicker extends Component { attrIconLocation, locationOptions, attrRemoveText, - blockName, + id, } = this.props; let iconSVGSets = { @@ -75,7 +75,7 @@ class IconPicker extends Component { const flexAttributes = {}; if ( ! attributes.display.includes( 'flex' ) ) { - flexAttributes.display = 'headline' === blockName ? 'flex' : 'inline-flex'; + flexAttributes.display = 'headline' === id ? 'flex' : 'inline-flex'; } if ( ! attributes.alignItems ) { diff --git a/src/components/panel-area/index.js b/src/components/panel-area/index.js index d6f3e43c7..6ba56dc4f 100644 --- a/src/components/panel-area/index.js +++ b/src/components/panel-area/index.js @@ -1,10 +1,9 @@ import { PanelBody } from '@wordpress/components'; import { applyFilters } from '@wordpress/hooks'; -import { forwardRef, useContext } from '@wordpress/element'; +import { forwardRef } from '@wordpress/element'; import ApplyFilters from '../apply-filters/'; import objectIsEmpty from '../../utils/object-is-empty'; import useLocalStorageState from 'use-local-storage-state'; -import ControlsContext from '../../block-context'; const PanelArea = forwardRef( function PanelArea( props, ref ) { const { @@ -18,8 +17,6 @@ const PanelArea = forwardRef( function PanelArea( props, ref ) { children, } = props; - const { blockName } = useContext( ControlsContext ); - const [ panels, setPanels ] = useLocalStorageState( 'generateblocksPanels', { ssr: true, @@ -38,12 +35,7 @@ const PanelArea = forwardRef( function PanelArea( props, ref ) { } return ( - + { title ? ( { !! backgroundPanel.backgroundImage && <> @@ -97,8 +97,8 @@ export default function BackgroundPanel( { attributes, setAttributes } ) { attrGradientColorStopTwo={ 'gradientColorStopTwo' } attrGradientColorOneOpacity={ 'gradientColorOneOpacity' } attrGradientColorTwoOpacity={ 'gradientColorTwoOpacity' } - defaultColorOne={ generateBlocksDefaults[ blockName ].gradientColorOne } - defaultColorTwo={ generateBlocksDefaults[ blockName ].gradientColorTwo } + defaultColorOne={ generateBlocksDefaults[ id ].gradientColorOne } + defaultColorTwo={ generateBlocksDefaults[ id ].gradientColorTwo } /> } diff --git a/src/extend/inspector-control/controls/borders/index.js b/src/extend/inspector-control/controls/borders/index.js index e4d05e6ee..ab53ae38a 100644 --- a/src/extend/inspector-control/controls/borders/index.js +++ b/src/extend/inspector-control/controls/borders/index.js @@ -19,7 +19,7 @@ import { isEqual, isEmpty } from 'lodash'; export default function Borders( { attributes, setAttributes } ) { const device = getDeviceType(); - const { supports: { borders: bordersPanel } } = useContext( ControlsContext ); + const { id, supports: { borders: bordersPanel } } = useContext( ControlsContext ); const [ deviceAttributes, setDeviceAttributes ] = useDeviceAttributes( attributes, setAttributes ); const borderRadiusAttributes = [ 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius' ]; const borderAreas = [ 'borderTop', 'borderRight', 'borderBottom', 'borderLeft' ]; @@ -90,7 +90,7 @@ export default function Borders( { attributes, setAttributes } ) { initialOpen={ false } icon={ getIcon( 'borders' ) } className="gblocks-panel-label" - id="borders" + id={ `${ id }Borders` } > { ( bordersPanel.borderTop || bordersPanel.borderRight || bordersPanel.borderBottom || bordersPanel.borderLeft ) && { flexChildPanel.flex && ( ! useInnerContainer || ( useInnerContainer && isGrid ) ) && { 'Desktop' === device && <> @@ -39,6 +39,7 @@ export default function IconControls( { attributes, setAttributes } ) { attrIcon={ 'icon' } attrRemoveText={ 'removeText' } attrAriaLabel={ 'ariaLabel' } + id={ id } /> { !! icon && ! removeText && From 375f82f31a8d6fc7a0165dcb14fa44cf889bbf2c Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Wed, 6 Dec 2023 11:25:03 -0500 Subject: [PATCH 08/37] Update ApplyFilters pattern to be more flexible --- src/components/panel-area/index.js | 6 ++++-- .../inspector-control/controls/background-panel/index.js | 2 +- src/extend/inspector-control/controls/borders/index.js | 4 ++-- src/extend/inspector-control/controls/colors/index.js | 4 ++-- .../inspector-control/controls/flex-child-panel/index.js | 2 +- src/extend/inspector-control/controls/icon/index.js | 2 +- src/extend/inspector-control/controls/layout/index.js | 4 ++-- .../inspector-control/controls/settings-panel/index.js | 4 ++-- src/extend/inspector-control/controls/shapes-panel/index.js | 6 ++---- src/extend/inspector-control/controls/sizing/index.js | 4 ++-- src/extend/inspector-control/controls/spacing/index.js | 4 ++-- src/extend/inspector-control/controls/typography/index.js | 4 ++-- 12 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/components/panel-area/index.js b/src/components/panel-area/index.js index 6ba56dc4f..973c8a1e7 100644 --- a/src/components/panel-area/index.js +++ b/src/components/panel-area/index.js @@ -1,11 +1,13 @@ import { PanelBody } from '@wordpress/components'; import { applyFilters } from '@wordpress/hooks'; -import { forwardRef } from '@wordpress/element'; +import { forwardRef, useContext } from '@wordpress/element'; import ApplyFilters from '../apply-filters/'; import objectIsEmpty from '../../utils/object-is-empty'; import useLocalStorageState from 'use-local-storage-state'; +import ControlsContext from '../../block-context'; const PanelArea = forwardRef( function PanelArea( props, ref ) { + const { blockName } = useContext( ControlsContext ); const { title = false, initialOpen = false, @@ -35,7 +37,7 @@ const PanelArea = forwardRef( function PanelArea( props, ref ) { } return ( - + { title ? ( diff --git a/src/extend/inspector-control/controls/borders/index.js b/src/extend/inspector-control/controls/borders/index.js index ab53ae38a..e4d05e6ee 100644 --- a/src/extend/inspector-control/controls/borders/index.js +++ b/src/extend/inspector-control/controls/borders/index.js @@ -19,7 +19,7 @@ import { isEqual, isEmpty } from 'lodash'; export default function Borders( { attributes, setAttributes } ) { const device = getDeviceType(); - const { id, supports: { borders: bordersPanel } } = useContext( ControlsContext ); + const { supports: { borders: bordersPanel } } = useContext( ControlsContext ); const [ deviceAttributes, setDeviceAttributes ] = useDeviceAttributes( attributes, setAttributes ); const borderRadiusAttributes = [ 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius' ]; const borderAreas = [ 'borderTop', 'borderRight', 'borderBottom', 'borderLeft' ]; @@ -90,7 +90,7 @@ export default function Borders( { attributes, setAttributes } ) { initialOpen={ false } icon={ getIcon( 'borders' ) } className="gblocks-panel-label" - id={ `${ id }Borders` } + id="borders" > { ( bordersPanel.borderTop || bordersPanel.borderRight || bordersPanel.borderBottom || bordersPanel.borderLeft ) && { flexChildPanel.flex && ( ! useInnerContainer || ( useInnerContainer && isGrid ) ) && { 'Desktop' === device && <> diff --git a/src/extend/inspector-control/controls/layout/index.js b/src/extend/inspector-control/controls/layout/index.js index 7ec271e26..44f2ec4c5 100644 --- a/src/extend/inspector-control/controls/layout/index.js +++ b/src/extend/inspector-control/controls/layout/index.js @@ -24,7 +24,7 @@ import ThemeWidth from './components/ThemeWidth'; export default function Layout( { attributes, setAttributes } ) { const device = getDeviceType(); - const { id, supports: { layout, flexChildPanel } } = useContext( ControlsContext ); + const { supports: { layout, flexChildPanel } } = useContext( ControlsContext ); const panelRef = useRef( null ); const componentProps = { @@ -71,7 +71,7 @@ export default function Layout( { attributes, setAttributes } ) { initialOpen={ false } icon={ getIcon( 'layout' ) } className="gblocks-panel-label" - id={ `${ id }Layout` } + id="layout" ref={ panelRef } > { !! useInnerContainer && diff --git a/src/extend/inspector-control/controls/settings-panel/index.js b/src/extend/inspector-control/controls/settings-panel/index.js index 757b4e27c..297d95735 100644 --- a/src/extend/inspector-control/controls/settings-panel/index.js +++ b/src/extend/inspector-control/controls/settings-panel/index.js @@ -4,7 +4,7 @@ import { useContext } from '@wordpress/element'; import ControlsContext from '../../../../block-context'; export default function SettingsPanel( { children } ) { - const { id, supports: { settingsPanel } } = useContext( ControlsContext ); + const { supports: { settingsPanel } } = useContext( ControlsContext ); return ( { children } diff --git a/src/extend/inspector-control/controls/shapes-panel/index.js b/src/extend/inspector-control/controls/shapes-panel/index.js index b61af46ea..71e681495 100644 --- a/src/extend/inspector-control/controls/shapes-panel/index.js +++ b/src/extend/inspector-control/controls/shapes-panel/index.js @@ -1,8 +1,7 @@ import { __, sprintf } from '@wordpress/i18n'; import PanelArea from '../../../../components/panel-area'; import getIcon from '../../../../utils/get-icon'; -import { Fragment, useContext } from '@wordpress/element'; -import ControlsContext from '../../../../block-context'; +import { Fragment } from '@wordpress/element'; import classnames from 'classnames'; import sanitizeSVG from '../../../../utils/sanitize-svg'; import { @@ -20,7 +19,6 @@ import UnitPicker from '../../../../components/unit-picker'; import getDeviceType from '../../../../utils/get-device-type'; export default function ShapesPanel( { attributes, setAttributes } ) { - const { id } = useContext( ControlsContext ); const deviceType = getDeviceType(); const { backgroundColor, @@ -78,7 +76,7 @@ export default function ShapesPanel( { attributes, setAttributes } ) { initialOpen={ false } icon={ getIcon( 'shapes' ) } className={ 'gblocks-panel-label' } - id={ `${ id }Shapes` } + id="shapes" > { diff --git a/src/extend/inspector-control/controls/sizing/index.js b/src/extend/inspector-control/controls/sizing/index.js index a2946c8f9..6c53c728f 100644 --- a/src/extend/inspector-control/controls/sizing/index.js +++ b/src/extend/inspector-control/controls/sizing/index.js @@ -16,7 +16,7 @@ import getDeviceType from '../../../../utils/get-device-type'; import getResponsivePlaceholder from '../../../../utils/get-responsive-placeholder'; export default function Sizing( props ) { - const { id, supports: { sizingPanel } } = useContext( ControlsContext ); + const { supports: { sizingPanel } } = useContext( ControlsContext ); const device = getDeviceType(); const { attributes, @@ -42,7 +42,7 @@ export default function Sizing( props ) { initialOpen={ false } icon={ getIcon( 'sizing' ) } className="gblocks-panel-label" - id={ `${ id }Sizing` } + id="sizing" >
{ sizingPanel.width && diff --git a/src/extend/inspector-control/controls/spacing/index.js b/src/extend/inspector-control/controls/spacing/index.js index 338ea9326..1978d8a33 100644 --- a/src/extend/inspector-control/controls/spacing/index.js +++ b/src/extend/inspector-control/controls/spacing/index.js @@ -11,7 +11,7 @@ import DimensionsControl from '../../../../components/dimensions'; export default function Spacing( { attributes, setAttributes, computedStyles } ) { const device = getDeviceType(); - const { id, supports: { spacing } } = useContext( ControlsContext ); + const { supports: { spacing } } = useContext( ControlsContext ); const [ deviceAttributes, setDeviceAttributes ] = useDeviceAttributes( attributes, setAttributes ); const { @@ -35,7 +35,7 @@ export default function Spacing( { attributes, setAttributes, computedStyles } ) initialOpen={ false } icon={ getIcon( 'spacing' ) } className="gblocks-panel-label" - id={ `${ id }Spacing` } + id="spacing" > { spacing.padding && { typographySupports.alignment && Date: Thu, 7 Dec 2023 12:28:17 -0500 Subject: [PATCH 09/37] Adds necessary updates for styles indicator to function --- src/components/apply-filters/index.js | 31 +++++-------- src/components/panel-area/index.js | 8 +++- .../controls/layout/components/Display.js | 26 ----------- .../controls/layout/index.js | 45 +++++++++++++++---- src/utils/is-flex-item/index.js | 4 +- 5 files changed, 58 insertions(+), 56 deletions(-) delete mode 100644 src/extend/inspector-control/controls/layout/components/Display.js diff --git a/src/components/apply-filters/index.js b/src/components/apply-filters/index.js index 61d3c7e77..2dfeb3ba5 100644 --- a/src/components/apply-filters/index.js +++ b/src/components/apply-filters/index.js @@ -3,28 +3,19 @@ */ import { applyFilters, + doAction, } from '@wordpress/hooks'; -import { - Component, -} from '@wordpress/element'; +export default function ApplyFilters( props ) { + const { name, children } = props; + doAction( 'generateblocks.editor.panel.beforeFilters', props ); -/** - * Component Class - */ -export default class ApplyFilters extends Component { - render() { - const { + return ( + applyFilters( name, - children, - } = this.props; - - return ( - applyFilters( - name, - children || '', - this.props, - ) - ); - } + children || '', + props, + ) + ); } + diff --git a/src/components/panel-area/index.js b/src/components/panel-area/index.js index 973c8a1e7..9c54ddfaf 100644 --- a/src/components/panel-area/index.js +++ b/src/components/panel-area/index.js @@ -37,7 +37,13 @@ const PanelArea = forwardRef( function PanelArea( props, ref ) { } return ( - + { title ? ( - ); -} diff --git a/src/extend/inspector-control/controls/layout/index.js b/src/extend/inspector-control/controls/layout/index.js index 44f2ec4c5..ac1ba0f2f 100644 --- a/src/extend/inspector-control/controls/layout/index.js +++ b/src/extend/inspector-control/controls/layout/index.js @@ -1,5 +1,5 @@ import { __ } from '@wordpress/i18n'; -import { useContext, useRef } from '@wordpress/element'; +import { useContext, useRef, useState } from '@wordpress/element'; import { SelectControl } from '@wordpress/components'; import { applyFilters } from '@wordpress/hooks'; @@ -7,7 +7,6 @@ import PanelArea from '../../../../components/panel-area'; import getIcon from '../../../../utils/get-icon'; import ControlsContext from '../../../../block-context'; import LayoutControl from './components/LayoutControl'; -import Display from './components/Display'; import isFlexItem from '../../../../utils/is-flex-item'; import getAttribute from '../../../../utils/get-attribute'; import getResponsivePlaceholder from '../../../../utils/get-responsive-placeholder'; @@ -26,6 +25,16 @@ export default function Layout( { attributes, setAttributes } ) { const device = getDeviceType(); const { supports: { layout, flexChildPanel } } = useContext( ControlsContext ); const panelRef = useRef( null ); + const [ controlGlobalStyle, setControlGlobalStyle ] = useState( { + columnGap: false, + rowGap: false, + flexDirection: false, + alignItems: false, + justifyContent: false, + flexWrap: false, + zindex: false, + } ); + const hasGlobalStyle = Object.values( controlGlobalStyle ).some( ( control ) => control === true ); const componentProps = { attributes, @@ -50,18 +59,28 @@ export default function Layout( { attributes, setAttributes } ) { __( 'Column Gap', 'generateblocks' ), getAttribute( 'columnGap', componentProps ), 'columnGap', + setControlGlobalStyle, ), rowGap: applyFilters( 'generateblocks.editor.control.label', __( 'Row Gap', 'generateblocks' ), getAttribute( 'rowGap', componentProps ), 'rowGap', + setControlGlobalStyle, ), flexDirection: applyFilters( 'generateblocks.editor.control.label', __( 'Direction', 'generateblocks' ), directionValue, 'flexDirection', + setControlGlobalStyle, + ), + display: applyFilters( + 'generateblocks.editor.control.label', + __( 'Display', 'generateblocks' ), + getAttribute( 'display', componentProps ), + 'display', + setControlGlobalStyle, ), }; @@ -73,6 +92,7 @@ export default function Layout( { attributes, setAttributes } ) { className="gblocks-panel-label" id="layout" ref={ panelRef } + hasGlobalStyle={ hasGlobalStyle } > { !! useInnerContainer && setAttributes( { - [ getAttribute( 'display', componentProps, true ) ]: nextDisplay, - } ) } - /> + setAttributes( { + [ getAttribute( 'display', componentProps, true ) ]: nextDisplay, + } ) } + /> } { isFlexItem( { device, display, displayTablet, displayMobile } ) && ! useInnerContainer && diff --git a/src/utils/is-flex-item/index.js b/src/utils/is-flex-item/index.js index f12c15ffb..8a8fc1c70 100644 --- a/src/utils/is-flex-item/index.js +++ b/src/utils/is-flex-item/index.js @@ -1,3 +1,5 @@ +import { applyFilters } from '@wordpress/hooks'; + export default function isFlexItem( props ) { const { device, @@ -31,5 +33,5 @@ export default function isFlexItem( props ) { } } - return flexItem; + return applyFilters( 'generateblocks.layout.isFlexItem', flexItem, props ); } From affc73e3004219217511f6383745c8d965b12d14 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Thu, 7 Dec 2023 13:19:59 -0500 Subject: [PATCH 10/37] Remove unused import --- src/extend/inspector-control/controls/flex-child-panel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/extend/inspector-control/controls/flex-child-panel/index.js b/src/extend/inspector-control/controls/flex-child-panel/index.js index 5869ed415..ba0e2af6b 100644 --- a/src/extend/inspector-control/controls/flex-child-panel/index.js +++ b/src/extend/inspector-control/controls/flex-child-panel/index.js @@ -11,7 +11,7 @@ import getDeviceType from '../../../../utils/get-device-type'; export default function FlexChild( { attributes, setAttributes } ) { const device = getDeviceType(); - const { id, supports: { flexChildPanel } } = useContext( ControlsContext ); + const { supports: { flexChildPanel } } = useContext( ControlsContext ); const componentProps = { attributes, From 329c2493acf76b05ee432fb37a34d4d3a57623fb Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Thu, 7 Dec 2023 15:18:37 -0500 Subject: [PATCH 11/37] Added additional position example --- src/extend/inspector-control/controls/layout/index.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/extend/inspector-control/controls/layout/index.js b/src/extend/inspector-control/controls/layout/index.js index ac1ba0f2f..563c3b947 100644 --- a/src/extend/inspector-control/controls/layout/index.js +++ b/src/extend/inspector-control/controls/layout/index.js @@ -32,6 +32,7 @@ export default function Layout( { attributes, setAttributes } ) { alignItems: false, justifyContent: false, flexWrap: false, + position: false, zindex: false, } ); const hasGlobalStyle = Object.values( controlGlobalStyle ).some( ( control ) => control === true ); @@ -82,6 +83,13 @@ export default function Layout( { attributes, setAttributes } ) { 'display', setControlGlobalStyle, ), + position: applyFilters( + 'generateblocks.editor.control.label', + __( 'Position', 'generateblocks' ), + getAttribute( 'position', componentProps ), + 'position', + setControlGlobalStyle, + ), }; return ( @@ -224,7 +232,7 @@ export default function Layout( { attributes, setAttributes } ) { <> { layout.position && setAttributes( { From 8c061fb8c5dc0d3975aca5a7df55a2c2b88aeef2 Mon Sep 17 00:00:00 2001 From: Ian Svoboda Date: Sat, 9 Dec 2023 10:41:00 -0500 Subject: [PATCH 12/37] WIP testing new state pattern --- src/block-context/default.js | 1 + src/blocks/button-container/edit.js | 5 + src/blocks/button/edit.js | 10 - .../controls/layout/components/Display.js | 34 +++ .../controls/layout/index.js | 251 ++++++++++++++---- .../controls/spacing/index.js | 10 +- .../controls/typography/index.js | 2 +- src/extend/inspector-control/index.js | 14 +- src/hooks/index.js | 3 + src/hooks/useSelectedBlockElements.js | 52 ++++ src/utils/is-flex-item/index.js | 2 +- 11 files changed, 320 insertions(+), 64 deletions(-) create mode 100644 src/extend/inspector-control/controls/layout/components/Display.js create mode 100644 src/hooks/useSelectedBlockElements.js diff --git a/src/block-context/default.js b/src/block-context/default.js index fc4dfe13d..e144b217c 100644 --- a/src/block-context/default.js +++ b/src/block-context/default.js @@ -85,6 +85,7 @@ const defaultContext = { iconSize: false, }, }, + activeGlobalClasses: [], }; export default defaultContext; diff --git a/src/blocks/button-container/edit.js b/src/blocks/button-container/edit.js index 26b123142..5eadaaa70 100644 --- a/src/blocks/button-container/edit.js +++ b/src/blocks/button-container/edit.js @@ -30,6 +30,7 @@ const ButtonContainerEdit = ( props ) => { } = attributes; const [ buttonCount, setButtonCount ] = useState( 0 ); + const [ computedStyles, setComputedStyles ] = useState( {} ); const deviceType = getDeviceType(); const innerBlocksCount = useInnerBlocksCount( clientId ); @@ -44,6 +45,10 @@ const ButtonContainerEdit = ( props ) => { setButtonCount( innerBlocksCount ); }, [ innerBlocksCount ] ); + useEffect( () => { + setComputedStyles( getComputedStyle( document.querySelector( `.wp-block-generateblocks-button-container-${ uniqueId }` ) ) ); + }, [] ); + let htmlAttributes = { className: classnames( { 'gb-button-wrapper': true, diff --git a/src/blocks/button/edit.js b/src/blocks/button/edit.js index 31dfbd76b..cd119374c 100644 --- a/src/blocks/button/edit.js +++ b/src/blocks/button/edit.js @@ -38,21 +38,12 @@ const ButtonEdit = ( props ) => { } = attributes; const ref = useRef( null ); - const [ computedStyles, setComputedStyles ] = useState( {} ); const deviceType = getDeviceType(); const { getBlockParents, getBlocksByClientId, } = useSelect( ( select ) => select( 'core/block-editor' ), [] ); - useEffect( () => { - const computedButtonStyles = getComputedStyle( ref.current ); - - setComputedStyles( { - fontSize: parseInt( computedButtonStyles.fontSize ) || '', - } ); - }, [] ); - useEffect( () => { const parentBlockId = getBlockParents( clientId, true ); @@ -85,7 +76,6 @@ const ButtonEdit = ( props ) => { { applyFilters( 'generateblocks.editor.settingsPanel', undefined, { ...props, device: deviceType } ) } diff --git a/src/extend/inspector-control/controls/layout/components/Display.js b/src/extend/inspector-control/controls/layout/components/Display.js new file mode 100644 index 000000000..1995b7df0 --- /dev/null +++ b/src/extend/inspector-control/controls/layout/components/Display.js @@ -0,0 +1,34 @@ +import { __ } from '@wordpress/i18n'; +import { SelectControl } from '@wordpress/components'; +import { applyFilters } from '@wordpress/hooks'; +import { useCallback } from '@wordpress/element'; + +const Display = function Display( { value, onChange, label, setControlGlobalStyle } ) { + const filteredLabel = useCallback( applyFilters( + 'generateblocks.editor.control.label', + label, + value, + 'display', + setControlGlobalStyle, + ), [ value ] ); + + const onChangeHandler = useCallback( onChange, [ value ] ); + + return ( + + ); +}; + +export { Display }; diff --git a/src/extend/inspector-control/controls/layout/index.js b/src/extend/inspector-control/controls/layout/index.js index 563c3b947..a52508f55 100644 --- a/src/extend/inspector-control/controls/layout/index.js +++ b/src/extend/inspector-control/controls/layout/index.js @@ -1,5 +1,5 @@ import { __ } from '@wordpress/i18n'; -import { useContext, useRef, useState } from '@wordpress/element'; +import { useContext, useRef, useState, useMemo } from '@wordpress/element'; import { SelectControl } from '@wordpress/components'; import { applyFilters } from '@wordpress/hooks'; @@ -21,7 +21,136 @@ import FlexControl from '../../../../components/flex-control'; import getDeviceType from '../../../../utils/get-device-type'; import ThemeWidth from './components/ThemeWidth'; -export default function Layout( { attributes, setAttributes } ) { +/** + * Helper function to get the source of CSS properties + * + * @param {HTMLElement} element The element to check + * @param {string[]} properties The CSS properties to check + * @param {string[]} sources The sources to check (e.g., 'inline', 'tag', 'stylesheet') + * @return {Object} An object of objects containing the source, selector, and value of each CSS property + */ +export function getComputedStyleSources( element, properties, sources = [ 'inline', 'tag' ] ) { + if ( ! properties || properties.length === 0 ) { + throw new Error( 'Properties must be specified' ); + } + + const queryDocument = + document.querySelector( 'iframe[name="editor-canvas"]' )?.contentDocument || document; + + const computedStyles = getComputedStyle( element ); + const result = {}; + const styleTags = sources.includes( 'tag' ) ? queryDocument.querySelectorAll( 'style' ) : []; + const styleSheets = sources.includes( 'stylesheet' ) ? queryDocument.styleSheets : []; + + for ( const property of properties ) { + const computedValue = computedStyles[ property ]; + + if ( sources.includes( 'inline' ) ) { + // Check inline styles first + const inlineStyle = element.style[ property ]; + if ( inlineStyle ) { + result[ property ] = { source: 'inline', selector: '', value: computedValue }; + continue; + } + } + + if ( sources.includes( 'tag' ) ) { + // Check all