Advanced Gutenberg Documentation

I. ADVANCED GUTENBERG INSTALL

1.1 Install

In order to install our plugin you should use standard WordPress installer or unzip and put all the folder in /wp-content/plugin.

install-wp-media-folder


Then click on activate plugin​, to see menu Advanced Gutenberg appear on the WordPress left menu.

Advanced Gutenberg is accessible from the Gutenberg menu. You also have the parameters under the "Settings" menu.

1.2 Update the plugin

In order to update the Advanced Gutenberg, you can use the WordPress default updater. You can also remove and install the new version from a .zip file downloaded on www.joomunited.com or wordpress.org. In any case you won’t lose any content because everything is database stored.

 

update-gutenberg

 

Be sure to always have the latest version to avoid security and stability problem.

II. COMMON FUNCTION

2.1. Block list

By using our plugin, you can create several profiles and select the icons in Block list will apply to this profile.

To set up your own profile you can use “Profiles” point of “Gutenberg” menu. Choose one of the profiles and you will see profile configuration.

user-editor-profiles

You can enable/disable icons displaying in Gutenberg editor by clicking to them. And press Update List button to update new icons.

block-list

Once it's saved, the icons will be available in your editor.

bock-list-editor1

2.2. Configuration

To use light box and caption feature for images, you need enable options: Open galleries in lightbox and Image caption in menu Settings > Advanced Gutenberg > Configuration tab

gutenberg-settings

 

  • Open galleries in lightbox: Open gallery images as a lightbox style popup
  • Image caption: Load images (alt) attribute as caption for lightbox images
  • Google API Key: this API key is required to using Map Block
  • Blocks spacing: Apply a minimal vertical block spacing automatically. Default is None. Values in pixels

2.3 Custom styles

The Advanced Gutenberg configuration allows to define custom CSS snippet that can be used in your editor and HTML tag options. To use custom styles, click on Settings > Advanced Gutenberg of the left menu. There you should click on “Custom styles” tab.

To create a new style you should click “Add new class” button in the list of styles. You can edit you’re your CSS right in the Custom CSS field.

custom-styles-gutenberg

 

All the changes you do will be displayed in the left part of the page. They will be applied to the sting with “Example text”. The text above and under the string displays how your styles will look in the content of other elements.
After editing your custom style you should save it using “Save styles” button.
To apply a style to the element in editor you should select the element and choose a style from the dropdown list named “Custom styles”.  To make it default and delete all custom styles choose “Paragraph” option.

 

custom-css-style-block