You cannot embed blocks as react components this way, and you should not try to use other blocks as user interface components by setting innerblocks with a locked template.
Instead, use 2 filters to modify the core/embed block:
- Use
editor.BlockListBlock
oncore/embed
to modify the edit component, wrapping it in your own component that has extra user interface react components - Use the
blocks.registerBlockType
filter to modify thecore/embed
registration to include your additional attributes - Use PHP to adjust how the
core/embed
block is rendered using filters
This way you can use the standard core embed block and no longer need to register new blocks.
For example this adds a button to the toolbar of every block:
import { BlockControls } from '@wordpress/block-editor';
import {
ToolbarButton,
ToolbarGroup,
} from '@wordpress/components';
import { createHigherOrderComponent } from '@wordpress/compose';
import { addFilter } from '@wordpress/hooks';
addFilter(
'editor.BlockListBlock',
'verism/toolbar-button',
AddToolbarButton,
10
);
const AddToolbarButton = createHigherOrderComponent( BlockEdit => {
return ( props ) => {
if ( props.name != 'core/embed' ) {
return <BlockEdit { ...props } />;
}
return (
<Fragment>
<BlockControls>
<ToolbarGroup>
<ToolbarButton
className="verisms-really-nice-button"
label="Verisms really nice button"
onClick={ () => {
console.log( 'button pressed' );
} }
/>
</ToolbarGroup>
</BlockControls>
<BlockEdit { ...props } />
</Fragment>
);
};
}, 'AddToolbarButton' );
You could insert sidebar panels, textfields, toolbar buttons etc.
You could also filter the attributes in PHP via the block_type_metadata
filter: