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. For best display of sections and layouts, be sure to use a theme like the Atomic Blocks theme, which comes with a full-width block template!

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'     => 'section',
			'key'      => 'my_custom_notice_section',
			'name'     => 'Custom Notice',
			'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 -->",
			'category' => [
				'notice',
				'another',
				],
			'keywords' => [
				'notice',
				'attention',
				'message',
			],
			'image'    => 'https://yoursite.com/screenshot-of-your-notice-section.jpg',
		]
	);
}
add_action( 'plugins_loaded', 'my_custom_section', 12 );

Required data for creating custom Sections and Layouts

The following data is required:

• type: Defines the type of component you're registering. Supported types are 'section' and 'layout'.
• key A unique identifier for this Section/Layout. Must be unique and can only contain lowercase letters, numbers, and the underscore character.
• name: The display-friendly name for the Section/Layout show in the Library.
• content: The block content that makes up the Section/Layout.
• category: The category or categories the Section/Layout is assigned to.
• keywords: Keywords are used when searching for Sections/Layouts in the Library.
• image: The thumbnail image that is displayed in the Library.

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.

Removing Sections and Layouts from the Library

You can remove Sections and Layouts that have been registered with the Library. Worded another way, you can create a whitelist of allowed layouts, to give you and your clients more control over the editing and branding experience.

Code example for controlling which layouts are shown in the Library

add_filter( 'atomic_blocks_allowed_layout_components', function( $layouts ) {
	// Return an array of unique section/layout keys that are allowed, or unset existing ones in the $layouts array.
	return [ 'ab_layout_business_1', 'ab_layout_service_1', 'ab_layout_contact', 'ab_section_service_4' ];
});

Blocks included in Atomic Blocks and Atomic Blocks Pro

Title: AB Device Mockup
Name: atomic-blocks/ab-devices

Title: AB Testimonial
Name: atomic-blocks/ab-testimonial

Title: AB Profile Box
Name: atomic-blocks/ab-profile-box

Title: AB Notice
Name: atomic-blocks/ab-notice

Title: AB Drop Cap
Name: atomic-blocks/ab-drop-cap

Title: AB Button
Name: atomic-blocks/ab-button

Title: AB Spacer
Name: atomic-blocks/ab-spacer

Title: AB Accordion
Name: atomic-blocks/ab-accordion

Title: AB Call To Action
Name: atomic-blocks/ab-cta

Title: AB Sharing
Name: atomic-blocks/ab-sharing

Title: AB Post and Page Grid
Name: atomic-blocks/ab-post-grid

Title: AB Container
Name: atomic-blocks/ab-container

Title: AB Pricing
Name: atomic-blocks/ab-pricing

Title: AB Pricing Column
Name: atomic-blocks/ab-pricing-table

Title: Product Price
Name: atomic-blocks/ab-pricing-table-price

Title: Product Features
Name: atomic-blocks/ab-pricing-table-features

Title: Product Title
Name: atomic-blocks/ab-pricing-table-title

Title: Product Subtitle
Name: atomic-blocks/ab-pricing-table-subtitle

Title: Product Button
Name: atomic-blocks/ab-pricing-table-button

Title: Email newsletter
Name: atomic-blocks/newsletter

Title: AB Advanced Columns
Name: atomic-blocks/ab-columns

Title: AB Advanced Column
Name: atomic-blocks/ab-column

Title: AB Layouts
Name: atomic-blocks/ab-layouts