Only this pageAll pages
Powered by GitBook
1 of 18

Pattern Wrangler

Loading...

Getting Started

Loading...

Loading...

Loading...

Features

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

How To

Loading...

Loading...

Loading...

Quick Links

Finding the Patterns Screen

How to find your existing pattern

The Patterns can be found in a top-level menu near the Posts menu item.

From the Patterns menu, you will be able to see all of your recent patterns, whether they are synced or unsynced, and if they are active or not.

Patterns are Front and Center

Upon activation, you'll notice the Patterns menu is now under the Posts menu item in the admin. Beneath that are pattern categories, and the settings for this plugin.

Patterns are a slightly hidden post type by default (they are stashed under Appearance in classic themes). Pattern categories are totally hidden and only exposed if you know the direct URL.

A top-level item was chosen so that the categories and settings could live right next to the patterns.

For those who choose to hide all patterns, you can still hide the Pattern Wrangler settings under Appearance, which is where the original Patterns menu item lived prior to plugin activation.

In Block themes, the Patterns menu item is completely hidden but linked to in the Full-site Editor. Like pattern categories, these are totally hidden unless you know the direct URL.

Installing the Plugin

Install Pattern Wrangler

Install from the WordPress Admin

  1. Log into your WordPress admin (i.e., your dashboard)

  2. Go to Plugins->Add New

  3. Type in "Pattern Wrangler"

  4. Install and Activate the plugin

After activation, you can find the plugin's settings in the Dashboard under Patterns->Settings.

Install via FTP

  1. Unzip the plugin zip in a place you can remember for the next steps

  2. Log into your FTP program of choice for your website

  3. Upload the unzipped folder into wp-content/plugins

  4. Log into your admin dashboard

  5. Head to the plugins screen

  6. Search for Pattern Wrangler.

  7. Activate the plugin

After activation, you can find the settings screen under Patterns->Settings.

Finding the Plugin's Settings

How to find the plugin's settings

Finding the Admin Settings From the Plugins Screen

If you are on the plugin's screen, search for Pattern Wrangler and click on the Settings link.

Finding the Admin Settings from the Menu

Alternatively, in the admin menu, head to Patterns->Settings.

Hide and Disable Patterns

Quickly wrangle your categories by disabling Core and Remote patterns.

Quickly hide all patterns or prevent them from loading from WordPress Core, remotely via the Patterns Library, from a specific registered category, or from a plugin or theme.

Hide All Patterns

Hide all patterns with just one toggle.

If you decide to hide all patterns, you can also hide the Pattern Wrangler settings under the Appearance tab.

Hide Core and Remote Patterns

Disabling Core patterns will remove a large number of patterns and categories, which should make things easier to manage.

Disable remote patterns if you don't want anyone accidentally installing a third-party pattern or a pattern that doesn't meet the design. Remote patterns can also significantly slow down the pattern search in terms of loading.

Hide Theme or Plugin Patterns

If you've installed a theme and don't fancy its patterns, that's fine. You can disable them.

If you prefer patterns not come from any plugins, such as WooCommerce, you can disable them here as well.

Welcome to Pattern Wrangler

Pattern Wrangler helps manage your block patterns and provides useful pattern utilities

Pattern Wrangler helps you manage and deal with block patterns. Whether you love or hate block patterns, this plugin should provide a useful addition to your WordPress plugin arsenal.

Let's go over the major features.

Hide All Patterns

Hide all patterns with just one toggle.

If you decide to hide all patterns, you can also hide the Pattern Wrangler settings under the Appearance tab.

Hide Core and Remote Patterns

Disabling Core patterns will remove a large number of patterns and categories, which should make things easier to manage.

Disable remote patterns if you don't want anyone accidentally installing a third-party pattern or a pattern that doesn't meet the design. Remote patterns can also significantly slow down the pattern search in terms of loading.

Patterns are Front and Center

Upon activation, you'll notice the Patterns menu is now under the Posts menu item in the admin. Beneath that are pattern categories, and the settings for this plugin.

Patterns are a slightly hidden post type by default (they are stashed under Appearance in classic themes). Pattern categories are totally hidden and only exposed if you know the direct URL.

A top-level item was chosen so that the categories and settings could live right next to the patterns.

For those who choose to hide all patterns, you can still hide the Pattern Wrangler settings under Appearance, which is where the original Patterns menu item lived prior to plugin activation.

In Block themes, the Patterns menu item is completely hidden but linked to in the Full-site Editor. Like pattern categories, these are totally hidden unless you know the direct URL.

Patterns list view and post-type enhancements

The Patterns List View can be configured to show you a lot more detail about a pattern.

You can enable columns for:

  • Pattern previews: Upload a featured image to a pattern and it'll show up in this column. This column will display in a lightbox when clicked.

  • Pattern shortcodes: Copy a shortcode that you can paste in any classic editor or page builder.

  • Pattern authors: See who created the pattern.

  • Pattern categories: See at a glance what category a pattern belongs to.

  • Synced or unsynced patterns: See at a glance whether a pattern is synced or unsynced.

Other enhancements to this screen include adding a Pattern Preview shortcut and a Bulk Set to Draft option.

Frontend Pattern Previews

Preview what a pattern will look like on the frontend.

For those not using block themes, authoring patterns involves a lot of trial and error in coordinating the block editor's appearance with the actual frontend appearance.

The default pattern experience doesn't provide a preview, so we've built one in. It also works well with block themes.

Behind the scenes, we're loading most of the theme's styles, but trying to preserve the pattern's layout and structure. It should provide a close approximation of how a pattern will behave when inserted or displayed on your site.

For security reasons, only those with publish_posts permissions can preview patterns.

Hide Theme or Plugin Patterns

If you've installed a theme and don't fancy its patterns, that's fine. You can disable them.

If you prefer patterns not come from any plugins, such as WooCommerce, you can disable them here as well.

Re-enabling the Customizer With Full-site Editing

Breaking up with the customizer is difficult, even when using a block theme. With Pattern Wrangler, you can re-enable the customizer menu item, and it will show up where it did before under Appearance.

Disabling the Customizer UI in the settings does not remove the Customizer UI in classic themes.

The customizer still has a lot of useful items that are often easier to grab than dive into full-site editing land.

The Customizer and Block Editor CSS

The customizer is also useful for quickly solving CSS issues with blocks.

The customizer has an Additional CSS field, which we are reluctant fans of.

Additional CSS is a popular feature, and it's even present in FSE (Block) themes in the styles panel.

Troubleshooting CSS issues on the front end with blocks is no picnic, and the customizer CSS can often provide temporary fixes until a more permanent fix is implemented. Since customizer CSS doesn't load in the admin, any frontend block fixes will not be reflected in the admin.

With Pattern Wrangler, you can enable the customizer and have it load CSS in the block editor. This means that you can use the customizer CSS as a block stylesheet for both the front end and admin.

If you disable the customizer CSS on the front end, you can technically have a block-editor-only stylesheet without the need to code a block plugin.

Disabling the Customizer CSS on the Frontend

Through our tests, we've found that the customizer CSS on the front end can slow things down quite a bit, particularly as the CSS is rendered and takes up space in the document size.

If you're not using the customizer's Additional CSS section, you can safely disable customizer CSS and possibly receive some performance gains.

As mentioned, the Customizer CSS can be used as a temporary fix until something more permanent can be implemented, so keep this in mind when disabling this option.

Copy Patterns From Site to Site With the Pattern Importer Block

If you have a pattern on one site and need to transfer it to another, there's a Pattern Importer block available that'll automatically download any remote images.

This can allow you to transfer guest posts from site to site. Or bring a production pattern down locally, along with the images.

Manage and Map Registered Categories

Registered categories are categories registered by WordPress Core, your theme, or your plugins. These are added programmatically, as opposed to creating your own pattern category in the admin.

With Pattern Wrangler, you can disable, map, and rename these registered categories.

One use case of mapping is consolidating all of a theme's patterns into just one category or selectively disabling categories.

The result can be a much more organized a streamlined pattern experience with the available categories.

Re-enable Menus in Full-site Editing (Block) Themes

With Block themes, there is no need for the Menus menu item as there is a navigation block that does similar things. However, creating menus in the navigation block is quite tedious, and some are more comfortable creating menus the old-fashioned way.

Just note that once you create the navigation block and select the menu, your menu will not be synced with the core menu again.

This feature is useful for quickly creating a menu, importing it into the navigation block, and disabling it again.

Pattern Wrangler is a free plugin: Please on the WordPress Plugin Directory

Download the plugin zip file

By default, WordPress allows Core and remote patterns. Core patterns are patterns that come with WordPress itself. Remote patterns are those that come in the .

.

By default, WordPress allows Core and remote patterns. Core patterns are patterns that come with WordPress itself. Remote patterns are those that come in the .

The Pattern Importer block also natively integrates with the popular layout builder (freemium).

Finding the Plugin's Settings
visit the plugin
from the WordPress Plugin Directory
Block Pattern Directory
Pattern Wrangler is Free on WordPress.org
Block Pattern Directory
Finding the Plugin's Settings
GenerateBlocks

Control the Customizer, Menus, and Customizer CSS

Re-enable the Customizer menu and get access to the Additional CSS screen.

Breaking up with the customizer is difficult, even when using a block theme. With Pattern Wrangler, you can re-enable the customizer menu item, and it will show up where it did before under Appearance.

Disabling the Customizer UI in the settings does not remove the Customizer UI in classic themes.

The customizer still has a lot of useful items that are often easier to grab than dive into full-site editing land.

The Customizer and Block Editor CSS

The customizer is also useful for quickly solving CSS issues with blocks.

The customizer has an Additional CSS field, which we are reluctant fans of.

Additional CSS is a popular feature, and it's even present in FSE (Block) themes in the styles panel.

Troubleshooting CSS issues on the front end with blocks is no picnic, and the customizer CSS can often provide temporary fixes until a more permanent fix is implemented. Since customizer CSS doesn't load in the admin, any frontend block fixes will not be reflected in the admin.

With Pattern Wrangler, you can enable the customizer and have it load CSS in the block editor. This means that you can use the customizer CSS as a block stylesheet for both the front end and admin.

If you disable the customizer CSS on the front end, you can technically have a block-editor-only stylesheet without the need to code a block plugin.

Disabling the Customizer CSS on the Frontend

Through our tests, we've found that the customizer CSS on the front end can slow things down quite a bit, particularly as the CSS is rendered and takes up space in the document size.

If you're not using the customizer's Additional CSS section, you can safely disable customizer CSS and possibly receive some performance gains.

As mentioned, the Customizer CSS can be used as a temporary fix until something more permanent can be implemented, so keep this in mind when disabling this option.

Re-enable Menus in Full-site Editing (Block) Themes

With Block themes, there is no need for the Menus menu item as there is a navigation block that does similar things. However, creating menus in the navigation block is quite tedious, and some are more comfortable creating menus the old-fashioned way.

Just note that once you create the navigation block and select the menu, your menu will not be synced with the core menu again.

This feature is useful for quickly creating a menu, importing it into the navigation block, and disabling it again.

The Pattern Importer Block

Copy Patterns From Site to Site With the Pattern Importer Block

If you have a pattern on one site and need to transfer it to another, there's a Pattern Importer block available that'll automatically download any remote images. This includes any background images.

This can allow you to transfer guest posts from site to site. Or bring a production pattern down locally, along with the images.

Enhance the Default Pattern List View

Patterns list view and post-type enhancements

The Patterns List View can be configured to show you a lot more detail about a pattern.

You can enable columns for:

  • Pattern previews: Upload a featured image to a pattern and it'll show up in this column. This column will display in a lightbox when clicked.

  • Pattern shortcodes: Copy a shortcode that you can paste in any classic editor or page builder.

  • Pattern authors: See who created the pattern.

  • Pattern categories: See at a glance what category a pattern belongs to.

  • Synced or unsynced patterns: See at a glance whether a pattern is synced or unsynced.

Other enhancements to this screen include adding a Pattern Preview shortcut and a Bulk Set to Draft option.

Pattern Previews

Preview patterns on the frontend

The built-in Patterns post type in WordPress doesn't have a frontend preview by default.

With Pattern Wrangler, you can launch a preview from the Patterns screen, or from the block editor. Pattern Wrangler does its best to match your theme when displaying the pattern and is compatible with Full-site Editing (Block) themes.

Frontend Pattern Previews

For those not using block themes, authoring patterns involves a lot of trial and error in coordinating the block editor's appearance with the actual frontend appearance.

The default pattern experience doesn't provide a preview, so we've built one in. It also works well with block themes.

Behind the scenes, we're loading most of the theme's styles, but trying to preserve the pattern's layout and structure. It should provide a close approximation of how a pattern will behave when inserted or displayed on your site.

For security reasons, only those with publish_posts permissions can preview patterns.

The Pattern Importer block also natively integrates with the popular layout builder (freemium).

GenerateBlocks

How to Disable and Map Categories

Coming soon.

Patterns Screen in the Admin
Patterns Top-level Menu Item
Pattern Wrangler Admin
Pattern Wrangler on the Plugin's Screen
Patterns->Settings to Find the Pattern Wrangler Settings
Hide All Patterns in the Pattern Wrangler Settings
No Patterns in the Block Inserter Screen
Hide Pattern Wrangler Menu Item
Default Patterns View in WordPress
Hide Core and Remote Patterns
Core and Remote Patterns Disabled
Hide Patterns Coming From Your Theme or Plugins
Patterns List View
Pattern Wrangler Quick Demo
Hide All Patterns in the Pattern Wrangler Settings
No Patterns in the Block Inserter Screen
Hide Pattern Wrangler Menu Item
Default Patterns View in WordPress
Hide Core and Remote Patterns
Core and Remote Patterns Disabled
Patterns Top-level Menu Item
Wide View of the Patterns List View Screen
Preview a Pattern on the Frontend of a Site
Preview Shortcut on a Pattern
Hide Patterns Coming From Your Theme or Plugins
Customizer Options in Pattern Wrangler
Customizer + Editor
CSS in the Customizer
Styles Panel in FSE (Block) Themes
Additional CSS in Styles Panel in FSE (Block) Themes
Stress Test Importing a Pattern with 69 images.
Registered Categories Can be Disabled, Renamed, and Mapped
An Example of a Translated and Organized Pattern Section
Customizer Options in Pattern Wrangler
Customizer + Editor
CSS in the Customizer
Styles Panel in FSE (Block) Themes
Additional CSS in Styles Panel in FSE (Block) Themes
Show Menu Option in the Admin Settings
Stress Test Importing a Pattern with 69 images.
Wide View of the Patterns List View Screen
Preview a Pattern on the Frontend of a Site
Preview Shortcut on a Pattern

How to Hide All Patterns

Hide all patterns from displaying in the block editor.

Hide all patterns with just one toggle.

If you decide to hide all patterns, you can also hide the Pattern Wrangler settings under the Appearance tab.

Disable, Rename, and Map Categories

Manage, Disable, and Map Registered Categories

Registered categories are categories registered by WordPress Core, your active theme, or your plugins. These are added programmatically, as opposed to creating your own pattern category in the admin, which is stored in the database.

With Pattern Wrangler, you can disable, map, and rename these registered categories.

One use case of mapping is consolidating all of a theme's patterns into just one category or selectively disabling categories.

The result can be a much more organized a streamlined pattern experience with the available categories.

Shortcodes for Patterns

Output any saved pattern as a shortcode.

When navigating to the Patterns admin screen, you'll be presented with a Shortcodes column, which you can then copy.

You can paste this shortcode anywhere shortcodes are supported, which includes most page builders.

As a block plugin author, you can recommend this plugin's shortcode facility to display your block in page builders.

Patterns list view and post-type enhancements

Place a copied shortcode anywhere shortcodes are supported. Shortcodes work for both synced and unsynced patterns.

In the case of using a shortcode for unsynced patterns, you can consider every instance of that shortcode synced.

Hide All Patterns in the Pattern Wrangler Settings
No Patterns in the Block Inserter Screen
Hide Pattern Wrangler Menu Item
Registered Categories Can be Disabled, Renamed, and Mapped
An Example of a Translated and Organized Pattern Section
Wide View of the Patterns List View Screen
LogoGenerateBlocksWordPress.org
GenerateBlocks is an incredibly easy and powerful layout builder for the block editor
LogoGenerateBlocksWordPress.org
GenerateBlocks is an incredibly easy and powerful layout builder for the block editor
LogoGitHub - DLXPlugins/pattern-wrangler: Pattern Wrangler helps you manage your WordPress block patterns.GitHub
Pattern Wrangler is Open Source, Free, and on GitHub

How to Load Customizer CSS in the Block Editor

Coming soon.