Advanced Gutenberg Documentation


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.



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 In any case, you won’t lose any content because everything is stored in the database.




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


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.




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.






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




Advanced Button block

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



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.




  • Border: radius, style, color and width.




  • Padding: top, right, bottom and left.




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




Advanced List block

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




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




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.




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




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.




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.




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)




Advanced Image block

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




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)




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.




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




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.




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




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.




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 Table block

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




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%




  • 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




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.




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




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




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.




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




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




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.




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




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.




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


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




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.




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




Images Slider Block

If you want to display a number of images as a slide, clicking to Images Slider button in the Formatting category.



Then pressing Add images button to choose your images showed in the slide. After that you can input the text Title and Text description for each images.



You can edit the settings of the slider on the right panel.

Image Settings

  • Action on click
    • None
    • Open image in lightbox
    • Open custom link
  • Full width
  • Auto height
  • Always show overlay

Color Settings

  • Hover Color
  • Title Color
  • Text Color



Text Alignment

  • Vertical Alignment
    • Top
    • Center
    • Bottom
  • Horizontal Alignment
    • Left
    • Center
    • Right



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.




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



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



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.




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.