Let’s say contains a core/gallery block inside which I want to render on my own. How can I get the gallery ID or the Image IDs in the server-side render.php?
block.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 />);
}
});
render.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
}
I know that the $content
variable already contains the rendered Gallery block as a HTML string, but I would like to avoid extracting the Image URLs from the HTML string if possible.
Does anyone know a better way?