From c5a915608a402f71f075b88978426680374df0bb Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 8 Aug 2024 11:22:41 +0800 Subject: [PATCH 1/8] feat: create an editor setting for enabling default block as stackable text --- src/editor-settings.php | 13 +++++++++++++ src/welcome/admin.js | 14 ++++++++++++++ 2 files changed, 27 insertions(+) diff --git a/src/editor-settings.php b/src/editor-settings.php index 79d4a0db6..6adf98199 100644 --- a/src/editor-settings.php +++ b/src/editor-settings.php @@ -154,6 +154,18 @@ public function register_settings() { 'default' => true, ) ); + + register_setting( + 'stackable_editor_settings', + 'stackable_text_default_block', + array( + 'type' => 'boolean', + 'description' => __( 'If this is enabled, the default block when adding a new block will be the Stackable Text block.', STACKABLE_I18N ), + 'sanitize_callback' => 'sanitize_text_field', + 'show_in_rest' => true, + 'default' => false, + ) + ); } public function sanitize_array_setting( $input ) { @@ -174,6 +186,7 @@ public function add_settings( $settings ) { $settings['stackable_auto_collapse_panels'] = get_option( 'stackable_auto_collapse_panels' ); $settings['stackable_enable_block_linking'] = get_option( 'stackable_enable_block_linking' ); $settings['stackable_enable_carousel_lazy_loading'] = get_option( 'stackable_enable_carousel_lazy_loading' ); + $settings['stackable_text_default_block'] = get_option( 'stackable_text_default_block' ); return $settings; } diff --git a/src/welcome/admin.js b/src/welcome/admin.js index e124aaaff..36b5bc371 100644 --- a/src/welcome/admin.js +++ b/src/welcome/admin.js @@ -413,6 +413,20 @@ const EditorSettings = () => { } } help={ __( 'Disable this if you encounter layout or spacing issues when using images inside carousel-type blocks because of image lazy loading.', i18n ) } /> + { + setIsBusy( true ) + const model = new models.Settings( { stackable_text_default_block: value } ) // eslint-disable-line camelcase + model.save().then( () => setIsBusy( false ) ) + setSettings( { + ...settings, + stackable_text_default_block: value, // eslint-disable-line camelcase + } ) + } } + help={ __( 'If this is enabled, the default block when adding a new block will be the Stackable Text block.', i18n ) } + /> { isBusy &&
From 97d6d96e6f44c11eb6abda06530340fe15173171 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Thu, 8 Aug 2024 11:23:51 +0800 Subject: [PATCH 2/8] feat: set default block to stackable text when the setting is enabled --- src/plugins/global-settings/editor-loader.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/plugins/global-settings/editor-loader.js b/src/plugins/global-settings/editor-loader.js index d19d38a20..47652d34a 100644 --- a/src/plugins/global-settings/editor-loader.js +++ b/src/plugins/global-settings/editor-loader.js @@ -14,6 +14,7 @@ import './block-defaults' */ import { useDeviceType } from '~stackable/hooks' import { createRoot } from '~stackable/util' +import { settings } from 'stackable' /** WordPress dependencies */ @@ -22,6 +23,7 @@ import { useEffect } from '@wordpress/element' import { __ } from '@wordpress/i18n' import { useSelect } from '@wordpress/data' import domReady from '@wordpress/dom-ready' +import { setDefaultBlockName } from '@wordpress/blocks' const GlobalSettingsLoader = () => { const deviceType = useDeviceType() @@ -64,4 +66,11 @@ domReady( () => { document?.body?.appendChild( globalColorWrapper ) createRoot( globalTypographyWrapper ).render( ) createRoot( globalColorWrapper ).render( ) + + // Set the default block to stackable/text + if ( settings.stackable_text_default_block ) { + setTimeout( () => { + setDefaultBlockName( 'stackable/text' ) + } ) + } } ) From 2add184dc4984462ef1adc0107c9b9bad51c7aee Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Sat, 10 Aug 2024 19:14:31 +0800 Subject: [PATCH 3/8] fix: create dedicated plugin for setting default block --- src/editor-settings.php | 4 ++-- src/plugins/global-settings/editor-loader.js | 9 --------- src/plugins/index.js | 4 ++++ src/plugins/text-default-block/index.js | 8 ++++++++ src/welcome/admin.js | 6 +++--- 5 files changed, 17 insertions(+), 14 deletions(-) create mode 100644 src/plugins/text-default-block/index.js diff --git a/src/editor-settings.php b/src/editor-settings.php index 6adf98199..072499d06 100644 --- a/src/editor-settings.php +++ b/src/editor-settings.php @@ -157,7 +157,7 @@ public function register_settings() { register_setting( 'stackable_editor_settings', - 'stackable_text_default_block', + 'stackable_enable_text_default_block', array( 'type' => 'boolean', 'description' => __( 'If this is enabled, the default block when adding a new block will be the Stackable Text block.', STACKABLE_I18N ), @@ -186,7 +186,7 @@ public function add_settings( $settings ) { $settings['stackable_auto_collapse_panels'] = get_option( 'stackable_auto_collapse_panels' ); $settings['stackable_enable_block_linking'] = get_option( 'stackable_enable_block_linking' ); $settings['stackable_enable_carousel_lazy_loading'] = get_option( 'stackable_enable_carousel_lazy_loading' ); - $settings['stackable_text_default_block'] = get_option( 'stackable_text_default_block' ); + $settings['stackable_enable_text_default_block'] = get_option( 'stackable_enable_text_default_block' ); return $settings; } diff --git a/src/plugins/global-settings/editor-loader.js b/src/plugins/global-settings/editor-loader.js index 47652d34a..d19d38a20 100644 --- a/src/plugins/global-settings/editor-loader.js +++ b/src/plugins/global-settings/editor-loader.js @@ -14,7 +14,6 @@ import './block-defaults' */ import { useDeviceType } from '~stackable/hooks' import { createRoot } from '~stackable/util' -import { settings } from 'stackable' /** WordPress dependencies */ @@ -23,7 +22,6 @@ import { useEffect } from '@wordpress/element' import { __ } from '@wordpress/i18n' import { useSelect } from '@wordpress/data' import domReady from '@wordpress/dom-ready' -import { setDefaultBlockName } from '@wordpress/blocks' const GlobalSettingsLoader = () => { const deviceType = useDeviceType() @@ -66,11 +64,4 @@ domReady( () => { document?.body?.appendChild( globalColorWrapper ) createRoot( globalTypographyWrapper ).render( ) createRoot( globalColorWrapper ).render( ) - - // Set the default block to stackable/text - if ( settings.stackable_text_default_block ) { - setTimeout( () => { - setDefaultBlockName( 'stackable/text' ) - } ) - } } ) diff --git a/src/plugins/index.js b/src/plugins/index.js index 3170764f7..fc5f874cd 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -14,6 +14,7 @@ import { ContentAlign } from './content-align' import { EditorDom } from './get-editor-dom' import { ClientTree } from './get-client-id-tree' import { StackableThemeFonts } from './get-theme-fonts' +import { TextDefaultBlock } from './text-default-block' /** * WordPress dependencies @@ -42,4 +43,7 @@ fetchSettings().then( response => { if ( response.stackable_enable_block_linking ) { registerPlugin( 'stackable-block-linking', { render: BlockLinking } ) } + if ( response.stackable_enable_text_default_block ) { + registerPlugin( 'stackable-text-default-block', { render: TextDefaultBlock } ) + } } ) diff --git a/src/plugins/text-default-block/index.js b/src/plugins/text-default-block/index.js new file mode 100644 index 000000000..c5ce28f41 --- /dev/null +++ b/src/plugins/text-default-block/index.js @@ -0,0 +1,8 @@ +import { setDefaultBlockName } from '@wordpress/blocks' + +export const TextDefaultBlock = () => { + // Set the default block to stackable/text + setDefaultBlockName( 'stackable/text' ) + + return null +} diff --git a/src/welcome/admin.js b/src/welcome/admin.js index 36b5bc371..8a431da8c 100644 --- a/src/welcome/admin.js +++ b/src/welcome/admin.js @@ -415,14 +415,14 @@ const EditorSettings = () => { /> { setIsBusy( true ) - const model = new models.Settings( { stackable_text_default_block: value } ) // eslint-disable-line camelcase + const model = new models.Settings( { stackable_enable_text_default_block: value } ) // eslint-disable-line camelcase model.save().then( () => setIsBusy( false ) ) setSettings( { ...settings, - stackable_text_default_block: value, // eslint-disable-line camelcase + stackable_enable_text_default_block: value, // eslint-disable-line camelcase } ) } } help={ __( 'If this is enabled, the default block when adding a new block will be the Stackable Text block.', i18n ) } From 19d4c5fe2c8967ea22e1ce8bd2722ae8be783d46 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Thu, 15 Aug 2024 13:25:42 +0800 Subject: [PATCH 4/8] Updated option description --- src/welcome/admin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/welcome/admin.js b/src/welcome/admin.js index 8a431da8c..d3c53dac4 100644 --- a/src/welcome/admin.js +++ b/src/welcome/admin.js @@ -425,7 +425,7 @@ const EditorSettings = () => { stackable_enable_text_default_block: value, // eslint-disable-line camelcase } ) } } - help={ __( 'If this is enabled, the default block when adding a new block will be the Stackable Text block.', i18n ) } + help={ __( 'If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block.', i18n ) } /> { isBusy &&
From 45012be155527253369c3719f7dfccbea951eee6 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Wed, 28 Aug 2024 11:51:29 +0800 Subject: [PATCH 5/8] fix: use raw transform to prevent pasting multiline text of having core/paragraph in between --- src/block/text/transforms.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/block/text/transforms.js b/src/block/text/transforms.js index e10714264..9fccc203e 100644 --- a/src/block/text/transforms.js +++ b/src/block/text/transforms.js @@ -7,9 +7,22 @@ import { createBlock, createBlocksFromInnerBlocksTemplate } from '@wordpress/blo * Internal dependencies */ import { TEMPLATE as ICON_LABEL_TEMPLATE } from '../icon-label/edit' +import { settings } from 'stackable' const transforms = { from: [ + { + type: 'raw', + isMatch: node => + node.nodeName === 'P' && + settings.stackable_enable_text_default_block, + transform: node => { + return createBlock( 'stackable/text', { + text: node.textContent.trim(), + } ) + }, + priority: 11, + }, { type: 'block', isMultiBlock: true, From 0833df34110740fb7d74fee0cbcb885a689aa814 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Wed, 28 Aug 2024 14:38:08 +0800 Subject: [PATCH 6/8] fix: make sure setting of default block only run once --- src/plugins/text-default-block/index.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/plugins/text-default-block/index.js b/src/plugins/text-default-block/index.js index c5ce28f41..5f655db4d 100644 --- a/src/plugins/text-default-block/index.js +++ b/src/plugins/text-default-block/index.js @@ -1,8 +1,14 @@ -import { setDefaultBlockName } from '@wordpress/blocks' +import { setDefaultBlockName, getDefaultBlockName } from '@wordpress/blocks' +import { useEffect } from '@wordpress/element' export const TextDefaultBlock = () => { // Set the default block to stackable/text - setDefaultBlockName( 'stackable/text' ) + useEffect( () => { + if ( getDefaultBlockName() === 'stackable/text' ) { + return null + } + setDefaultBlockName( 'stackable/text' ) + }, [] ) return null } From d0fc0ef011685139a48bdca51184de5f25a17988 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Wed, 28 Aug 2024 14:38:50 +0800 Subject: [PATCH 7/8] chore: add comments --- src/block/text/transforms.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/block/text/transforms.js b/src/block/text/transforms.js index 9fccc203e..b18f9a805 100644 --- a/src/block/text/transforms.js +++ b/src/block/text/transforms.js @@ -11,6 +11,7 @@ import { settings } from 'stackable' const transforms = { from: [ + // When pasting, ensure that the default text block setting is followed { type: 'raw', isMatch: node => From 4ec9a16f74c48b241e41c48147e85e9d8ca85f18 Mon Sep 17 00:00:00 2001 From: Alquen Antonio Sarmiento Date: Wed, 4 Sep 2024 10:42:59 +0800 Subject: [PATCH 8/8] fix: load initial enable_text_default_block setting --- src/welcome/admin.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/welcome/admin.js b/src/welcome/admin.js index d3c53dac4..42d6987e2 100644 --- a/src/welcome/admin.js +++ b/src/welcome/admin.js @@ -264,6 +264,7 @@ const EditorSettings = () => { 'stackable_auto_collapse_panels', 'stackable_enable_block_linking', 'stackable_enable_carousel_lazy_loading', + 'stackable_enable_text_default_block', ] ) ) } ) } )