Layouts Block

Layouts Block

Overview of the Layouts block

The Layouts block comes with a library of pre-designed sections and layouts to help you quickly build your site.

Sections

Sections are a collection of blocks designed in a way that they can be added to a page as part of a larger overall design. Think of them as a small piece of a larger design.

Layouts

Layouts are also a collection of blocks, similar to Sections, that create a full-page design. Think of them as a collection of blocks and/or sections. They allow you to quickly create an entire page with very little effort.

Favorites

You can save your favorite, or most used, Sections and Layouts so that you can quickly find them in the Library. To add or remove a Section or Layout to your Favorites, simply click the heart icon on the desired Section or Layout. Your Favorites will show up in the Favorites tab of the Library screen.

Favorites are attached to your user account. Your Favorites are yours. Jane's Favorites are hers.

Customizing Sections and Layouts

Sections and Layouts are collections of existing blocks. Customizing the designs only requires you to use the existing block settings you're already familiar with. If you need to save a custom design or create your own Sections and Layouts, see Adding custom Sections and Layouts to the Library below.

Tips

• Add a Section or Layout to your page and change your mind? Click the Undo button at the top of the editor. WordPress will remove it from the page and the Atomic Blocks Layout Library will come back up for you automatically.
• You can add custom Sections and Layouts to the Library! See Adding custom Sections and Layouts to the Library below.

Adding custom Sections and Layouts to the Library

Adding sections and layouts to the Atomic Blocks Layouts Library is relatively easy.

Code example for adding a section

This is an example to help you understand how it works and to help you get started. Change the details to suit your needs. This code should be added to a custom plugin. If you need help creating a custom plugin, we recommend using Pluginception to create one for you.

Notes:

• Important: change my_custom_section to a unique name for your software so that it doesn't collide with the work others do.
• Getting the content portion of this configuration is the trickiest part. See below for detailed instructions on how to format your content.

function my_custom_section() {
	// Ensure a proper version of Atomic Blocks is active before continuing.
	if ( ! function_exists( 'atomic_blocks_register_layout_component' ) ) {
		return;
	}

	atomic_blocks_register_layout_component(
		[
			// 'type' defines the type of component you're registering. Supported types are 'section' and 'layout'.
			'type'     => 'section',
			// 'key' is a unique identifier for this Section/Layout. Must be unique and can only contain lowercase letters, numbers, and the underscore character.
			'key'      => 'my_custom_notice_section',
			// The display friendly name for the Section/Layout.
			'name'     => 'Custom Notice',
			// The block content that makes up the Section/Layout.
			'content'  => "<!-- wp:atomic-blocks/ab-notice {\"noticeTitle\":\"Notice!\",\"noticeBackgroundColor\":\"#209cef\",\"noticeFontSize\":22} --><div style=\"color:#32373c;background-color:#209cef\" class=\"wp-block-atomic-blocks-ab-notice ab-font-size-22 ab-block-notice\" data-id=\"520f9b\"><div class=\"ab-notice-title\" style=\"color:#fff\"><p>Notice!</p></div><div class=\"ab-notice-text\" style=\"border-color:#209cef\"><p>You've been informed.</p></div></div><!-- /wp:atomic-blocks/ab-notice -->",
			// The category or categories the Section/Layout is assigned to.
			'category' => [
				'notice',
				'another',
				],
			// Keywords are used when searching for Sections/Layouts in the Library.
			'keywords' => [
				'notice',
				'attention',
				'message',
			],
			// The thumbnail image that is displayed in the Library.
			'image'    => 'https://yoursite.com/screenshot-of-your-notice-section.jpg',
		]
	);
}
add_action( 'plugins_loaded', 'my_custom_section' );

Formatting Content for custom Sections and Layouts WordPress requires the content be formatted in a specific way, and this format isn't very easy to read for humans. Here's how you do it:

• Create the content you want to add to the Library.
• Select the content in the editor. Tip: you can select multiple blocks by holding down the Shift key and click the blocks you want.
• With the content selected, click the three-dot icon at the top right of the editing screen and select Code Editor.
• Copy all the content from the Code Editor screen.
• Paste the content in the content key in your code from above.

Now comes the tricky part.

• Move all the pasted code into a single line.
• Convert all the " characters to \" except for the first and last ones that enclose the entire line of code.

That's it. Save your custom code, load up the Layout Library, and use your custom Section or Layout.