Feature: Add a starter for new or empty sections

src/FormBuilder/resources/js/form-builder/src/blocks/section/Edit.tsx

@@ -1,24 +1,38 @@
 import {__} from '@wordpress/i18n';
 
-import {InnerBlocks, InspectorControls, RichText} from '@wordpress/block-editor';
-
+import {InnerBlocks, InspectorControls, RichText, store as blockEditorStore} from '@wordpress/block-editor';
 import {PanelBody, PanelRow, TextareaControl, TextControl} from '@wordpress/components';
-
 import {useSelect} from '@wordpress/data';
 import {BlockEditProps} from '@wordpress/blocks';
 import {getBlockRegistrar} from "@givewp/form-builder/common/getWindowData";
 
+import BaseEmptyBlockInserter from './EmptyBlockInserter';
+import './styles.scss';
+
 export default function Edit(props: BlockEditProps<any>) {
     const {
         attributes: {title, description},
         setAttributes,
+        clientId,
     } = props;
 
-    const isParentOfSelectedBlock = useSelect<any>(
-        (select) => select('core/block-editor').hasSelectedInnerBlock(props.clientId, true),
-        []
+    const hasChildBlocks = useSelect(
+        (select) => {
+            const {getBlockOrder} = select(blockEditorStore);
+
+            return getBlockOrder(clientId).length > 0;
+        },
+        [clientId]
     );
-    const isSelectedOrIsInnerBlockSelected = props.isSelected || isParentOfSelectedBlock;
+
+    const EmptyBlockInserter = () => {
+        return (
+            <div className="give-section__empty-block-inserter">
+                {/* @ts-ignore */}
+                <BaseEmptyBlockInserter rootClientId={clientId} />
+            </div>
+        );
+    };
 
     return (
         <>
@@ -45,11 +59,12 @@ export default function Edit(props: BlockEditProps<any>) {
                 </header>
 
                 <InnerBlocks
-                    allowedBlocks={
-                        getBlockRegistrar().getAll().filter((block) => block.name !== 'givewp/section').map((block) => block.name)
-                    }
+                    allowedBlocks={getBlockRegistrar()
+                        .getAll()
+                        .filter((block) => block.name !== 'givewp/section')
+                        .map((block) => block.name)}
                     template={props.attributes.innerBlocksTemplate}
-                    renderAppender={InnerBlocks.DefaultBlockAppender}
+                    renderAppender={hasChildBlocks ? InnerBlocks.DefaultBlockAppender : EmptyBlockInserter}
                     prioritizedInserterBlocks={[
                         'givewp/text',
                         'givewp/paragraph',

src/FormBuilder/resources/js/form-builder/src/blocks/section/EmptyBlockInserter.tsx

@@ -0,0 +1,36 @@
+import {Button, Tooltip} from '@wordpress/components';
+import {Inserter} from '@wordpress/block-editor';
+import {_x, sprintf} from '@wordpress/i18n';
+
+/**
+ * The inserter used in sections for dragging and dropping blocks or clicking to add a block.
+ */
+export default function EmptyBlockInserter({rootClientId}) {
+    return (
+        <Inserter
+            position="bottom center"
+            rootClientId={rootClientId}
+            __experimentalIsQuick
+            className="give-section__empty-block-inserter"
+            renderToggle={({onToggle, disabled, isOpen, blockTitle, hasSingleBlockType}) => {
+                const label = _x('Add block', 'Generic label for block inserter button', 'give');
+
+                return (
+                    <Tooltip text={label}>
+                        <Button
+                            className="block-editor-button-block-appender"
+                            onClick={onToggle}
+                            aria-haspopup="true" // attribute wants a true value, not a boolean
+                            aria-expanded={isOpen}
+                            disabled={disabled}
+                            label={label}
+                        >
+                            {__('Drag a block here or click to add a block', 'give')}
+                        </Button>
+                    </Tooltip>
+                );
+            }}
+            isAppender
+        />
+    );
+}

src/FormBuilder/resources/js/form-builder/src/blocks/section/styles.scss

@@ -0,0 +1,17 @@
+.give-section {
+    &__empty-block-inserter {
+        width: 100%;
+
+        .block-editor-inserter {
+            width: 100%;
+        }
+
+        .block-editor-button-block-appender {
+            width: 100%;
+            box-shadow: none;
+            border: dashed var(--givewp-gray-60) 2px;
+            padding: 3rem 0 !important;
+            font-size: var(--givewp-font-weight-paragraph-lg);
+        }
+    }
+}

src/FormBuilder/resources/js/form-builder/src/styles/_block-editor.scss

@@ -127,7 +127,7 @@
     }
 
     &:not(.is-selected) {
-        .block-list-appender {
+        .block-editor-default-block-appender {
             display: none;
         }
     }