feat: added new option to use Stackable text block as the default tex…

…t block (#3283)

* feat: create an editor setting for enabling default block as stackable text

* feat: set default block to stackable text when the setting is enabled

* fix: create dedicated plugin for setting default block

* Updated option description

* fix: use raw transform to prevent pasting multiline text of having core/paragraph in between

* fix: make sure setting of default block only run once

* chore: add comments

* fix: load initial enable_text_default_block setting

---------

Co-authored-by: Benjamin Intal <[email protected]>

src/block/text/transforms.js

@@ -7,9 +7,23 @@ 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: [
+		// When pasting, ensure that the default text block setting is followed
+		{
+			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,

src/editor-settings.php

@@ -154,6 +154,18 @@ public function register_settings() {
 					'default' => true,
 				)
 			);
+
+			register_setting(
+				'stackable_editor_settings',
+				'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 ),
+					'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_enable_text_default_block'] = get_option( 'stackable_enable_text_default_block' );
 			return $settings;
 		}
 

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 } )
+	}
 } )

src/plugins/text-default-block/index.js

@@ -0,0 +1,14 @@
+import { setDefaultBlockName, getDefaultBlockName } from '@wordpress/blocks'
+import { useEffect } from '@wordpress/element'
+
+export const TextDefaultBlock = () => {
+	// Set the default block to stackable/text
+	useEffect( () => {
+		if ( getDefaultBlockName() === 'stackable/text' ) {
+			return null
+		}
+		setDefaultBlockName( 'stackable/text' )
+	}, [] )
+
+	return null
+}

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',
 				] ) )
 			} )
 		} )
@@ -413,6 +414,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 ) }
 		/>
+		<AdminToggleSetting
+			label={ __( 'Stackable Text as Default Block', i18n ) }
+			value={ settings.stackable_enable_text_default_block }
+			onChange={ value => {
+				setIsBusy( true )
+				const model = new models.Settings( { stackable_enable_text_default_block: value } ) // eslint-disable-line camelcase
+				model.save().then( () => setIsBusy( false ) )
+				setSettings( {
+					...settings,
+					stackable_enable_text_default_block: value, // eslint-disable-line camelcase
+				} )
+			} }
+			help={ __( 'If enabled, Stackable Text blocks will be added by default instead of the native Paragraph Block.', i18n ) }
+		/>
 		{ isBusy &&
 			<div className="s-absolute-spinner">
 				<Spinner />