Section Styles: Design freedom for entire areas

[mdsojolh444]

Section Styles is another innovation that gives you more flexibility in the design of your website: It allows you to customize entire sections of your pages or posts with one click, without having to edit each individual block.

This is useful, for example, if you want to highlight a section of your page by giving it a different background or font. Previously, you had to apply the corresponding styles to each individual block in that section. With Section Styles, you now just need to select a style variation that affects the entire section.

There are two ways to create section styles:

Firstly, in the theme.json . Add a new object for blockTypes in the styles object of your theme.json file. Here, define the desired style variations for the blocks that you want to use as section styles.
The other way is programmatically in your theme . Use the register_block_style() function to register style variations for specific blocks. Read more in the official post .
Once you have defined section styles, they will be available in the block editor. To do this, select the desired section and apply the appropriate style variation via the "Styles" panel in the sidebar.

Theme.json v3: More flexible configuration
The "theme.json" file has become a central element for configuring block investor database themes. Version 3 brings some new features that increase flexibility and user-friendliness. However, version 3 also includes breaking changes that may affect compatibility with older WordPress versions.

One important change revolves around the way default properties are overridden. With the new defaultFontSizes and defaultSpacingSizes options, you now have more control over default font sizes and spacing in your theme. You can explicitly specify whether to use the default values ​​provided by WordPress or override them with your own settings.

For a detailed description of the changes and more information about the migration, see the official theme.json version 3 post .

Improved CSS Specificity: Easier overriding of core styles
With WordPress 6.6, CSS Specificity in the core is being fundamentally overhauled to make life easier for theme developers. The goal is to make it easier to override core styles while maintaining support for global styles.

To achieve this, WordPress 6.6 introduces a unified CSS specificity of 0-1-0 for Core Block Styles and Theme.json/Global Styles. This means that theme developers can now define their own styles with simpler selectors that override the desired elements without having to use complex CSS rules.

In the future, CSS Layers and Zero Specificity could further improve WordPress’ CSS architecture.

For more details, read this official blog post and the discussion on GitHub .

Grid Layouts: Order and Flexibility with the Grid
The Grid Layout option in the Group Block allows you to arrange content in a grid without relying on additional plugins or complicated code.

It offers you two different modes to customize your grid:

Automatic : WordPress automatically creates a responsive grid that optimally adapts to different screen sizes.
Manual : You determine the number of columns and the arrangement of the blocks within the grid .
Dominic Vogl says the following:

"The ability to create complex layouts directly in the editor saves me a huge amount of time and effort. This feature takes my layouts to a new level, gives me more creative freedom and simplifies a clean, responsive presentation of the content."

Dominic Vogl, web developer, Raidboxes
More design highlights in WordPress 6.6
There are other large and small additions and improvements. Here are some of them in brief:

Pattern management in classic themes : Users of classic themes now also benefit from convenient pattern management directly in the backend.
Mix & Match Style Variations : Combine different color palettes and fonts to create unique designs and give your website a personalized touch.
Site-wide Background Images : Easily define a background image for your entire website to create a consistent look.
Negative Margins : Use negative margin values ​​to overlap elements and create exciting visual effects.
Custom Shadows : Create custom shadows for your elements and give your website more depth and dimension.
Custom Aspect Ratio Presets: Define your own aspect ratios for images and other media to ensure a harmonious layout.