...

Using the Plus Addons for Gutenberg

using-the-plus-addons-for-gutenberg

Plus Addons for Gutenberg plugin

The Plus Addons for Gutenberg is a WordPress plugin that extends the capabilities of the visual editor integrated into WordPress since version 5.0.  The Plus Addons for Gutenberg plugin provides blocks that make it easy to add content and different types of functional elements to a post or page. It also provides detailed control over the appearance and responsiveness of each element.

 In addition to the blocks, the Plus Addons for Gutenberg plugin includes a dashboard for the blocks that it adds to the Gutenberg visual editor.  The dashboard provides information about each block, control over the font loading and caching, an area for adding custom CSS and JS, and a white label option available after upgrading to the pro version.

The Plus Addons for Gutenberg plugin is a well-designed plugin that many WordPress creators will find worthy to add to their toolbox. The following guide will describe how to install the plugin, its interface, and then highlight a few of the various blocks that come with the free version.

  • Installing the Plus Addons for Gutenberg 
  • The Plus Addons Dashboard and Block Interfaces
  • Examples of Plus Addon Blocks in Detail
  • Upgrading to the Pro Version

Get started with the most secure WordPress hosting. Look no further than InMotion Hosting’s Managed WordPress hosting solutions!

check markFree SSLs    check markMalware & Hack Protection    check markDDoS Protection

View WordPress Hosting Plans

How to Install the Plus Addons for Gutenberg Plugin

Adding the Plus Addons plugin is simple using the plugins interface in the WordPress Administrator Dashboard.  Follow the steps below to complete the installation.

  1. Log in to the WordPress Administrator Dashboard.
  2. Click on Plugins in the main menu and then click on Add New.
  3. In the keyword, field labeled Search Plugins type in Plus Addons for Gutenberg and hit enter.
  4. You will see The Plus Addons by POSIMYTH. Click on the Install button.
    Plugin install image for Plus Addons for Gutenberg
  5. When the installation completes, the install button will change to an Activate button.  Click on this button to make the plugin live on your WordPress install.

This completes the installation of The Plus Addons for Gutenberg plugin. You will see that a menu item is added to the main menu of WordPress.  The free Plus Addon blocks are also added to the Gutenberg editor.

The Plus Addons Dashboard and Block Interfaces

It’s really easy to get familiar with the Plus Addons for Gutenberg plugin because of its friendly and intuitive interface.  We will start with details on the dashboard and then look at the block interface.

The Plus Addons Dashboard

To get to the dashboard simply click on The Plus Addons menu item in the WordPress Administrator Dashboard.  You will see the following:

Dashboard for the Plus Addons for Gutenberg

The plugin dashboard provides a wealth of information and functionality for the use of the added blocks.  The home page of the dashboard includes:

  • A summary description of what’s included with the plugin
  • A version release history and link to the full changelog under What’s New
  • A link to their documentation
  • Frequently Asked Questions list
  • System Requirement checklist
  • Rating section
  • Technical Support hours, contact information, and links
  • Social Media links
  • Feedback link
  • Subscription link

The information provided by the home page gives you a comprehensive set of information and links to find out about the plugin, get help, or provide feedback to the developers or other users.

The System Requirement checklist gives you a visual summary of what’s needed to properly run the plugin with your WordPress install.  Items that are not available for the plugin are marked and labeled so that you immediately know what’s missing. You can see how it appears in the screenshot below:

System Requirements for the Plus Addons for Gutenberg plugin

Plus Blocks

The next section in the Plus Addons dashboard is a section labeled Plus Blocks. This section allows you to see the available blocks.  You can filter them to see all of the blocks, only the free blocks, only the freemium blocks, or just the pro blocks.  Pro blocks that have not been purchased will be grayed out.

Freemium blocks are blocks that are available in the editor, but their full functionality is not available until you upgrade.

Pro blocks are not available but will be listed as grayed out options in the menu.

The Plus Blocks section is supposed to allow you to get information and a video for each block, but as of this time, the links are not working.  Currently, the best way to see more information on each block is to go to their website.

You can also deactivate or activate existing blocks by clicking a slider next to each block name on this page.  You would then click on the green SAVE button at the bottom of the page to save that change.

This feature is useful for reducing the number of blocks being used especially when using multiple plugins that add similar blocks to the Gutenberg editor.

Extra Options

The next section of the Plus Addons dashboard gives you the options for enabling Font Awesome and the Google Map API key.

Extra options in the Plus Addons for Gutenberg plugin

The Plus Addons plug uses Font Awesome with the blocks added in Gutenberg. You can disable this option to stop it from loading on your website.

The Google Map API key can be hidden or added in order to use the map block.  The key is required in order to use the Advance Google Map element

Performance

The performance section of the dashboard is a section that allows you to purge the cache for the plugin.  The cache is generated to increase performance by reducing the number of requests through CSS and JS.

Purge cache for the Plus Addons for Gutenberg plugin

Custom

The custom section allows you to add custom CSS styles and JS scripts that affect the Plus Addon blocks.

White Label

The final section in the dashboard is for a pro-only available feature called White Label. You can use this section to set up a client’s branding including a logo or icon image.

Block Interface

The Plus Addon blocks can be seen by going into a post or page and then adding a new block.  To pull up all of the available blocks, type Plus in the search field.

Plus Addons in the menu

Here you will see the free and freemium blocks that you can add to your content. When you click on a block, it will be added to your post or page.  It will have filler content populated so that you can see how the block will appear.  The Block menu to the right of your post will have three tabs:  Layout, Style, and Advanced.

accordion block

The block added above is called the Accordion block.  You can see the default content and the block menu.  

The Layout menu allows you to modify how and what the block displays.  Each block may have unique functionality and options in each of the menus.  As this is a freemium block, you will see that the menu includes an Extra Option that will only be available should you upgrade to the Pro version.

The Style menu gives you even more detailed control over how the block and its content will appear. These options will vary based on the block that you use. The style options available for the accordion block include control over the typography of the title, its alignment, and color.  You can also manipulate the background with colors. Style for the accordion block also includes control of the description content text and icon color/spacing.

Style tab when editing the accordion in the Plus Addons for Gutenberg plugin

The Advanced tab in the block menu includes more control for Spacing, Background, Borders, Scroll animation, Positioning, and Responsiveness.  There are also options for Custom classes and Advanced CSS additions.

Advanced tab for the Plus Addons for Gutenberg plugin

Other Controls and Options

All of the block options include the option to add Custom CSS through the advanced section. Additionally, many of the options can be set per 3 screen types:  desktop, tablet, or phone.

Global  Presets

Each block can also be affected by Global Presets. These options can be set in the editor and you can pre-define them to affect colors, typography, spacing, and box shadows. To find this option, click on the Posimyth icon in the top right corner and you will see Global Presets appear in the column beneath it. Here you can add presets and edit the options for each.

Global presets for the Plus Addons for Gutenberg plugin

Examples of the Plus Addon Blocks

To give you an idea of the creativity that comes with using the Plus Addon Blocks, we’re going to provide descriptions of a few of the blocks.

Accordion Block

The accordion block allows you to include a lot of text without having to display it on the screen.  It helps to provide a general term and then hide the specifics unless a viewer wants to see it.

You can change the text and the graphical appearance as well as the placement of the block in your page or post.

Accordion block for the Plus Addons for Gutenberg plugin

You can see in the screenshot above how the colors and text can be changed for appearance purposes. You can also change the animation on how the accordion opens and the appearance of the borders in the Style tab.

Tabs Tours

Another way that you can include lots of text but hide it in plain sight is to use the Tab Tours block. This block allows you to add tabs that can contain content.  The tabs can be displayed horizontally or vertically.  This can be changed in the layout tab.  

Tab tours options for the Plus Addons for Gutenberg plugin

Tabs are another way to include a lot of content without having to create separate pages. This block allows you to provide information and organize it in a different way while providing quick access.

Draw SVG

This block allows you to make use of Font Awesome and add simple graphics (SVG images) in your post or page.  You can also create custom graphics and upload them for use in this block. The graphics available in this block are using the Scalable Vector Graphic format so that these graphics are still usable on multiple screen types to maintain a responsive design.

Draw SVG example for the Plus Addons for Gutenberg plugin

In the screenshot above you can see the list of available graphics as well as the selected graphic.   These graphics are animated and can be controlled through the settings in the Style tab.  You can also add borders, and fill color through other settings in the same tab.  As this is also a freemium block, there are additional options that are available after upgrading to the pro version.

Upgrading to the Pro Version

Currently, the pro version is not yet directly available through the POSIMYTH website.  This is still a very new product, so the links for extra options or features labeled as the extra options or pro features are not working.  The link labeled PRO on the POSIMYTH is going to a contest drawing.  We recommend subscribing to the service through the email option in the bottom right corner of the site.

Overall the Plus Addons for Gutenberg plugin is a valuable resource that can enhance your content creation using the visual editor in WordPress. We recommend its use even though only the free and freemium blocks are currently available at this time.  

To learn more about WordPress plugins please see our WordPress Plugins page!

Discover more from WIREDGORILLA

Subscribe now to keep reading and get access to the full archive.

Continue reading