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 a19284ce1c..5684ae2f55 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 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,
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,
diff --git a/src/hooks/use-device-type.js b/src/hooks/use-device-type.js
index a81a02f33d..7a45fdb43a 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 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 ) }
+ >{ __( 'Design Library', i18n ) }
)
}
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 ) }
-
+
}
)
diff --git a/src/plugins/global-settings/typography/editor-loader.js b/src/plugins/global-settings/typography/editor-loader.js
index 0b858d95fb..6c7f39da55 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 b45e377d19..34953fdf74 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 e25356922b..0d19b8b8db 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 => {