The Blocks Styles

Styles

The Styles tab is a dedicated panel where you define the CSS properties for the currently selected Block or Global Style.

Including responsive controls, selector choices and the most commonly used CSS properties provides unparalleled design control.

The Styles panel can be viewed under the Block settings tab in the editors right sidebar and within the dedicated Global Styles panel in GenerateBlocks Pro.

Every Style panel is identical regardless of the block or global style that is selected.

To help learn the advanced styling settings the panel is broken into 4 parts:

1. Selector
2. Responsive Design Controls
3. Style Search & Filter
4. Style Inspector

Selector

Each GenerateBlock is automatically assigned a unique CSS class called a selector . For example:

gb-text-2c526fef

This class, known as the block’s Main Selector, is used in CSS rules to apply styles directly to the block.

The Main Selector can be altered using the More options, some of the options available are:

• :hover – applies the styles to the block when it is being hovered
• :hover & :focus – applies the styles to the block when it is being hovered or focused
• links – applies the style the links within the block
• hovered links – applies the styles links within the block when they are hovered
• SVG Icon – applies the styles to the SVG icon contained within the block

Pro Selectors and Global Styles

GenerateBlocks Pro users have access to advanced selector controls allowing them to build any CSS selector for a selected block or a chosen Global Style.

Responsive design controls

The Responsive Design controls allow you to set and change Styles based on a specific screen sizes. The default options available are:

• All Devices

• Tablet & Mobile
  defaults to: @media(max-width: 768px)

• Mobile
  defaults to: @media(max-width: 767px)

• Open All AT-Rule Settings
  to see the additional sizes below

• Desktop only
  @media (min-width:1025px)

• Tablet only
  @media (max-width:1024px) and (min-width:768px)

Advanced controls in GenerateBlocks Pro

In GenerateBlocks Pro the Open All AT-Rule settings allows you to register your own custom @media and @container queries.

Styles search and filter

The Style Search and Filter greatly simplify finding specific style properties. With them you can:

• Find specific properties
  Simply type in a style property name or a comma delimited list eg. margin, padding, border to reduce the list to just matching styles.
• Hide Empty Controls
  Quickly see only the Style properties that have a value.
• Show inherited values
  Show any property this is currently inheriting a style.

Style inspector

The Style Inspector is the main part of the styles panel and provides controls for over 80 commonly used CSS properties.

Style Groups

To simplify navigation through the extensive range of styles, the Style Inspector organizes the controls into 11 collapsible panels:

Style Inspector Controls

The Style Inspector Controls are for setting CSS Property values for a block or Global Style.

Each control is a direct representation of that CSS Style Property and accept values that meet the properties specification. To assist with setting the correct property value, the UI provides various control types including unit controls, option select boxes, color pickers and more advanced repeater fields.

Unit Control

The Unit Control is used for properties where the computed value is a number or percentage eg. Padding, Margin, Width, Height, Font size etc.

Most unit controls have a preset unit type of pixels ( px ). Users can:

• choose a commonly used unit type using the drop down menu inside the input field
  the ? icon will provide more information on the available types.
• enter a property value including any support unit type e.g rem, px, % etc.

Group values

Padding, Margin, Borders, Border Radius and Inset all support 4 values relating to the sides ( or corners ) of the block. In these instances the controls provide options to link input fields.

Link all sides

Link 1 input value to ALL 4 sides

Link Axis

Link 1 input value for top & bottom and 1 value for left & right

Max width

Set Global Max Width

The Sizing > Max Width input control incorporates an additional input filed button: the Global Max Width. This toggle button inserts the global max width CSS Variable var(--gb-container-width). The variables value is set in GenerateBlocks >Settings, which can be manually set or in GeneratePress Theme it auto syncs with the Customiser Container Width.

Color Picker

The Color provides options for color, background color and gradient values. It supports HEX and RGBA color values as well as CSS Variables.

Color Transparency can only be used where a RGB or HEX color value is present.

Select Box

Provides a list of pre-defined options to choose from. Used for properties that have a very strict value list such as display.

More Options

The More Options may provide more information relating to the field or allow you to Enter Custom Value.

The default value

the default option is available in certain select box options, such as the Layout > Display property,

To clarify, default is not a CSS property value. Selecting this option tells GenerateBlocks not to assign a value, allowing the block to follow standard CSS inheritance rules or the default behavior of its HTML tag.

Advanced Repeater Fields

Certain properties like box-shadow and background may require a multi value property and may be stacked ie. more than property value, For this we use an advanced repeater field option.

Custom properties (–*): CSS variables and CSS Math Functions

In addition to all the supported unit types and static property values , the GenerateBlocks Styles Engine supports:

Custom properties (–*): CSS variables

eg. var(--gb-container-width)

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

CSS Math Functions

including: calc() , max(), min(), clamp()

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions

Basic Math Functions such as calc() or clamp()

More information on using these advance values will be covered in future topics and tutorials.