Hot Blocks - A collection of WordPress blocks

A collection of WordPress blocks for use with the WordPress block editor (aka Gutenberg). It contains blocks for various purposes and new blocks are added over time. The blocks that plugins add to WordPress are also available for use in the site editor. Therefore, you can use them for your front page template, pages and posts templates, archives templates, and template parts.

Since block editor (Gutenberg) is included in WordPress as the default editor, the world of WordPress site development has changed. For the first time, with the use of a proper theme, you could visually edit the content of your website. The content editor is over time enhanced to the site editor and now all aspects of your website are editable visually. And let's repeat, all this is possible without additional free or paid plugins. All this is now part of the WordPress core.

WordPress community is divided on the block editor. Some people dislike it and keep using the deprecated editor or paid page builder. However, over time, more and more developers are adopting the block editor. We are between them as we like the way it's progressing and we are supporting it by the development of this plugin and block WordPress themes.

Blocks Available in the Hot Blocks

The blocks listed here are added to the WordPress block editor by the plugin and categorized under the Hot Blocks category.

Accordion Block

Accordion block

 

The Accordion block contains a header block and a placeholder for inner blocks. You can add any blocks (paragraphs, images, lists...) as the inner blocks. The content inside the placeholder can be opened or hidden by clicking on the header of the Accordion block.

This block is useful for FAQ pages and for pages that contain a lot of content as it allows you to hide some parts of the content. You can use multiple instances of the Accordion block on the page.

Block Options

  • Heading Color – The color of the heading text.
  • Tab Open by Default – Select if this accordion block will be opened or closed by when the page is loaded.

View Demo

Contact Block

Contact block

 

The Contact block adds a simple contact to the page. The contact form contains a name field, e-mail field, message text area, and the security question and answer that can be changed for each block instance.

When the website visitor submits the form, the administrator of the website will receive an e-mail with the content that's submitted by the form.

Block Options

  • Question – Security question that must be answered before the form submission.
  • Answer – Answer of the security question.
  • Button Text – Text that will be displayed on the submit button of the form.

View Demo

Map Block

Map block

 

The Map block imports a Google map into the page. The map is imported as an iframe, so you don't need to have Google Maps keys. The location that the map will display can be added to the block parameters. You can enter the exact address or name of the object you want.

Block Options

  • Location – The location that Map block will display.
  • Height – Height of the module. You can use any unit. The map's width is automatically set to 100%.

View Demo

Parallax Block

Parallax block

 

The Parallax block is just a placeholder for the inner blocks. However, it can contain a background image (with or without overlay color) that will be scrolled with a parallax effect.

Block Options

  • Overlay Color – Adds a overlay color over the background image.
  • Background Image – Adds a background image to the block for a parallax scrolling effect.
  • Content Width – Limits the maximum width of the block inside the placeholder.

View Demo

Core Block Customizations

These are the customizations of the core WordPress blocks. Each customization adds new functionalities to the core blocks.

Gallery (Carousel)

Gallery block customization - Carousel

 

This gallery block customization makes an image carousel from a WordPress images gallery. You can enable this customization if you select any gallery block and click the "Hot Carousel" button under the Styles tab. Also, this block will display the image titles and it's possible to style this text via CSS and achieve various effects.

To achieve the carousel effect, this block adds a jQuery library. Also, the carousel is fully responsive and touch-enabled.

View Demo

Latest Posts (Carousel)

Latest Posts block customization - Carousel

 

The Latest Posts core block can display a predefined number of posts from a selected category. However, with this block customization, the posts can be displayed in a carousel. Visitors then can rotate the posts using the navigation arrows or dots.

As the previous block customization, this block adds a jQuery library. The carousel of posts is fully responsive and touch-enabled.

View Demo