Gutenberg


ecko

As well as support for all default Gutenberg blocks, Hydra includes our ‘Ecko Blocks’ plugin, which introduces a number of custom blocks to enhance your content – these blocks are easily accessed via the Gutenberg editor. Further information on blocks and their usage can be found in the provided theme documentation. Below is an example of these custom blocks, and a selection of default WordPress blocks with theme specific styling.

Progress Bar

The Progress Bar block is provided by the ‘Ecko Blocks’ plugin. It can be used to show the current status of a task. Below is an example this block in use with various different configurations.

Example Label
80%
Example Label
55%
Example Label
90%
Example Label
61%
Example Label
79%

This block includes a number of customization options to adjust its appearance, content and current state. Any number of Progress Bar blocks can be added in series or as a single block.

Accordion

The Accordion block is provided by the ‘Ecko Blocks’ plugin. It can be used to show or hide content sections via user click or mobile tap. Below is an example of this block in use.

Example Title

This is an example of the Accordion block. This Accordion has been set to be ‘Closed’ by default and requires user click or mobile tap to become visible.

Example Title

This is an example of the Accordion block. This Accordion has been set to be ‘Closed’ by default and requires user click or mobile tap to become visible.

Example Title (Default Open)

This is an example of the Accordion block. This Accordion has been set to be ‘Open’ by default and requires user click or mobile tap to be hidden.

This block includes customization options for the title and its default state – open or closed. Any number of Accordions blocks can be added in series or as a single block.

Status Message

The Status Message block is provided by the ‘Ecko Blocks’ plugin. It can be used to display notifications or emphasise important content. Below is an example this block in use.

Standard

This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.

Error

This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.

Success

This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.

Custom

This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.

This block includes a number of customization options to adjust its appearance and content. Any number of Status Message blocks can be added in series or as a single block.

Tabs

The Tabs block is provided by the ‘Ecko Blocks’ plugin. It can be used to organize content sections into named tabbed containers. Below is an example this block in use.

First Tab

Second Tab

Third Tab

This is the first tabs content and an example of the Tabs block in use. This content can include multiple paragraphs of formatted text, including links.

This is the second tabs content and an example of the Tabs block in use. This content can include multiple paragraphs of formatted text, including links.

This is the second tabs content and an example of the Tabs block in use. This content can include multiple paragraphs of formatted text, including links.

Here we have added an additional paragraph into the third tab content. A tab has no limit on the content length or number of paragraphs use.

This block includes customization options for the tab title and contents. Any number of Status Message blocks can be added in series or as a single block – multiple containers can also be used throughout the post or page.

Caption

A number of core Gutenberg block include the option for a caption to be added, which can be used to add textual context to the content. Below is an example of a caption added to an Image block.

Example Caption Text

Captions can include formatted text such as bold style and links. The number of captions that can be added is dependant on the block used, for example an Image block can have a single caption, where a Gallery block may have one caption per image added.

Block & Pull Quote

The Quote block is a core Gutenberg block. It can be used to highlight a quote, and can also include a citation. Below is an example of how these quotes are styled within posts and pages.

I don’t believe you have to be better than everybody else. I believe you have to be better than you ever thought you could be.

Ken Venturi

The following text is filler text for example purposes. Suspendisse euismod diam sit amet nisi faucibus fringilla. Integer fermentum arcu nec mi venenatis volutpat. Donec nec tristique justo. Phasellus iaculis eu metus at bibendum. Aliquam nec ipsum viverra, laoreet augue id, vehicula ipsum. Praesent iaculis pellentesque accumsan. Cras ac turpis accumsan, cursus velit et, eleifend erat. Phasellus mollis, risus non bibendum consequat, ante quam tincidunt magna, a scelerisque lacus tellus quis lorem.

I don’t believe you have to be better than everybody else.

Ken Venturi

Suspendisse euismod diam sit amet nisi faucibus fringilla. Integer fermentum arcu nec mi venenatis volutpat. Donec nec tristique justo. Phasellus iaculis eu metus at bibendum. Aliquam nec ipsum viverra, laoreet augue id, vehicula ipsum. Praesent iaculis pellentesque accumsan. Cras ac turpis accumsan, cursus velit et, eleifend erat. Phasellus mollis, risus non bibendum consequat, ante quam tincidunt magna, a scelerisque lacus.

Alignment

Gutenberg adds two additional alignment options, Wide and Full, for supported blocks. Below is an example Image block without any specified alignment, it will be limited in width the same as the post container, and therefore be inline with the paragraph text.

Below is an example of the Wide alignment. When this alignment is used the active block will extend slightly past the post container in width, and therefore be slightly wider than the posts paragraph text. 

Below is an example of the Full alignment. When this alignment is used the active block will extend to fill the main outer container, or if no outer container is present then entire width of the browser window will be used.

Content Embeds

In addition to the included blocks, Hydra fully supports the WordPress third-party embeds blocks, such as Twitter, Youtube, Vimeo, Facebook etc. More information on these embed blocks and their usage can be found within the WordPress Gutenberg documentation.

Subscribe to EckoThemes

Subscribe to our email newsletter to receive useful articles and special offers.

We won't share your email address.