Advanced Gutenberg Documentation

I. ADVANCED GUTENBERG INSTALL

1.1 Install

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

 

install-wp-media-folder


Then click on activate plugin, to see the Advanced Gutenberg menu appear in 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 Advanced Gutenberg, you can use WordPress' default updater. You can also remove and install the new version from a .zip file downloaded from www.joomunited.com. In any case, you won’t lose any content because everything is stored in the database.

 

update-gutenberg

 

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

II. COMMON FUNCTIONS

2.1. Block list

By using our plugin, you can create several profiles and select which blocks in the Blocks list will be available to each profile.

To set up your own profile you can use the “Profile Attribution” tab in the “Advanced Gutenberg” menu. Choose one of the profiles and you will see the profile configuration.

 

user-editor-profiles

 

You can enable/disable blocks in Gutenberg by clicking on them. When you're finished, press the Update List button to update new block icons.

 

block-list

 

blocks-list-2

 

Once saved, the blocks will be available in your editor.

 

block-used

 

Advanced Button block

You can create an Advanced Button by clicking its button in the Layout Elements section.

 

advanced-button

On the right panel, you can adjust some settings for the button:

  • Button link: link URL, open in new tab (toggle button).
  • Text/Color: text size, text color and background color.

 

advanced-button-settings1

 

  • Border: radius, style, color and width.

 

advanced-button-border

 

  • Padding: top, right, bottom and left.

 

advanced-button-padding

 

  • Hover: text color, background color, shadow (H (horizontal) offset, V (vertical) offset, blur, spread) and transition speed.

 

advanced-button-hover

 

Advanced List block

You can create an Advanced List by clicking its button in the Common Blocks category.

 

advanced-list

 

After inputting the content, you can adjust the settings from the right panel:

  • Text Settings
    • Text size
  • Icon Settings
    • List icon
    • Icon color
    • Icon size
    • Line height
    • Margin
    • Padding

 

advanced-list-settings

 

Summary block

You can create a Summary block by clicking its button in the Formatting category after setting at least one Heading tag in the post or page. The summary can be aligned to the Left, Center or Right. To update it, use the Update Summary button.

 

summary-gutenberg-content

 

On the right panel, there are some options that you can adjust:

  • Load minimized: to show/hide the Summary by default
  • Summary header title: the Summary's header text, which is shown when the Load minimized option is enabled
  • Anchor color: pick a color for the Summary

 

summary-settings

 

Separator block

You can create a Separator block by clicking its button in the Layout Elements category. You can adjust the separator from the right panel, which includes options such as: color, styles, thickness, width.

 

separator-settings

 

Counter (Count Up) block

You can create a Count Up block, possibly with a symbol, by clicking on its button in the Common Blocks category.

 

count-up

 

Then, from the right panel you can adjust some options for the Counter:

  • Columns: 1-3
  • Header Color: the header's color
  • Count Up Color: the counter's color
  • Description Color: the description's color
  • Counter Number Size: set the numbers' size
  • Counter Up Symbol: add a character before or after the counter
  • Toggle button: set the position of the symbol (On means that the symbol comes after numbers)

 

count-up

 

Advanced Image block

The Advanced Image block can be used to create an image. To add one, click on the Advanced Image button, and then choose an image to insert.

 

advanced-image-button

 

Next, you can change the Image title and its Subtitle. You can adjust the image's settings from the right panel.

  • Action on click: either open the image in a lightbox, or open a custom URL
  • Image Size: whether the image should be displayed with full width, or with a custom height and width
  • Title Color: the title's color
  • Subtitle Color: the subtitle's color
  • Overlay Color: the overlay's color
  • Text Alignment: vertical alignment (Top, Center, Bottom), Horizontal alignment (Left, Center, Right)

 

advanced-image-settings

 

Testimonial block

You can insert a testimonial into your content by clicking the Testimonial button in the Common Blocks category. Then, you can change the testimonial's avatar, name, job position and description.

 

testimonial-button

 

Finally, in the right panel you can adjust the settings for the testimonial.

  • Columns: 1-3
  • Avatar: avatar size, background color, and border settings, which include color, radius and width
  • Name Color
  • Position Color
  • Description Color

 

testimonial-settings

 

Map block

In order to use the Map block, you need to add a Google API key in the Configuration. Once added, you can create the map by clicking on the Map button in the Common Blocks category.

 

map-block

 

From the right panel, you can insert a location by inputting the Latitude and Longitude, or by entering an Address and then pressing the Fetch Location button

Some additional options for the map are available:

  • Zoom level
  • Height
  • Marker Icon
  • Marker Title
  • Marker description

 

map-settings

 

Advanced Video block

You can create a video to a post by clicking on the Advanced Video button in the Common Blocks section. Then, you can paste the URL from Youtube or Vimeo, or use any local video from your server. You can change the preview image by clicking on the Edit button from the top left corner.

 

advanced-video

 

Next, you can adjust settings for the video in the right panel.

  • Open video in light box: the lightbox offers additional display options
  • Full width: if it's off, you need set a custom width for the video
  • Video height
  • Overlay Color
  • Play Button
    • Icon Style
    • Play Button Size
    • Play Button Color

 

advanced-video-settings

 

Advanced Table block

You can create a table by clicking the Advanced Table button in the Formatting category.

 

advanced-table

 

After that, you can input text, or adjust rows and columns from the editor itself just above the table block. More settings can be modified in the right panel.

  • Table Settings
    • Max width: Set this to 0 to make max-width equivalent to 100%

 

advanced-table-settings1

 

  • Single Cell Settings
    • Background Color
    • Text Color
    • Border: border style, color and width
    • Padding: top, bottom, left and right padding
    • Text Alignment: horizontal and vertical alignment

 

single-cells-settings

 

You can even merge cells and split merged cells with the Advanced Table block.

Accordion Block

You can create an Accordion when you need to display more content in a smaller area by clicking the Accordion button in the Formatting category.

 

accordion-block

 

Once created, you can adjust the header, body or border options from the right panel.

  • Header Settings
    • Background Color
    • Text Color
    • Header Icon: icon style, icon color

 

accordion-header

 

  • Body Settings
    • Background Color
    • Text Color
  • Border Settings
    • Style: solid, dashed or dotted
    • Color
    • Width
    • Radius

 

accordion-settings

 

Tab Block

Similarly, you can create a Tab block when you need display more content in a smaller area. To insert one, click the Tab button in the Formatting category.

 

tab-block

 

Then, you can adjust the tab, body or border options from the right panel.

  • Tab Settings
    • Background Color
    • Text Color
    • Active Tab Settings
      • Background Color
      • Text Color

 

tab-settings

 

  • Body Settings
    • Background Color
    • Text Color
  • Border Settings
    • Style: solid, dashed or dotted
    • Color
    • Width
    • Radius

 

tab-settings1

 

Social Links Block

You can share your social links very easily by using the Social Links block, which can be created by clicking its button in the Common Blocks category.

 

social-links

 

You can use the ready-made icon or upload your own icon, and adjust some more options from the right panel.

  • Preset Icons
  • Icons settings
    • Preset Icon Color
    • Icon size
    • Icon space

 

social-links-settings

 

Recent Posts Block

There are 3 layouts that are available to display your recent posts: the Grid, List and Slider views. You can create any of these views by clicking the Recent Posts button in the Widgets category.

 

recent-posts-block

 

You can see how the blocks will be displayed in the frontend in the image above or in our Advanced Gutenberg Demo.

From the right panel, you can adjust the settings of each layout:

  • Order by

order-by

  • Category
  • Number of items
  • Columns (for Grid view only)
  • Display Featured Image
  • Display Post Author
  • Display Post Date
  • Display Read More Link
  • Display Post Excerpt
  • First Post text as Excerpt: display some of the text in the beginning of a post as an excerpt.

 

recent-posts-settings

 

Woo Products Block

There are 2 layouts available for the Woo Products block: the Normal and Slide views can display WooCommerce products on your WordPress blog. You can insert this block by clicking the Woo Products button in the Widgets category.

 

woo-block

 

You can see how the blocks will be displayed in the frontend in the image above or in our Advanced Gutenberg Demo

On the right panel, you can adjust the settings of each layouts:

  • Products Settings
    • Product Status
    • Category
  • Layout Settings
    • Columns
    • Number of Products
    • Order

 

woo-settings

 

2.2. Configuration

To use the lightbox and caption feature for images you need to enable the Open galleries in lightbox and Image caption options respectively in Advanced Gutenberg's Configuration tab in the settings.

 

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 use the Map Block
  • Enable blocks spacing: Apply minimal vertical block spacing automatically - the default is none, and the values should be given in pixels
  • Blocks icon color: Set color for blocks that are added by Advanced Gutenberg

2.3 Default Blocks Config

In order to adjust the blocks in Advanced Gutenberg, you can go to the menu Advanced Gutenberg > Configuration > Default Blocks Config tab.

default-blocks-config

 

For each block, you can edit its default settings by clicking the adjacent Settings icon.

blocks-edit

 

2.4 Custom styles

The Advanced Gutenberg configuration also allows you to define custom CSS snippets that can be used in your editor and HTML tag options. To use custom styles, navigate to the Custom Styles page from Advanced Gutenberg's left menu.

To create a new style, click on the “Add new class” button at the bottom of the list of styles. You can edit your CSS right in the Custom CSS field.

 

custom-styles-gutenberg

 

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

 

custom-css-style-block