Woodmart Gutenberg Blocks
Below is a description of the functionality of the main blocks on which the layout of the entire page content is based. Also, there are additional options and features that are important to know before using the WoodMart theme blocks.
A main difference from other popular page builders, which should be considered, is that any Gutenberg block can be placed directly into the root of the editor without the need for a wrapper. This allows for creating the most efficient HTML structure of the page without unnecessary wrappers. For example, to insert a simple title on the page, you don’t need to insert it into a row with a single column. If you need to build a more complex structure, align content in a certain way, or combine elements into a single wrapper, you can use the following blocks: Rows, Containers, and Full width sections.
Rows and Columns
The Row block allows you to create a simple multi-column layout on the page. This block contains sub-blocks of columns (up to a maximum of 12) and in terms of functionality, it is analogous to similar elements from other popular page builders.
By default, after adding the block, you can choose one of the predefined layouts that will affect the number of columns in the row and their overall width ratio. After selecting one of the layouts, you can also further customize it after starting to use it by switching the layout and the number of columns using the corresponding options.
In addition to the predefined layouts, the width of the columns can be adjusted by specifying their width in percentages or by manually changing the width of one of the columns by dragging the mouse cursor along the edge of one of the columns.
Also, columns have all the necessary options for positioning content within the column vertically, horizontally, and adjusting the spacing between internal blocks.
The responsive positioning of columns within a row follows the following rules: by default, on desktop (viewport 1025 pixels and above), all columns are placed in one row regardless of their quantity. Starting from a viewport of 1024 pixels and below, columns can be moved to a new row by setting the total width of all columns in percentages greater than the width of the row. For example, if there were 6 columns in 1 row on a desktop, they can be configured to 3 columns in 2 rows on a tablet and 2 columns in 3 rows on mobile.
Container
The Container is a versatile block for positioning content inside using CSS Flexbox layout rules. This element helps create more complex layouts and more efficient page structures. It can be used both in the root of the editor and placed in other blocks, allowing a wide range of tasks to be solved, such as arranging two buttons in a row, creating analogs of rows and columns (where the containers themselves act as columns placed one after another), adding a common background for a group of blocks, building flexible blocks whose width depends on their content and selected flex-grow, flex-shrink, and flex-basis rules and much more.
The Container block has all the necessary options to precisely position the inner content using the options provided by CSS Flexbox, namely: Direction, Justify content, Align items, Wrap, Column & Row gaps.
Overall, the container allows for building a more efficient page HTML structure by adding wrappers exactly where needed, however, it requires a more advanced knowledge of CSS Flexbox. Therefore, users are provided with an alternative in the form of row and column blocks. It’s also worth noting that containers and rows can be nested in each other in any combination, allowing tasks of various complexity to be accomplished.
For a more detailed understanding of Flexbox content positioning, it is recommended to read the following article on the basic concepts of CSS Flexbox.
Full width section
By default, all page content has width restrictions set in theme settings. To stretch the content beyond the main wrapper and set it to the full width of the screen, the Full width section block is used. After adding the block to the page, you’ll have a choice between blocks that will wrap the content of the section. This can be a Row, Container, or Blank.
Rows or Containers will help limit the content width according to the global site wrapper. The width of the Row or Container inside the Full width content section can be further adjusted using the Width option found in the Advanced tab.
Using the last option, Blank, you can directly add content blocks to the section, and they won’t be limited in width by any wrapper. It’s worth noting that the Full width content block is most suitable for use only in the root of the editor and in the absence of any sidebars on the page.
Advanced settings tab
Each WoodMart theme block contains an Advanced tab in its settings, which has a wide range of options allowing customization of margins, padding, width, layout, animation, and block visibility depending on the device viewing the site.
Dimensions: includes options for Margins, Padding, and Width. Certain layout blocks whose purpose is to contain other blocks (Row, Container, Section) may have additional options for minimum and maximum height.
Layout: includes options for Align self, Flex size, and Order, allowing customization of the size and position of the block within the Flexbox environment. It’s important to note that these options will only work if the parent block uses Flexbox, such as Column, Container, or Full width section.
Animations: includes a selection of animations that occur when the corresponding block enters the viewport, either upon page load (if the block is located at the top) or when scrolling to the block.
Position: allows you to change the z-index of the block and set such values for the position parameter as relative, absolute, fixed or sticky. By combining these parameters, you can absolutely position elements within other blocks, as well as create sticky sidebars using the value position: sticky.
Transform: includes a wide range of standard CSS transform properties, allowing the creation of various effects when interacting with blocks. For example, when hovering over an image, it can scale up; when hovering over a button, it can move up a few pixels, and so on.
Parallax on scroll: allows for smooth element movement when scrolling the page to create a parallax effect. For ease of content editing, this option works only on the frontend.
Responsive: allows selectively showing or hiding the block on desktop, tablet, or mobile devices in any combination.
Misc: includes all other options not falling under the categories listed above, such as visibility, opacity, overflow, and HTML tag selection. The HTML Tag option depends on the context of the block it is used in. For example, if you choose a Container block, options like div, section, header, main, footer are available, and if you choose a Title block, options like h1, h2, h3, h4, h5, h6 are available, and so on.
Overall, by combining options available in the Advanced tab, it’s possible to create unique blocks that would otherwise be inaccessible. For example, if you limit the height of a Container block using the max-height option and set the overflow parameter to scroll or auto, you can create a content block that will have scrolling when content exceeds the set height.
Content positioning
All WoodMart theme blocks for layout construction (such as Column, Container, or Full Width Section) utilize CSS Flexbox for content positioning within them and have the value display property set to flex. Column and Full Width Section have flex-direction: column set by default, while Container can have any value for flex-direction depending on the setting of the corresponding option. All these features can be used for more precise content positioning, including options like Width, Align self, Flex grow, and Flex shrink, which are located in the Advanced tab.
For example, the Align self option allows positioning a Button block inside a Column without any additional wrappers, thus simplifying the HTML structure of the page, as wrappers will only be used where they are truly needed.
It’s important to note that all the options mentioned above will only work if their parent block uses Flexbox. If the content block is not nested within a container, section, or column, but is placed directly in the root of the editor, none of its flex options will work because, by default, the Gutenberg editor root doesn’t use Flexbox.
Indents between blocks
All blocks that can contain other blocks are based on CSS Flexbox. Therefore, to set spacing between each content element of these blocks, the gap property is used, which is set by a special option called “Blocks gap”.
By default, the standard value of the gap property is set to 20px. If the spacing between all blocks needs to be different, the gap property can be set to a value of 0, and the spacing of each block can be set using the margin option values. It is important to note that the spacing between blocks located at the root of the editor should be set only using margins because by default, the root of the editor in WordPress does not use Flexbox.
Nesting and reuse of common blocks
Blocks in our theme have a feature whereby the same commonly used blocks can be used both independently and within other blocks. For example, the Title block, which can be placed anywhere independently, is also used within Banner blocks, Info boxes, or Testimonials.
This approach significantly reduces the number of styles needed to format blocks because they only need to be styled once. It also adds a more organic and cohesive content creation process because the same block has consistent settings wherever it is used.
Parent block hover
Most of the options for blocks that set color, background, border, box-shadow, transform, and opacity have several states under which they will be applied: Normal, Hover, and Parent hover. While Normal and Hover are commonly used states that do not require explanation, Parent hover needs to be described in more detail.
Parent hover allows setting the state of the selected block when hovering over the parent block, which will be specified using the parent option “Parent for hover” (located in the Advanced tab → Misc section) only in those blocks that can contain other blocks, such as Row, Column, Container, and Full-width section. It is also important to know that some elements, such as Banner or Info box, automatically become parent blocks for their child’s content.
This method will allow for numerous interesting effects that will occur simultaneously with one or several child blocks when hovering over the parent block. For example, when hovering over a container, its background will change from light to dark, and the child blocks of the title, text, and button will change their color from dark to light. Or when hovering over an Info box block, the icon inside it will rotate clockwise around its axis.
Changes in slider creation
Previously, using WPBakery or Elementor, creating a slider required switching between different settings pages and editing a special “Slide” post type. Now, all slider and slide editing occurs directly on the page, making the slider creation process more intuitive and visual.
By default, the slider is created using a special block called “Slider,” which contains child blocks “Slide Item” between which you can switch and add the same content as anywhere else. The slider has numerous settings for appearance, transition effects, and navigation settings, allowing you to create attractive slider designs that will also have an optimal structure for site speed performance.