Wrap .mbc-container div in other elements

Hi @bearandpear,
Thanks for giving the plugin a chance.
Well, it’s not possible to modify the HTML structure through the plugin filter. For your case maybe using CSS pseudo elements might work? Otherwise you would need to modify the block save (and possibly edit) function using the gutenberg core filters. For example, check the getSaveElement filter:

const addExtraHtml = (block, props, attributes) => {
	if (props.name !== "my-plugin/my-block") {
		return block;
	}

	return (
		<div class="transform-container">
			<div class="transform-right">
				<div class="transform-left">
					<div class="transform-content">{block}</div>
				</div>
			</div>
		</div>
	);
};
wp.hooks.addFilter("blocks.getSaveElement", "my-plugin/addExtraHtml", addExtraHtml);

The plugin tries to give customization in regards of the available settings and its controls. But if you want a specific HTML structure maybe creating the block from scratch might be the best option.

I hope I could be of help,
álvaro

Hi @melonpan,

Thank you for this! Your plugin is great, I have been trying lots of different ones for providing a container block and this is by far the best I have come across! I am a primarily a designer and only have HTML, CSS, and a little PHP knowledge, hence the need for me editing an existing plugin.

The CSS pseudo elements work great with block colour backgrounds, thank you for suggesting this, but I am trying to create something which can also have background images/videos, so I am essentially trying to ‘clip’ the content div (without using clip-path or SVG due to browser support/limitations).

I will see if I can work out how to use the above. I’ll keep you posted…

Thanks again,

bearandpear

Hi @melonpan,

I’ve created my own plugin which uses the MBC plugin filters as per your FAQ—works perfectly and is amazing, thank you.

I have not however been able to figure out how to implement the above code you wrote nor how to build something myself. Where would you suggest I add the above code?

Sorry I’m a complete novice with Javascript/React and I know this goes far beyond the scope of the plugin, but your help would be greatly appreciated if you have the time. If not don’t worry, I will close the topic as solved.

Thank you,

bearandpear

Hi @bearandpear,
No problem, I’m glad to give you a hand ?? For questions that get out of the scope of the plugin I suggest checking and asking in https://wordpress.stackexchange.com/ where you will find people who know much more than me and will resolve better questions regarding WordPress or the new editor.

About the code I posted above, it just needs to be included inside a (JavaScript) script in the editor. It can be in the same script you use to include this plugin filter. It doesn’t mater as long as when you enqueue it you include the “wp-hooks” dependency (in the PHP wp_enqueue_script function). The thing about modifying the HTML of a block using the “blocks.getSaveElement” filter is that from that moment you can not modify the filter. Otherwise any block which was created with the old version of the filter would show a deprecated message because it doesn’t “fit” with the new version of the HTML. Please let me know if I wasn’t clear.

Thanks,
álvaro

Hi álvaro,

I have now found a way of achieving what I wanted. Thank you for all of your help with my slightly off-topic problems and for building your amazing plugin! (Was that you also on StackExchange? Very helpful!)

I actually found it too hard to hook into the plugin and add my own content (due to my own inexperience), but I have found a work-around by creating a simple container block plugin including the HTML I need. This uses innerBlocks, so I can then insert a melonpan container block in this with all of the custom filters I set up. Works a treat!

For anyone else looking for some help with something similar I started the following question which has had some very useful info from cleverer folk than I…
https://wordpress.stackexchange.com/questions/338108/wrap-gutenberg-block-div-in-other-elements-extra-html

Thank you,
bearandpear

• This reply was modified 5 years, 9 months ago by bearandpear.