GenerateBlocks 1.4.0

by

GenerateBlocks 1.4.0 is a big release with some new features and a lot of behind-the-scenes changes that make the plugin more stable and extendable as we move forward.

Flex Options

We’ve added more powerful flexbox options to our grid item Containers, including flex-grow, flex-shrink, and flex-basis. This is an incredibly powerful addition that gives you the ultimate freedom when building your layouts. You are no longer limited to static percentage-based widths – your grid items can grow or shrink as needed!

The magic of flex-grow.

When all three options are put together, you can do almost anything and keep things responsive. The below is an example of a complicated post card layout in GeneratePress Premium. The top is using percentage-based widths, and the bottom is using the flex options.

Using all of the flex options.

Container Selectors

Better grid item selectors

Empty Container blocks are now easier to select and add blocks to. We’ve also added some subtle borders to show the border of the Containers that will disappear once you add your own styling or content.

Auto Widths

Grid items can now have “auto” widths on tablet and mobile so they can overwrite a defined width on the device above them. This is especially useful if you’re using flex options on these devices while using the regular width on desktop.

Color Picker Improvements

Our color picker component received some big upgrades in this version. You can now use CSS variables and RGBA values inside the color picker component. In order to maintain backward compatibility, blocks using the old opacity slider will continue to do so until it’s manually set to 1 and the RGBA value is set.

The acceptance of CSS variables is a welcome change, especially when coupled with our new Global Colors feature in GeneratePress 3.1.0.

Default Removals

Block defaults allow for a value to exist without actually being saved to your settings. This can be a good thing, but can also be problematic. For instance, it’s not possible to simply remove the default 40px of Container padding without setting the values to 0. This means we have to write those 0 values in our CSS unnecessarily. The same goes for things like grid gap and gradient values.

In this version, these defaults have been removed completely. Existing blocks will continue to use them on the frontend. Once those existing blocks are loaded in the editor, those old defaults will automatically be saved as static values in your settings.

This means we can now clear those fields and not print unnecessary CSS on the frontend.

Shorthand CSS Improvements

Currently, we convert your padding and margin values to their shorthand properties regardless of the inputs you’ve added a value to. If you set the top and bottom, left and right will default to 0.

This can be problematic if you want your element to inherit those other values (from Global Styles for example).

Now, we will only convert your values to their shorthand properties if all four of the values are set.

For example, we’ve created a Container block and set the top and bottom padding values to 20px, resulting to the following CSS:

.my-container {
    padding: 20px 0 20px 0;
}

Now, this scenario will result in the following CSS:

.my-container {
    padding-top: 20px;
    padding-bottom: 20px;
}

Full Changelog

  • New: Add flex (flex-grow, flex-shrink, flex-basis) options to grid item containers
  • New: Add “auto” width option to grid item containers on tablet and mobile
  • New: Allow CSS variables in color picker component
  • New: Use built-in color transparency in color picker component
  • Tweak: Improve design of empty Container blocks
  • Tweak: Remove Container padding defaults
  • Tweak: Remove grid gap default
  • Tweak: Remove gradient defaults
  • Tweak: Remove grid item width defaults
  • Tweak: Make Button Container stack & fill options device-specific
  • Tweak: Stop auto-adding z-index to Container when using pseudo gradients
  • Tweak: Only output shorthand CSS values if all fields are set
  • Tweak: Add missing tablet “order” property from editor CSS
  • Tweak: Improve unique ID generation
  • Tweak: Remove GeneratePress full width option from Container block
  • Tweak: Replace advanced typography attribute with local storage
  • Tweak: Allow for empty Container padding values
  • Tweak: Check for FS_CHMOD_FILE constant in external css file
  • Tweak: Force inline CSS on single posts
  • Tweak: Remove “Select Grid” button from grid item Containers
  • Tweak: Allow for no value in grid item width field
  • Tweak: Allow zero values for minHeight on devices
  • Tweak: Add new block on Enter key in Headline block
  • Tweak: Remove relative protocol from Google Fonts requests
  • Fix: Responsive border-radius when using pseudo backgrounds
  • Fix: Buttons alignment in the editor
  • Fix: Container tag name accepting any value
  • Fix: Missing align wide/full options when using block themes

Leave a Comment