arrow-left
Only this pageAll pages
gitbookPowered by GitBook
1 of 14

GB Extras - GenerateBlocks Add-on

Loading...

Getting Started

Loading...

Loading...

Features

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Loading...

Quick Links

Pattern Importer

Paste in a pattern and download images in one go.

hashtag
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.

circle-info

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.

hashtag
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.

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.

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.

GB Extras

Welcome to the GenerateBlocks Hacks Add-on

GB Extras Admin Panel

GB Hacks is a series of tweaks and enhancements to GenerateBlocks.

Installing the Plugin

circle-info

GB Hacks comes with a free 5-site license: Please .

hashtag
Install from the WordPress Admin

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

  • Go to Plugins->Add New

  • Go to Upload

  • Upload the gb-extras.zip file

  • Install and Activate the plugin

  • After activation, you can find the plugin's settings in the Dashboard under GenerateBlocks->Hacks.

    hashtag
    Install via FTP

    1. Download the plugin zip file of the sales email you received

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

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

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

    5. Log into your admin dashboard

    6. Head to the plugins screen

    7. Search for GB Extras.

    8. Activate the plugin

    After activation, you will be taken to the plugin's settings screen.

    visit the plugin pagearrow-up-right
    Pattern Inserter Icon and Block
    Copy Blocks Option

    Add Adobe Fonts to Typography Options

    Add Adobe Fonts to GenerateBlocks with the help of a plugin.

    With the help of the (free), you can easily add your Adobe Fonts to WordPress.

    The plugin adds a new menu item under the Appearance settings in the admin.

    You'd enter your Adobe Fonts project ID, and the GB Hacks plugin will show the available fonts in the Typography section in the GenerateBlocks block settings.

    Just a note that GB Hacks is also compatible with the Adobe Fonts extension (paid) for the Blocksy theme.

    Generate New Unique IDs for a Block

    Generate new unique IDs for a copied block.

    For a single block, if you need to reset the unique IDs, you can do so in the block's context menu.

    triangle-exclamation

    Why generate new Unique IDs? GenerateBlocks uses the unique ID attribute of its blocks to do style targeting. If you copy/duplicate a block, sometimes the old unique ID carries over, and modifying one block changes the other. With an updated unique ID, the block can be style-independent of other block styles.

    When generating new Unique IDs, the conversion works recursively, so any child blocks will also have their unique IDs reset also.

    If you need to change the Unique IDs for a group of blocks, wrapping those in a Container block and generating the new Unique IDs for the Container block is recommended.

    Finding the Plugin's Settings

    Finding the plugin's settings are easy and straightforward.

    hashtag
    Finding the plugin on the Plugins screen

    While on the Plugins screen, search for GB Hacks. Click on the Settings link to visit the admin settings.

    hashtag
    Finding the plugin in the GenerateBlocks menu

    Alternatively, you can find the Hacks menu under the GenerateBlocks top-level menu item.

    GB Extras Admin Screen
    GB Hacks Settings Screen on the Plugin's Page
    Custom Adobe Fonts pluginarrow-up-right
    Adobe Fonts in the GenerateBlocks Typography Section
    Generate New Unique IDs option

    Add Styles to Post Types

    GenerateBlocks does its best to load styles for post types, but non-public ones are problematic.

    With non-public post types, like layout builders that come with certain themes, GenerateBlocks has a tough time generating the styles needed as it is technically never rendered on the frontend.

    While visiting the admin options for GB Hacks, you can enable certain post types, so that GenerateBlocks can generate the appropriate styles for the custom type.

    Add Post Type Support to Hidden Post Types
    Hacks Menu under GenerateBlocks

    Set the Headline Block as the Default Block

    The Headline block is very versatile and makes a great default block.

    Set the Default Block to Headline

    Within the GB Hacks admin options, you'll find that you can make the Headline blockarrow-up-right the default block.

    Instead of an empty paragraph block, the default will be an empty Headline block. You can still use your favorite slash commands within the Headline block.

    Headline Block as Default

    Block Editor Commands

    Block Commands in the Block Editor are super useful.

    Block Commands are a new addition to WordPress, and are becoming more useful and powerful as the feature progresses.

    Using CMD+K in the block editor will bring up a search modal very similar to Spotlight on a Mac.

    Shortcut Commands in the Block Editor

    From there, you can type in a few keywords and be presented with some shortcuts.

    In this case, the shortcuts are links to the various GenearateBlocks setting panels, but more can be created via feature requests from customers.

    For example, we're planning on introducing a way to save an SVG asset from a command in the block editor.

    There are no settings for the Commands at this time.

    Transform Group Blocks to Containers

    If you have a block that's in a , you can now convert that to a .

    Converting one or more blocks into a Group is a great way to combine blocks into one logical group. However, the Group block doesn't have the extensive sizing and dimension support that the Container block does. Therefore, it's sometimes necessary to want to convert a Group block to a Container block.

    This feature works upon plugin activation, and there are no options for this feature at the moment.

    At this time, the Container block will not inherit any styles from the Group block.

    Wrap Multiple Blocks in a Container

    Select a group of blocks and wrap a container around them.

    GenerateBlocks can already convert a select group of blocks to a , but only if they are all core GenerateBlocks blocks.

    With GB Hacks, you can select any group of blocks and conveniently wrap a container around those items.

    You'll need to select two or more blocks in order for this option to appear. To wrap in a Container, click on the vertical ellipses symbol and find the option to "Wrap in Container."

    Once done, the blocks you've selected should now be in a Container block.

    Group blockarrow-up-right
    GenerateBlocks Container blockarrow-up-right
    Transform From a Group to a Container
    Container blockarrow-up-right
    Wrap in Container Option in Block Settings
    Blocks Wrapped in a Container
    Custom Adobe Fonts (Typekit)WordPress.orgchevron-right
    Custom Adobe Fonts Plugin
    Adobe Fonts - BlocksyBlocksychevron-right
    Adobe Fonts Extension by Blocksy
    Logo
    Logo