Remove “block-editor-inner-blocks” and “block-editor-block-list__layout”

Hello Tien Nguyen,

The “block-editor-inner-blocks” and “block-editor-block-list__layout” divs are added by WordPress to provide the necessary structure and functionality for the block editor. It is not recommended to remove them as it may cause issues with the editor’s functionality.

However, you can modify their appearance using CSS. You can add CSS rules to target these divs and style them as desired. For example, you can use the following CSS to hide the “block-editor-inner-blocks” div:

.block-editor-inner-blocks {
  display: none;
}

Similarly, you can target the “block-editor-block-list__layout” div and modify its appearance. However, be careful when modifying these divs as it can affect the functionality of the block editor.

I hope this helps. Let me know if you have any other questions!

Hello @linardsn

The .block-editor-inner-blocks contains all inner blocks so we can’t hide it.

The reason I want to remove them (unwrap them), so the whole structure of blocks in the editor will be similar to the front-end structure.

This is a must because many layouts are leaning on the Grid and Flex layouts that can be broken if there are any blocks that interfere between the parent wrapper and the children.

Thanks for the reply.

While you cannot remove the “block-editor-inner-blocks” and “block-editor-block-list__layout” divs directly, you can use JavaScript to modify the DOM structure to achieve a similar layout in the editor.

Here’s a possible solution using JavaScript to unwrap the inner elements:

First, add a custom JavaScript file to your block editor. In your block.json file, add an editorScript property like this:

{
  "editorScript": "file:./build/index.js",
  ...
}

In your index.js file, import the required dependencies and register your custom block:

import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';

registerBlockType('sneeit-blocks/link', {
  // block configuration here
});

Add a custom edit function to handle the editor view of the block:

import { useEffect } from '@wordpress/element';

const Edit = (props) => {
  const blockProps = useBlockProps();

  useEffect(() => {
    const blockElement = document.querySelector(
      [data-block="${props.clientId}"]
    );

    if (blockElement) {
      const innerBlocksWrapper = blockElement.querySelector(
        '.block-editor-inner-blocks'
      );
      const layoutWrapper = blockElement.querySelector(
        '.block-editor-block-list__layout'
      );

      if (innerBlocksWrapper && layoutWrapper) {
        while (layoutWrapper.firstChild) {
          innerBlocksWrapper.parentNode.insertBefore(
            layoutWrapper.firstChild,
            layoutWrapper
          );
        }
        innerBlocksWrapper.removeChild(layoutWrapper);
      }
    }
  }, []);

  return (
    <div {...blockProps}>
      <InnerBlocks />
    </div>
  );
};

set the edit property of your block to use the custom Edit component:

registerBlockType('sneeit-blocks/link', {
  // other block configuration
  edit: Edit,
});

This code will unwrap the inner elements of the block in the editor by moving the child elements of the “block-editor-block-list__layout” div to the parent element and removing the “block-editor-block-list__layout” div.

Please note that this is a workaround and may have unintended side effects on the functionality of the block editor. Always test your code thoroughly and make sure it doesn’t cause any issues.

I hope this helps. Good luck!

@linardsn Thank you for spending time writing the code. I will definitely test the code.

However, as I know, WordPress FSE has two back-end parts: the editor and the editor iframe (which actually has the blocks). The editorScript is for working with the editor only, not the blocks inside the editor iframe. We will use editorScript to add/remove features of the editor (like inspectors, and toolbars) but cannot access the editor iframe to modify its structure.

Thanks again.

This is possible. See here: https://wordpress.stackexchange.com/questions/390696/innerblocks-breaks-flexbox-and-css-grid-styles

"apiVersion": 2,

Hello!! This will Help:)

    const blockProps = useBlockProps({});
    const TEMPLATE = [['nametemplate/templatename']];

    const innerBlocksProps = useInnerBlocksProps(blockProps, {
        allowedBlocks: TEMPLATE,
        template: TEMPLATE,
        templateLock: false
    });

return (


        <div {...innerBlocksProps} ></div>


    );

Thank you Mohamed. Your code is what I am looking for. Thank you very much.