From 75f280151c9964c598a821c2c55bd964ffc783f6 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Tue, 5 Nov 2024 21:17:12 +0800 Subject: [PATCH] fix (WP 6.7): fixed deprecated warnings (#3363) * fix: withState to useState * fix: select( 'core/edit-site' ).__experimentalGetPreviewDeviceType to select( 'core/editor' ).getDeviceType * fix: wp.blockEditor.useSetting to wp.blockEditor.useSettings * fix: wp.editPost.PluginSidebar to wp.editor.PluginSidebar * fix: custom components as toolbar controls * fix: onSplit to splitting * fixed compatibility with older versions --------- Co-authored-by: bfintal@gmail.com <> --- 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 + src/deprecated/v2/block/columns/edit.js | 20 +++++++++++--- src/hooks/use-device-type.js | 7 +++-- .../design-library-button.js | 6 ++--- src/plugins/global-settings/index.js | 20 +++----------- .../typography/editor-loader.js | 14 +++++----- .../typography/typography-picker.js | 7 ++--- src/plugins/theme-block-size/index.js | 12 ++++++--- 14 files changed, 48 insertions(+), 98 deletions(-) diff --git a/src/block/button/edit.js b/src/block/button/edit.js index 8fc08c1c0..56127cdb5 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 11609bddf..051a55e92 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 a19284ce1..5684ae2f5 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' @@ -111,7 +110,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 => { @@ -174,7 +172,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 496734572..b30d17468 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 ede130acc..f869f43dd 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 03b5e5769..cd3e88785 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 c47979b7a..77575ad27 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, diff --git a/src/deprecated/v2/block/columns/edit.js b/src/deprecated/v2/block/columns/edit.js index 4aaaed7b5..b51909061 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, diff --git a/src/hooks/use-device-type.js b/src/hooks/use-device-type.js index a81a02f33..7a45fdb43 100644 --- a/src/hooks/use-device-type.js +++ b/src/hooks/use-device-type.js @@ -6,10 +6,9 @@ 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( 'core/edit-site' )?.__experimentalGetPreviewDeviceType?.() || + select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.() || select( 'stackable/device-type' ).getDeviceType() return { deviceType } diff --git a/src/plugins/design-library-button/design-library-button.js b/src/plugins/design-library-button/design-library-button.js index b7635fb24..9c06afd85 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 ) } ) } diff --git a/src/plugins/global-settings/index.js b/src/plugins/global-settings/index.js index 733d335f7..d0c7fabc0 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 ) } - + } ) diff --git a/src/plugins/global-settings/typography/editor-loader.js b/src/plugins/global-settings/typography/editor-loader.js index 0b858d95f..6c7f39da5 100644 --- a/src/plugins/global-settings/typography/editor-loader.js +++ b/src/plugins/global-settings/typography/editor-loader.js @@ -35,14 +35,12 @@ 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?.() || + 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 b45e377d1..34953fdf7 100644 --- a/src/plugins/global-settings/typography/typography-picker.js +++ b/src/plugins/global-settings/typography/typography-picker.js @@ -161,9 +161,10 @@ 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() || + 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 e25356922..0d19b8b8d 100644 --- a/src/plugins/theme-block-size/index.js +++ b/src/plugins/theme-block-size/index.js @@ -5,14 +5,20 @@ */ import { useDeviceType } from '~stackable/hooks' import { createRoot } from '~stackable/util' -import { useSetting } 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 = useSetting( 'layout.contentSize' ) - const wideSize = useSetting( 'layout.wideSize' ) + const [ contentSize, wideSize ] = useSettings( 'layout.contentSize', 'layout.wideSize' ) const deviceType = useDeviceType() const editorDom = useSelect( select => {