Support » Developing with WordPress » Custom Block does not allow for adding default blocks

  • I added / created a custom block with @wordpress/create-block npm package and added for testing purposes below the old plans table. Code for edits with innerBlocks is

    /**
     * Retrieves the translation of text.
     *
     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
     */
    import { __ } from '@wordpress/i18n';
    
    /**
     * Import files for loading meta data and for importing block template data
     */
    import {registerBlockType} from '@wordpress/blocks';
    import {MY_TEMPLATE} from './template';
    
    /**
     * Border Control
     */
    // import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
    
    /**
     * React hook that is used to mark the block wrapper element.
     * It provides all the necessary props like the class name.
     *
     * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
     */
    import { RichText, InnerBlocks, useBlockProps } from '@wordpress/block-editor';
    
    /**
     * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
     * Those files can contain any CSS code that gets applied to the editor.
     *
     * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
     */
    import './editor.scss';
    
    /**
     * The edit function describes the structure of your block in the context of the
     * editor. This represents what the editor will render when the block is used.
     *
     * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
     *
     * @return {WPElement} Element to render.
     */
    export default function Edit( {attributes, setAttributes} ) {
    	const ALLOWED_BLOCKS = [
    		'core/image',
    		'core/paragraph',
    		'core/columns',
    		'core/heading',
    		'core/button'
    	];
    	const blockProps = useBlockProps();
    	const {planHeadline, planSubhead, planPriceLine, planPeriod, planByline, planButtonText} = attributes;
    
    
    		return (
    			<div { ...blockProps }>
    				<InnerBlocks
    					template={ MY_TEMPLATE }
    					allowedBlocks={ ALLOWED_BLOCKS }
    					templateLock="all"
    				/>
    			</div>
    	);
    }

    It loads well and behaves fine on mobile.

    The issue I have is that when I want to add another heading or paragraph to this block I cannot. Even when I unlock the columns block, inner columns, headings and so on.. I still cannot add other blocks like a heading to my custom block inner blocks with headings, paragraphs and buttons. Why is that? And how to overcome this?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Thread Starter Rhand

    (@rhand)

    When I use

    templateLock={false}

    things are fine and I can add blocks. But why can I not after I manually unlocked columns, column I want to edit with all blocks in there? Should that not work either?

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.