将html包装器添加到自定义块模式

时间：2021-07-17 作者：StudioAl

我已使用注册了自定义块图案register_block_pattern 有几个块元素，我想把整个东西包装在一个容器元素中。但是，当我将其添加到内容中时，它无法正确呈现。它不会按照编码方式包装其他块元素，而是自动关闭，并显示一个灰色的；“经典”；框显示在编辑器中。有没有办法将非注册块的额外html添加到自定义块模式中？

（未转换的）代码和所需输出的示例（wrapper类是添加的代码）：

<div class="wrapper">
    <!-- wp:heading -->
    <h1 class="has-text-align-center">Block 1</h1>
    <!-- /wp:heading -->

    <!-- wp:heading -->
    <h5 class="has-text-align-center">Block 2</h5>
    <!-- /wp:heading -->
</div>
将块模式添加到页面后的实际结果：

<div class="wrapper"></div>

<!-- wp:heading -->
<h1 class="has-text-align-center">Block 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h5 class="has-text-align-center">Block 2</h5>
<!-- /wp:heading -->

1 个回复
最合适的回答,由SO网友:birgire 整理而成

组块是一个具有自定义类的现成模式包装器mywrapper:

<!-- wp:group {"className":"mywrapper"} -->
<div class="wp-block-group mywrapper"><div class="wp-block-group__inner-container">

...pattern...

</div></div>
<!-- /wp:group -->
理论上，可以使用自定义html块作为模式，如：

<!-- wp:html -->
<div class="mywrappper">
   <h1 class="has-text-align-center">Block 1</h1>
   <h2 class="has-text-align-center">Block 2</h2>
</div>
<!-- /wp:html -->
但不是最好的用户体验：-）

如果要编写自己的块来处理此问题InnerBlocks 构件支持嵌套块和version 2 它成为块api的一部分，例如：

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

registerBlockType( \'wpse/wrapper\', {
    apiVersion: 2,
    title: __( \'WPSE Wrapper\', \'wpse\' ),
    icon: \'text-page\', 
    category: \'design\', 
    edit: ( props ) => {
        const blockProps = useBlockProps( { className: \'mywrapper\' } );
        return <div { ...blockProps }><InnerBlocks /></div>;
    },
    save: ( props ) => {
        const blockProps = useBlockProps.save( { className: \'mywrapper\' } );
        return <div { ...blockProps }><InnerBlocks.Content /></div>;
    },
} );
然后，可以使用以下内容包装块填充图案：

<!-- wp:wpse/wrapper -->
<div class="wp-block-wpse-wrapper mywrapper">

...pattern...

</div>
<!-- /wp:wpse/wrapper -->
要生成包含.mywrapper 班

标签： block-editor   小码农  

相关推荐