English English
X
You are using an advanced automatic translation tool. Note that although our extensions may be translated into your language (check the product page for that) the support is provided ONLY in english :)

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 Advanced Gutenberg 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 Advanced Gutenberg 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 Advanced Gutenberg 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 Advanced Gutenberg 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 Advanced Gutenberg 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 in the Advanced Gutenberg category, 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
  • Link URL: Open link in new tab (toggle button)
  • 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 Advanced Gutenberg 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.

  • Slider view: toggle button
  • Columns: Columns range in Normal view is 1-3, and in Slider view is 4-10.
  • Avatar: Avatar size, background color, and border settings, which include color, radius and width
  • Text Colors:
    • 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. After that, you should follow this link, click on Enable APIs and Services button, then search and enable Geolocation API, Maps JavaScript API.

Once added, you can create the map by clicking on the Map button in the Advanced Gutenberg 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 styles: silver, retro, night, ... and you can add your custom style also.

 

map-settings

 

Advanced Video block

You can create a video to a post by clicking on the Advanced Video button in the Advanced Gutenberg 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 Advanced Gutenberg 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 Advanced Gutenberg category.

accordion-block

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

  • Accordion Settings:
    • Bottom spacing: Define space to next block. This will override Block spacing option (Frontend view only)
  • Header Settings
    • Header Icon Style
    • Color Settings: Background Color, Text Color and Icon Color

 

accordion-header

 

  • Body Color Settings
    • Background Color
    • Text Color
  • Border Settings
    • Border Style: solid, dashed or dotted
    • Color Settings
    • Border width
    • Border radius
  • Accordions State: Enable this settings to collapse all the accordions.

 

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 Advanced Gutenberg 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 Advanced Gutenberg 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: you can upload your custom icon
  • Preset Icon Color
  • Icons settings
    • 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 Advanced Gutenberg 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 Advanced Gutenberg 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

 

Images Slider Block

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

new-image-slider

 

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.

image-slider

 

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

slide-settings-1

 

Text Alignment

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

slide-settings-2

Contact Form

You can get customer Email contact notification with this block. You can create that form by clicking on Contact Form button in the Advanced Gutenberg category.

contact-formYou can edit the settings of the Contact Form on the right panel.

  • Notice: It will not appeared if you enable reCAPTCHA option in Settings.
  • Email sender: You can change in Settings. An email will be sent to the admin email (by default) whenever a contact form is submitted.
  • Text Label:
    • Name input placeholder
    • Email input placeholder
    • Message input placeholder
    • Submit text
    • Empty field warning text
    • Submit success text

contact-settings1

  • Input Color: Background color and Text color
  • Border Settings: Border Color, Border Style and Border radius
  • Submit Button Settings:
    • Color Settings: Border and Text, Background
    • Button border radius
    • Button position: Left, Center and Right

contact-settings2

 

Newsletter Block

In order to get client Email, you can create the email block by clicking on Newsletter button in the Advanced Gutenberg category.

newsletterYou can edit the settings of the Newsletter on the right panel.

  • Notice: It will not appeared if you enable reCAPTCHA option in Settings.
  • Form Settings:
    • Form style: Default/Alternative
    • Form width (px)
  • Text Label:
    • First Name input placeholder
    • Last Name input placeholder
    • Email input placeholder
    • Submit text
    • Empty field warning text
    • Submit success text

newsletter-settings1

  • Input Color: Background color and Text color
  • Border Settings: Border Color, Border Style and Border radius
  • Submit Button Settings:
    • Color Settings: Border and Text, Background
    • Button border radius

newsletter-settings2

 

Container block

You can create Container block by clicking its button in the Advanced Gutenberg category. Then you can add some more blocks by pressing the (+) button on the bottom right corner of the block.

container-block

 

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 icons on admin, only apply to Advanced Gutenberg blocks
  • Editor width: Define the admin Gutenberg editor width size

 

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 Email & Form

Email settings

You can set the Sender and Receiver Information of Contact Form block:

email-settings

 

Form ReCaptcha

First, you should register reCaptcha on your site here, then click on Admin console button to input the information.

After that, fill the reCAPTCHA Site and reCAPTCHA Secret Key. Remember to enable reCAPTCHA option. You can select the Language and Theme for reCAPTCHA also.

 

form-recaptcha

 

Forms data

From here you can download Contact Form and Newsletter Form data. You can export a .CSV or .JSON file.

form-data

 

2.5 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