如何在InnerBlock中访问块的属性?

时间:2021-11-14 作者:yoho

假设包含一个核心/库块,我想在其中自己渲染。如何在服务器端渲染中获取库ID或图像ID。php?

块js公司:

const { Gallery, InspectorControls, InnerBlocks } = wp.blockEditor;
const { registerBlockType } = wp.blocks;
const { Button, PanelBody, TextControl } = wp.components;
const ALLOWED_BLOCKS = [\'core/gallery\'];

const MY_TEMPLATE = [
    [\'core/gallery\', { placeholder: \'Gallery\' }],
];


registerBlockType(\'my-gallery-block/main\', {
    title: \'My Gallery\',
    icon: \'dashicons-format-gallery\',
    category: \'my-blocks\',
    attributes: {
        htmlId: {
            type: \'string\'
        },
        galleryIds: {
            type: \'string\'
        }
    },
    edit({ attributes, className, setAttributes }) {
        

        return (<div>
            <div className="button-container">
                Gallery Block
                <InnerBlocks 
                    allowedBlocks={ALLOWED_BLOCKS} 
                    template={MY_TEMPLATE}
                    templateLock="all"
                    ></InnerBlocks>
            </div>
            <InspectorControls>
                <PanelBody
                    title="Settings"
                    initialOpen={true}
                >
                    <TextControl
                        label="HTML ID"
                        help="(optional)"
                        value={attributes.htmlId}
                        onChange={(content) => setAttributes({ htmlId: content })}
                    />
                    
                </PanelBody>
            </InspectorControls>
        </div>);
    },
    save() {
        return (<InnerBlocks.Content />);
    }
});
提供php:

<?php function render_gallery_block( $attributes, $content ) {


// How do I get the gallery ID or the Image IDs within the gallery?

 
ob_start(); 
?>
<?php 
    $output = ob_get_contents(); // collect output
    ob_end_clean(); // Turn off ouput buffer
        
    return $output; // Print output      
        
} 

我知道$content 变量已将渲染的库块包含为HTML字符串,但我希望尽可能避免从HTML字符串中提取图像URL。

有人知道更好的方法吗?

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

使用render_block 过滤器(与使用自定义块包装块相反)是实现所需功能的更简单方法。过滤器针对所有块运行,因此您必须有条件地将逻辑仅应用于所需的块。每个块的属性将可用($block[attrs]) 对于当前核心/库块images 属性将具有所需的数据。

需要注意的是,库块正在迁移为使用嵌套图像块,并且不再在其自身的属性中保留图像列表。这将出现在5.9版本中。

即便如此render_block 过滤器可用于此,但不必检查要迭代的块属性$block[\'innerBlocks\'] 获取图像ID。

如果有帮助的话,这里是初学者代码段,其中有一个基本条件,即只影响具有特定类的库块。

add_filter( \'render_block\', function ( $block_content, $block ) {
    if (
        $block[\'blockName\'] === \'core/gallery\'
        && $block[\'attrs\'][\'className\'] === \'is-rad\'
    ) {
        // $block also has \'innerBlocks\'
        $block_content = \'whiz bang\';
    }
    return $block_content;
}, 10, 2 );

相关推荐