Pattern Importer

Paste in a pattern and download images in one go.

Pattern Importer

Pattern Importer Block

The Pattern Importer block allows you to paste and display any block pattern code in the block editor. It is specifically designed for GenerateBlocks, but it can also accommodate other patterns.

Any remote images found in the pattern will be downloaded locally, and the image source will be updated.

Why download remote images? Using remote images is not ideal because the images are not in the site owner's control and can't be compressed or cached. Remote images can also be deleted or modified by a third party. Hosting the images locally on your site prevents any of these conflicts.

In addition to gathering the remote images, the Pattern Importer also replaces the GenerateBlocks uniqueId attributes to prevent style conflicts. If you've ever duplicated a block and had style conflicts, this will alleviate any matching unique IDs.

Adding the Pattern Inserter Block

You can find the Pattern Inserter block where you can find the other GenerateBlock blocks, which is grouped in a GenerateBlocks category.

Pattern Inserter Icon and Block

To copy a pattern, select the blocks that are part of the pattern, click on the vertical ellipses symbol, and click "Copy blocks." This will copy the block pattern code to your clipboard.

Copy Blocks Option

You can now paste the pattern code into the Pattern Inserter block. If there are a lot of images, this may take a few minutes to finish. Once imported, the Pattern Inserter block is removed and replaced with the converted pattern.