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 Blocks list will apply to this profile.

To set up your own profile you can use “Profile Attribution” point of “Adv. 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 block icons.

 

block-list

 

blocks-list-2

 

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

 

block-used

 

Advanced Button block

You can create Advanced Button block by clicking the button in Layout Elements category.

 

advanced-button

On the right panel, you can adjust some settings of 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 offset, V offset, blur, spread) and transition speed.

 

advanced-button-hover

 

Advanced List block

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

 

advanced-list

 

After inputting the content, you can adjust the settings on 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 Summary block by clicking the button in Formatting category after set the Heading tag the post. And the summary is aligned: Left, Center or Right button. Next, it will be updated by "Update Summary" button.

 

summary-gutenberg-content

 

On the right panel, there is some options for you to adjust:

  • Load minimized: to show/hide Summary
  • Summary header title: representing text when Load minimized option is on
  • Anchor color: pick color for Summary

 

summary-settings

 

Separator block

You can create Separator block by clicking the button in Layout Elements category. Then, on the right panel you can adjust the separator with the options; such as: color, styles, thick, width.

 

separator-settings

 

Counter (Count Up) block

You can create Count Up with symbol by clicking the button in Common Blocks category.

 

count-up

 

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

  • Columns: 1-3
  • Header Color: color for header
  • Count Up Color: color for counter
  • Description Color: color for description
  • Counter Number Size: set size for number
  • Counter Up Symbol: add character before or after counter
  • Toggle button: to set position of symbol (On is after)

 

count-up

 

Advanced Image block

In order to create an image to post. First, you should click Advanced Image button, then choose an image to insert.

 

advanced-image-button

 

Next, you can change Image title and Subtitle of image. Then you can adjust settings for that image on the right panel.

  • Action on click: Open image in lightbox, open custom URL
  • Image Size: Full width, height, width
  • Title Color: color for title
  • Subtitle Color: color for subtitle
  • Overlay Color: color when overlay the image
  • Text Alignment: Vertical alignment (Top, Center, Bottom), Horizontal alignment (Left, Center, Right)

 

advanced-image-settings

 

Testimonial block

You can create testimonial by clicking Testimonial button in Common Blocks category. Then, you can change avatar, name, job position and description.

 

testimonial-button

 

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

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

 

testimonial-settings

 

Map block

In order to use this block, first, you have to add Google API key at Configuration. Then, you can create testimonial by clicking Map button in Common Blocks category.

 

map-block

 

On the right panel, you can insert location by inputing Lat/Long or by entering an Address then pressing the Fetch Location button

And there are some options for the map below:

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

 

map-settings

 

Advanced Video block

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

 

advanced-video

 

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

  • Open video in light box: Lightbox offers additional display options.
  • Full width: if it's off, you need set 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 Formatting category.

 

advanced-table

 

After that, you can input some text, adjust rows, columns on editor above the table block. Then you can adjust settings on the right panel.

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

 

advanced-table-settings1

 

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

 

single-cells-settings

 

You can Merge cells and Split merged cells with Adv. Table block.

Accordion Block

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

 

accordion-block

 

Then, you can adjust the header, body or border options on 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
    • Border Style: solid, dashed and dotted
    • Border Color
    • Border Width
    • Border Radius

 

accordion-settings

 

Tab Block

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

 

tab-block

 

Then, you can adjust the tab, body or border options on 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
    • Border Style: solid, dashed and dotted
    • Border Color
    • Border width
    • Border radius

 

tab-settings1

 

Social Links Block

You can share your social links easily with by clicking the Social links button in Common Blocks category.

 

social-links

 

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

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

 

social-links-settings

 

Recent Posts Block

There are 3 layouts: Grid View, List View and Slider View for you to display your recent posts. You can create by clicking the Recent Posts button in Widgets category.

 

recent-posts-block

 

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

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

  • 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 part of first text found in post as excerpt.

 

recent-posts-settings

 

Woo Products Block

There are 2 layouts: Normal and Slide to display product in WooCommerce. You can insert this block by clicking the Woo Products button in Widgets category.

 

woo-block

 

You can see how the blocks will be displayed on 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 light box and caption feature for images, you need enable options: Open galleries in lightbox and Image caption in menu Adv. 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
  • Enable blocks spacing: Apply a minimal vertical block spacing automatically. Default is None. Values in pixels
  • Blocks icon color: Set color for blocks that added by Advanced Gutenberg

2.3 Default Blocks Config

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

default-blocks-config

 

At each blocks, you can edit its options by clicking Settings icon.

blocks-edit

 

2.4 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 Adv. Gutenberg > Custom Styles of the left menu.

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