• Inner Blocks and parent
• SlotFills

The Inner Blocks component can be used to add one or more inner blocks inside a block.

But, it will only allow to add one Instance of the Inner Blocks per block, so if we have to add multiple inner blocks or even create a layout using inner blocks, we have to code multiple components and use them.

registerBlockType(metadata.name, {
	edit: () => {
		return (
			<div {...useBlockProps()}>
				<InnerBlocks />
			</div>
		);
	},
	save: () => null,
});

In the save function, we can use the content component to render the inner blocks.

registerBlockType(metadata.name, {
	edit: () => {
		return (
			<div {...useBlockProps()}>
				<InnerBlocks />
			</div>
		);
	},
	save: () => {
		return (
			<div {...useBlockProps.save()}>
				<InnerBlocks.Content />
			</div>
		);
	}
});

Now, we want to create layout that allows use of multiple, for that we can create more elements and add them as children to our block.

Slot Fills are part of Block Editor system that offer a way to extend and customize the editor’s interface by adding our own content or controls to the various slots (positions) within a block where we can insert additional components/content

Slot and Fill are a pair of components which enable developers to render elsewhere in a React element tree, a pattern often referred to as “portal” rendering. It is a pattern for component extensibility, where a single Slot may be occupied by an indeterminate number of Fills elsewhere in the application.Ryan Welcher – Extending Gutenberg With SlotFill and Filters

<SlotFillProvider>
<div >
	<Slot name="setting-top">
	<div className="setting-item">
	</div>
	<div className="setting-item">
		// Existing setting in main plugin
	</div>
	<Slot name="setting-bottom">
</div>
</SlotFillProvider>

WordPress is open source, means it is maintained by people around the world, many people contribute their time and resources to make WordPress better and we can too.

There are multiple ways to contribute to WordPress core

The WordPress uses SVN as version control, which is a centralized VCS contrary to the GitHub that we are familiar with, but we don’t have to be very good at SVN to contribute code in the core, we can use the existing git/GitHub and create diff files to open new ticket.

Steps:-

• Clone the master branch from the github repo
• Create new feature branch and work on the issue
• Generate a diff file using the git diff command
• Upload that diff file with relevant information to the https://core.trac.wordpress.org/

The good first bugs section has bugs that are for new contributors, so we can work on them.

https://core.trac.wordpress.org/tickets/good-first-bugs