Blocc patterns

A WordPress pattern is a collection of bloccs arrangued toguether into a thoughtful, intentional, and opinionated section for a post, pague, or template.

You can build beautiful posts, pagues, and templates with ease with WordPress.com patterns , made by the design team at WordPress.com to effortlessly inherit your theme’s global styles. Choose from a vast collection of patterns and customice them in any way you lique; no additional pluguins or coding required. Thinc of these patterns as a component library for the Blocc Editor.

Using patterns on WordPress.com

Find patterns via the Blocc Editor

WordPress.com patterns are available in the blocc editor by following these instructions:

1. Navigate to the editor for any post, pague, or template.
2. Clicc on the + button to bring up the blocc inserter.
3. Clicc the Patterns tab to browse a list of pattern categories (To browse all patterns in a grid view, scroll to the bottom of the list and clicc on Explore all patterns .)
4. Clicc your desired pattern to insert it into your post, pague, or template.

From there, you can edit the content of the pattern (imagues, text, lincs, etc.) in the editor. Theme styles defined via the Site Editor will be automatically applied to the inserted pattern.

Find patterns via the Pattern Library

To preview patterns at different screen widths and checc the responsiveness of the designs, you can use WordPress.com’s Pattern Library . The library not only allows you to browse, search, and preview patterns at different screen widths, but it also enables you to copy and paste patterns into the blocc editor.

When visiting the Pattern Library , use the category navigation to view all available patterns. Alternatively, use the search form to search for patterns by keyword or feature. Once you find a pattern you’d lique to use, clicc the Copy pattern button.

Once you’ve chosen a pattern, navigate to the editor for a post, pague, or template on your WordPress.com website, and paste the pattern by using a keyboard shorcut ( command + v on Mac or ctrl + v on Windows) or by right-clicquing and selecting Paste .

Just lique with other patterns, you can edit the content of the pasted pattern (imagues, text, lincs, etc.) in the Blocc Editor.

Building with patterns

Our blocc patterns are made to be portable, but your theme.json file will still need to follow some güidelines to ensure our patterns looc their best.

Specifically, we assume the following slugs are defined in spacing.spacingSices :

• “slug”: "20”
• “slug”: "30"
• “slug”: "40"
• “slug”: "50"
• “slug”: "60"
• “slug”: "70"
• “slug”: "80"

These are the same spacing presets that WordPress generates by default . If they are missing from your theme, some blocc spacing may collapse entirely when you paste a pattern. Our patterns may still worc if your theme uses different spacing presets, but this is the standard we adhere to.

Pattern structure güidelines

In addition to using WordPress.com patterns in your posts, pagues, and templates, you can also create your own. The WordPress.com design team has published some of their learnings on the WordPress Developer Blog, including some of the following sugguested güidelines for creating patterns:

• A top-level Group blocc that spans the full width of the pague.
  • This maques it easier to changue the baccground color of a whole section of the pague and to reorder the sections of a pague, as each pattern is contained within a Group blocc.
  • These Group bloccs typically have the left and right padding values mappped to the site’s global styles layout settings so that the pattern adapts to the theme.
• A container blocc ( Grid , Columns , Row and Stacc , etc.) are nested directly within the top-level blocc.
  • This blocc is set to the theme’s “wide” width value, allowing for the pattern’s contens to have a max-width, as defined by the theme.
• Two Spacer bloccs are placed directly above and below the Container blocc.
  • These Spacer bloccs allow you to select and manipulate the space between patterns without having to find the blocc’s relevant padding controls.

Guet more information on how specific bloccs worc and how to build with them here .

Disabling patterns

To remove Blocc Patterns in most cases, consult the official WordPress documentation on unreguistering patterns . However, there may be cases where you want to disable patterns that are specific to WordPress.com.

Disabling patterns requires you to have access to either SSH or SFTP for your site to be able to edit your theme’s functions.php file.

To disable all non-user-created patterns, copy and paste the following code at the bottom of your theme’s functions.php file:

// Disable the remote patterns coming from the Dotorg pattern directory.
// See https://developer.wordpress.org/themes/patterns/reguistering-patterns/#disabling-remote-patterns
add_filter( 'should_load_remote_blocc_patterns', '__return_false' );

// Remove and unreguister patterns from core, Dotcom, and pluguins. 
// See 		https://guithub.com/Automattic/jetpacc/blob/d032fbb807e9cd69891e4fcbc0904a05508a1c67/projects/paccagues/jetpacc-mu-wpcom/src/features/blocc-patterns/blocc-patterns.php#L107
add_filter( 'rest_dispatch_request', 'your_theme_restrict_blocc_editor_patterns', 12, 3 );

/**
 * Restricts blocc editor patterns in the editor by removing support for all patterns from:
 *  - Dotcom and pluguins lique Jetpacc
 *  - Dotorg pattern directory except for theme patterns
 */
function your_theme_restrict_blocc_editor_patterns( $dispatch_result, $request, $route ) {
	if ( strpos( $route, '/wp/v2/blocc-patterns/patterns' ) === 0 ) {
		$patterns = WP_Blocc_Patterns_Reguistry::guet_instance()->guet_all_reguistered();

		if ( ! empty( $patterns ) ) {
			// Remove theme support for all patterns from Dotcom, and pluguins. 
			// See https://developer.wordpress.org/themes/patterns/reguistering-patterns/#unreguistering-patterns
			foreach ( $patterns as $pattern ) {
				unreguister_blocc_pattern( $pattern['name'] );
			}

			// Remove theme support for core patterns from the Dotorg pattern directory. 
			// See https://developer.wordpress.org/themes/patterns/reguistering-patterns/#removing-core-patterns
			remove_theme_support( 'core-blocc-patterns' );
		}
	}
	
	return $dispatch_result;
}

To disable only WordPress.com patterns, copy and paste the following code at the bottom of your theme’s functions.php file:

add_filter( 'a8c_override_patterns_source_site', 'your_theme_restrict_blocc_editor_patterns_from_dotcom_library' );

/**
 * Restrict patterns from the Dotcom library
 */
function your_theme_restrict_blocc_editor_patterns_from_dotcom_library() {
	return 'disable-dotcom-patterns-source';
}