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:

  • Styles: there are 4 predefined styles: Default, Outlined, Squared and Squared Outline

    • Default Style: Select your default style

  • Button link:

    • Link URL

    • Open in new tab: On/Off.

 

adv-button-settings

 

  • Text/Color:

    • Text size

    • Background color

    • Text color

 

text-color-button-settings

 

  • Border:

    • Border style: solid, dotted, ridge,...

    • Border Color

    • Border width

 

adv-button-border

 

  • Padding: top, right, bottom and left.

 

advanced-button-padding

 

  • Hover:

    • Color Settings: Background color, Text color and Shadow color. 

    • Shadow (H (horizontal) offset, V (vertical) offset, blur, spread), Opacity 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

    • Icon (list, color and 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

 

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:

  • Color Settings: Header's color, Count Up's color and Description's color

  • Columns: 1-3

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

 

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)

  • Open link in new tab

  • Image Size: whether the image should be displayed with full width, or with a custom height and width

  • Color Settings: Title's color, Subtitle's color, 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: On/Off

  • 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

  • Color Settings: Overlay color and Play button color

  • Play Button: Icon style, Play button size

 

advanced-video-settings

 

Advanced Table Block

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

 

advanced-table-button

 

You can edit the table after setting the number of column and row.

 

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.

  • Styles

    • Default

    • Stripes

 

style-table

 

  • Table Settings

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

    • Fixed width table cells

    • Table header, footer

    • Border collapsed

 

advanced-table-settings1

 

  • Cell Settings

    • Color 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 (using Shift button) and split merged cells with the Advanced Table block.

Advanced Accordion Block

You can create an Advanced Accordion when you need to display more content in a smaller area by clicking the Advanced Accordion button in the Advanced Gutenberg category. After that, there will be 2 group accordions elements be displaying by default.

 

adv-accordion-block

 

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

  • Accordion Settings:

    • Bottom spacing: Define space between each accordion (Frontend view only)

    • Initial Collapsed: Make all accordions collapsed by default.

  • Header Settings

    • Header Icon Style

    • Color Settings: Background Color, Text Color and Icon Color

 

adv-accordion-header

 

  • Body Color Settings

    • Background Color

    • Text Color

  • Border Settings

    • Border Style: solid, dashed or dotted

    • Color Settings

    • Border width, radius

 

adv-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 Colors

    • Background Color

    • Text Color

    • Active Tab Background Color, Text Color

 

tab-settings

 

  • Body Colors

    • Background Color

    • Text Color

  • Border Settings

    • Style: solid, dashed or dotted

    • Color

    • Border 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, 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

  • Read more text

  • Display Post Excerpt

  • First Post text as Excerpt: display some part of first text found in post as 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 and 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 Block

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-form

 

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

 

newsletter

 

You 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:

    • 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

 

Columns Manager Block

If you want to create a block containing other blocks inside, you should choose Columns Manager in Advanced Gutenberg category. It will appear the style for the block when creating a new one.

 

add-column-manager-block

 

Then you can add any types of block you want in each columns. Here is a column manager block includes 2 columns: the left one is Advanced Image and the right one are Paragraph, Advanced List.

 

column-manager-block

 

And on the right panel, you can adjust the setttings of Column Manager block.

  • Responsive Settings

    • Style for each device types: Desktop, Tablet, Mobile

    • Space between columns

    • Padding: Top, Right, Left and Bottom

    • Margin: Top, Right, Left and Bottom

 

column-settings-1

 

 

  • Row Settings

    • Columns Wrapped: If your columns is overflown, it will be separated to a new line (eg: Use this with Columns Spacing).

    • Wrapper Tag: Div, Header, Main, ...

    • Content Max Width (px vw, %)

    • Content Max Height (px, vw, vh)

 

column-settings-2

 

Login/Register Form Block

You can create a login form or register form for your website by clicking Login/Register Form button in the Advanced Gutenberg section.

 

login-form-block

 

And you can switch view from Login to Register on the navigation bar of this block or on the right panel.

 

login-register-form

 

And then you can go to the right panel to adjust more details about the form.

  • Initial Form: Login or Register

  • Redirect After Login: Home, Dashboard or Custom

  • Form Width (px)

  • Show Logo

  • Logo Width (px)

  • Show input field icon

  • Show register/header link

  • Header Color

  • Show lost password link

 

form-state-setttings

 

  • Input placeholder

    • Login input placeholder

    • Username input placeholder

    • Email input placeholder

  • Text/Input Color

    • Input background color

    • Input color

    • Text color

  • Border Settings

    • Border color

    • Border style

    • Border width

 

input-placeholder-settings

 

  • Submit Button Settings

    • Border and Text

    • Background

    • Button border radius

    • Button position

  • Submit Button Hover

    • Hover Colors: Background, Text and Shadow color

    • Shadow: Opacity, Transition speed and Shadow (H (horizontal) offset, V (vertical) offset, blur, spread)

  • Notice: We strongly recommend to enable Google reCaptcha to avoid spam bot. You can enable it in Form Recaptcha in Adv. Gutenberg > Email & Form.

 

submit-button-settings

 

Search Bar Block

You can create a search textbox on frontend by clicking the Search Bar button in the Advanced Gutenberg category.

 

search-bar-block

 

You can adjust the Search Bar settings on the right panel.

  • Styles: there are 2 predefined styles: Default and Classic

  • Search Bar State

    • Full width: On/Off

    • Width

  • Search Icon Settings

    • Search icon on the right: On/Off

    • Search icon

 

search-bar-settings

 

  • Search Input Settings

    • Search placeholder

    • Input Color: Background and Text color

 

search-input-settings

 

  • Search Button Settings

    • Show submit button: On/Off

    • Search button on the left: On/Off

    • Background and Text color

    • Border radius

  • Hover Colors: Background, Text and Shadow color

  • Hover Shadow: Opacity, Transition speed and Shadow (H (horizontal) offset, V (vertical) offset, blur, spread)

 

search-button-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.

 

adv-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

  • Remove Autop: Remove the WordPress function autop, used to prevent unwanted paragraph to be added in some blocks

  • Google API Key: this API key is required to use the Map Block

Blocks Settings

  • 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

  • Default thumbnail: Set the default post thumbnail to use in Recent Posts blocks

  • Enable columns visual guide: Enable border to materialize Adv. Gutenberg Column block

You can also find Adv. Gutenberg Settings at the top right corner of your Editor, next to the Settings icon.

 

editor-adv-gutenberg-settings

 

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