From 32e1704c9340b54074087de624ee74830df62a4e Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 31 Oct 2024 11:17:43 +0800 Subject: [PATCH 1/7] fix: withState to useState --- src/deprecated/v2/block/columns/edit.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/deprecated/v2/block/columns/edit.js b/src/deprecated/v2/block/columns/edit.js index 4aaaed7b59..b51909061b 100644 --- a/src/deprecated/v2/block/columns/edit.js +++ b/src/deprecated/v2/block/columns/edit.js @@ -49,9 +49,9 @@ import { __, sprintf, _x, } from '@wordpress/i18n' import { addFilter, applyFilters } from '@wordpress/hooks' -import { Fragment } from '@wordpress/element' +import { Fragment, useState } from '@wordpress/element' import { InnerBlocks } from '@wordpress/block-editor' -import { compose, withState } from '@wordpress/compose' +import { compose } from '@wordpress/compose' import { select, dispatch } from '@wordpress/data' import { createBlock } from '@wordpress/blocks' @@ -538,9 +538,21 @@ addFilter( 'stackable.columns.setAttributes', 'stackable/columns/columns-change' return attributes } ) +// Higher-Order Component to add state to props since withState is deprecated +const withSortColumnHighlight = WrappedComponent => props => { + const [ sortColumnHighlight, setSortColumnHighlight ] = useState( null ) + + return ( + + ) +} + export default compose( - // `withState` is needed to allow higher order functions to access the local state. - withState( { sortColumnHighlight: null } ), + withSortColumnHighlight, withUniqueClass, withSetAttributeHook, withGoogleFont, From 568a3227bd9d8feda29b96edffadaeee203369c5 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 31 Oct 2024 11:20:13 +0800 Subject: [PATCH 2/7] fix: select( 'core/edit-site' ).__experimentalGetPreviewDeviceType to select( 'core/editor' ).getDeviceType --- src/hooks/use-device-type.js | 5 +---- .../global-settings/typography/editor-loader.js | 11 +++-------- .../global-settings/typography/typography-picker.js | 4 +--- 3 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/hooks/use-device-type.js b/src/hooks/use-device-type.js index a81a02f33d..422a22c967 100644 --- a/src/hooks/use-device-type.js +++ b/src/hooks/use-device-type.js @@ -6,10 +6,7 @@ export const useDeviceType = () => { const { deviceType } = useSelect( select => { let deviceType = 'Desktop' - // In some editors, there is no edit-post / preview device type. If that - // happens, we just set our own internal device type. - deviceType = select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType() || - select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType() || + deviceType = select( 'core/editor' ).getDeviceType() || select( 'stackable/device-type' ).getDeviceType() return { deviceType } diff --git a/src/plugins/global-settings/typography/editor-loader.js b/src/plugins/global-settings/typography/editor-loader.js index 0b858d95fb..6e0d4ed987 100644 --- a/src/plugins/global-settings/typography/editor-loader.js +++ b/src/plugins/global-settings/typography/editor-loader.js @@ -35,14 +35,9 @@ export const GlobalTypographyStyles = () => { const [ styleTimeout, setStyleTimeout ] = useState( null ) const { device } = useSelect( - select => { - const device = select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType() || - select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType() || - 'Desktop' - return { - device, - } - }, + select => ( { + device: select( 'core/editor' ).getDeviceType() || 'Desktop', + } ), [] ) diff --git a/src/plugins/global-settings/typography/typography-picker.js b/src/plugins/global-settings/typography/typography-picker.js index b45e377d19..acf44e73a2 100644 --- a/src/plugins/global-settings/typography/typography-picker.js +++ b/src/plugins/global-settings/typography/typography-picker.js @@ -161,9 +161,7 @@ const TypographyPreview = props => { } ) const { device } = useSelect( select => ( { - device: select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType()?.toLowerCase() || - select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType()?.toLowerCase() || - 'Desktop', + device: select( 'core/editor' ).getDeviceType().toLowerCase() || 'desktop', } ), [] ) From 6b0d5565d4932d41e206f7f75940a0b2c2ecd299 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 31 Oct 2024 11:22:01 +0800 Subject: [PATCH 3/7] fix: wp.blockEditor.useSetting to wp.blockEditor.useSettings --- src/plugins/theme-block-size/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/plugins/theme-block-size/index.js b/src/plugins/theme-block-size/index.js index e25356922b..80b2801c1c 100644 --- a/src/plugins/theme-block-size/index.js +++ b/src/plugins/theme-block-size/index.js @@ -5,14 +5,13 @@ */ import { useDeviceType } from '~stackable/hooks' import { createRoot } from '~stackable/util' -import { useSetting } from '@wordpress/block-editor' +import { useSettings } from '@wordpress/block-editor' import domReady from '@wordpress/dom-ready' import { useEffect } from '@wordpress/element' import { useSelect } from '@wordpress/data' export const ThemeBlockSize = () => { - const contentSize = useSetting( 'layout.contentSize' ) - const wideSize = useSetting( 'layout.wideSize' ) + const [ contentSize, wideSize ] = useSettings( 'layout.contentSize', 'layout.wideSize' ) const deviceType = useDeviceType() const editorDom = useSelect( select => { From b01b24c35f246002aa88db7a07b01c40b321d9df Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 31 Oct 2024 11:24:03 +0800 Subject: [PATCH 4/7] fix: wp.editPost.PluginSidebar to wp.editor.PluginSidebar --- src/plugins/global-settings/index.js | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/src/plugins/global-settings/index.js b/src/plugins/global-settings/index.js index 733d335f77..d0c7fabc04 100644 --- a/src/plugins/global-settings/index.js +++ b/src/plugins/global-settings/index.js @@ -30,30 +30,18 @@ addAction( 'stackable.global-settings.toggle-sidebar', 'toggle', () => { } ) const GlobalSettings = () => { - // We need to to this for both, because one might be disabled. E.g. in - // WooCommerce, editSite is loaded and stops the sidebar from showing up. - const SideEditorPluginSidebar = window.wp.editSite?.PluginSidebar - const PostEditorPluginSidebar = window.wp.editPost?.PluginSidebar + const PluginSidebar = window.wp.editor.PluginSidebar return ( <> - { SideEditorPluginSidebar && - } > { applyFilters( 'stackable.global-settings.inspector', null ) } - - } - { PostEditorPluginSidebar && - } > - { applyFilters( 'stackable.global-settings.inspector', null ) } - + } ) From 8c2f7d487843c25060a3240c33ecc1ce5b7b3edb Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 31 Oct 2024 11:32:03 +0800 Subject: [PATCH 5/7] fix: custom components as toolbar controls --- src/plugins/design-library-button/design-library-button.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/plugins/design-library-button/design-library-button.js b/src/plugins/design-library-button/design-library-button.js index b7635fb245..9c06afd851 100644 --- a/src/plugins/design-library-button/design-library-button.js +++ b/src/plugins/design-library-button/design-library-button.js @@ -3,7 +3,6 @@ */ import { i18n, settings } from 'stackable' import { SVGStackableIcon } from '~stackable/icons' -import { Button } from '~stackable/components' /** * WordPress dependencies @@ -12,6 +11,7 @@ import { createBlock } from '@wordpress/blocks' import { dispatch, useSelect } from '@wordpress/data' import { __ } from '@wordpress/i18n' import { useCallback } from '@wordpress/element' +import { ToolbarButton } from '@wordpress/components' const DesignLibraryButton = () => { const { getEditorDom } = useSelect( 'stackable/editor-dom' ) @@ -31,11 +31,11 @@ const DesignLibraryButton = () => { }, [ getEditorDom ] ) return ( settings.stackable_enable_design_library && - + >{ __( 'Design Library', i18n ) } ) } From 39f1c8dcadff852e1d374e935aa6cdb75e81bc56 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 31 Oct 2024 11:34:17 +0800 Subject: [PATCH 6/7] fix: onSplit to splitting --- src/block/button/edit.js | 7 ------- src/block/button/index.js | 1 + src/block/icon-list-item/edit.js | 3 --- src/block/icon-list-item/index.js | 1 + src/block/icon-list-item/util.js | 27 --------------------------- src/block/subtitle/edit.js | 20 -------------------- src/block/subtitle/index.js | 1 + 7 files changed, 3 insertions(+), 57 deletions(-) diff --git a/src/block/button/edit.js b/src/block/button/edit.js index 8fc08c1c04..56127cdb54 100644 --- a/src/block/button/edit.js +++ b/src/block/button/edit.js @@ -31,7 +31,6 @@ import { */ import { __ } from '@wordpress/i18n' import { compose } from '@wordpress/compose' -import { createBlock } from '@wordpress/blocks' import { AlignmentToolbar, BlockControls } from '@wordpress/block-editor' import { memo } from '@wordpress/element' @@ -113,12 +112,6 @@ const Edit = props => { placeholder={ __( 'Button text', i18n ) } withoutInteractiveFormatting={ true } onReplace={ onReplace } - onSplit={ value => createBlock( - 'stackable/button', - { - ...props.attributes, text: value, - } - ) } /> diff --git a/src/block/button/index.js b/src/block/button/index.js index 11609bddfc..051a55e921 100644 --- a/src/block/button/index.js +++ b/src/block/button/index.js @@ -28,6 +28,7 @@ export const settings = { attributes: schema, supports: { anchor: true, + splitting: true, }, transforms, diff --git a/src/block/icon-list-item/edit.js b/src/block/icon-list-item/edit.js index 4e464e42f4..f7dfe616e3 100644 --- a/src/block/icon-list-item/edit.js +++ b/src/block/icon-list-item/edit.js @@ -5,7 +5,6 @@ import blockStyles from './style' import { getUseSvgDef } from '../icon-list/util' import { convertToListItems, - useOnSplit, useOnPaste, useEnter, } from './util' @@ -106,7 +105,6 @@ const Edit = props => { ] ) const useEnterRef = useEnter( text, clientId ) - const onSplit = useOnSplit( clientId, attributes ) const onPaste = useOnPaste( clientId, parentBlock?.clientId, attributes, setAttributes ) const onMerge = forward => { @@ -169,7 +167,6 @@ const Edit = props => { ref={ useEnterRef } tagName="span" className={ textClassNames } - onSplit={ onSplit } onMerge={ onMerge } onPaste={ onPaste } onReplace={ onReplace diff --git a/src/block/icon-list-item/index.js b/src/block/icon-list-item/index.js index 496734572b..b30d174684 100644 --- a/src/block/icon-list-item/index.js +++ b/src/block/icon-list-item/index.js @@ -22,6 +22,7 @@ export const settings = { __experimentalSelector: 'li', reusable: false, stkSaveBlockStyle: false, + splitting: true, }, example, edit, diff --git a/src/block/icon-list-item/util.js b/src/block/icon-list-item/util.js index ede130acc3..f869f43ddd 100644 --- a/src/block/icon-list-item/util.js +++ b/src/block/icon-list-item/util.js @@ -47,33 +47,6 @@ export function convertToListItems( blocks ) { return listItems } -export const useOnSplit = ( clientId, attributes ) => { - const { getBlock } = useSelect( 'core/block-editor' ) - - return useCallback( ( value, isOriginal ) => { - const block = getBlock( clientId ) - let newBlock - - if ( isOriginal || value ) { - newBlock = cloneBlock( block, { - ...attributes, - text: value, - } ) - } else { - newBlock = cloneBlock( block, { - ...attributes, - text: '', - } ) - } - - if ( isOriginal ) { - newBlock.clientId = clientId - } - - return newBlock - }, [ clientId, attributes ] ) -} - export const useEnter = ( text, clientId ) => { const { removeBlocks, selectionChange, insertBlocks, diff --git a/src/block/subtitle/edit.js b/src/block/subtitle/edit.js index 03b5e57692..cd3e887859 100644 --- a/src/block/subtitle/edit.js +++ b/src/block/subtitle/edit.js @@ -35,7 +35,6 @@ import { createBlockCompleter } from '~stackable/util' * WordPress dependencies */ import { compose } from '@wordpress/compose' -import { createBlock } from '@wordpress/blocks' import { addFilter } from '@wordpress/hooks' import { sprintf, __ } from '@wordpress/i18n' import { memo } from '@wordpress/element' @@ -106,25 +105,6 @@ const Edit = props => { onMerge={ mergeBlocks } onRemove={ onRemove } onReplace={ onReplace } - onSplit={ ( value, isOriginal ) => { - // @see https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/paragraph/edit.js - let newAttributes - - if ( isOriginal || value ) { - newAttributes = { - ...props.attributes, - text: value, - } - } - - const block = createBlock( 'stackable/subtitle', newAttributes ) - - if ( isOriginal ) { - block.clientId = props.clientId - } - - return block - } } /> { props.isHovered && } diff --git a/src/block/subtitle/index.js b/src/block/subtitle/index.js index c47979b7af..77575ad27c 100644 --- a/src/block/subtitle/index.js +++ b/src/block/subtitle/index.js @@ -24,6 +24,7 @@ export const settings = { supports: { anchor: true, spacing: true, + splitting: true, }, example, deprecated, From 3048918b9592d0fca0678d5a4763229438cb065c Mon Sep 17 00:00:00 2001 From: "bfintal@gmail.com" <> Date: Tue, 5 Nov 2024 21:16:37 +0800 Subject: [PATCH 7/7] fixed compatibility with older versions --- src/hooks/use-device-type.js | 4 +++- src/plugins/global-settings/typography/editor-loader.js | 5 ++++- .../global-settings/typography/typography-picker.js | 5 ++++- src/plugins/theme-block-size/index.js | 9 ++++++++- 4 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/hooks/use-device-type.js b/src/hooks/use-device-type.js index 422a22c967..7a45fdb43a 100644 --- a/src/hooks/use-device-type.js +++ b/src/hooks/use-device-type.js @@ -6,7 +6,9 @@ export const useDeviceType = () => { const { deviceType } = useSelect( select => { let deviceType = 'Desktop' - deviceType = select( 'core/editor' ).getDeviceType() || + deviceType = select( 'core/editor' )?.getDeviceType?.() || + select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType?.() || + select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.() || select( 'stackable/device-type' ).getDeviceType() return { deviceType } diff --git a/src/plugins/global-settings/typography/editor-loader.js b/src/plugins/global-settings/typography/editor-loader.js index 6e0d4ed987..6c7f39da55 100644 --- a/src/plugins/global-settings/typography/editor-loader.js +++ b/src/plugins/global-settings/typography/editor-loader.js @@ -36,7 +36,10 @@ export const GlobalTypographyStyles = () => { const { device } = useSelect( select => ( { - device: select( 'core/editor' ).getDeviceType() || 'Desktop', + device: select( 'core/editor' )?.getDeviceType?.() || + select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType?.() || + select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.() || + 'Desktop', } ), [] ) diff --git a/src/plugins/global-settings/typography/typography-picker.js b/src/plugins/global-settings/typography/typography-picker.js index acf44e73a2..34953fdf74 100644 --- a/src/plugins/global-settings/typography/typography-picker.js +++ b/src/plugins/global-settings/typography/typography-picker.js @@ -161,7 +161,10 @@ const TypographyPreview = props => { } ) const { device } = useSelect( select => ( { - device: select( 'core/editor' ).getDeviceType().toLowerCase() || 'desktop', + device: select( 'core/editor' )?.getDeviceType?.()?.toLowerCase() || + select( 'core/edit-site' )?.__experimentalGetPreviewDeviceType?.()?.toLowerCase() || + select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.()?.toLowerCase() || + 'desktop', } ), [] ) diff --git a/src/plugins/theme-block-size/index.js b/src/plugins/theme-block-size/index.js index 80b2801c1c..0d19b8b8db 100644 --- a/src/plugins/theme-block-size/index.js +++ b/src/plugins/theme-block-size/index.js @@ -5,11 +5,18 @@ */ import { useDeviceType } from '~stackable/hooks' import { createRoot } from '~stackable/util' -import { useSettings } from '@wordpress/block-editor' +import { useSettings as _useSettings, useSetting as deprecatedUseSetting } from '@wordpress/block-editor' import domReady from '@wordpress/dom-ready' import { useEffect } from '@wordpress/element' import { useSelect } from '@wordpress/data' +// This is a custom hook for the deprecated useSetting since WP 6.3 & 6.4 doesn't have useSettings yet. +const useSettings = _useSettings || ( () => { + const contentSize = deprecatedUseSetting( 'layout.contentSize' ) + const wideSize = deprecatedUseSetting( 'layout.wideSize' ) + return [ contentSize, wideSize ] +} ) + export const ThemeBlockSize = () => { const [ contentSize, wideSize ] = useSettings( 'layout.contentSize', 'layout.wideSize' )