Block Support

Summary: Learning about different Block Supports.

Block Supports

The supports property in WordPress block development plays a vital role in simplifying how a block interacts with the editor’s core features. By using this property, we can enable or disable various built-in functionalities of Gutenberg blocks without manually coding each feature. This not only reduces development time but also enhances the overall user experience, ensuring consistency and compatibility across the WordPress environment.

The supports property is part of the block’s registration configuration. It allows us to define the capabilities of a block, such as enabling alignment controls, custom class names, spacing options, color customization, and more. The main benefit of using supports is that it gives us access to pre-built functionality without needing to manually implement those features.

supports: {
  align: [ 'left', 'center', 'right' ],
  anchor: true,
  color: {
    text: true,
    background: true,
    gradients: true
  },
  typography: {
    fontSize: true,
    lineHeight: true
  },
  spacing: {
    margin: true,
    padding: true,
    blockGap: true
  }
}

Alignment (align)

The align option in supports allows developers to control how blocks align within the editor. Alignment options are commonly used for adjusting the block’s placement on the page. It provides support for inline alignments (left, center, right), as well as layout-wide alignments (wide, full), which are particularly useful for full-width layouts.

• Options:
• 'left': Aligns the block to the left side of the content area.
• 'center': Aligns the block in the center of the content area.
• 'right': Aligns the block to the right side of the content area.
• 'wide': Stretches the block to be wider than the content area, typically supported by full-width themes.
• 'full': Stretches the block to the full width of the browser window, creating a truly immersive section in the layout.

supports: {
  align: [ 'wide', 'full' ]
}

• Theme Support: To use wide and full alignments, the theme must declare support using add_theme_support( 'align-wide' ); in the theme’s functions.php.
• Responsive Design: Always test how different alignments look on mobile devices. For instance, full-width alignment may look great on desktops but could be problematic on smaller screens if not handled properly in CSS.

Anchor (anchor)

Enabling the anchor support allows users to assign custom anchor links (also called IDs) to blocks. This is useful for creating page navigation or linking directly to specific sections within a page. For example, it can be used in long articles, FAQs, or any page where we need jump links.

• How it works:
• When anchor: true is set in the block’s supports, an input field appears in the block settings where users can define a unique ID for the block. This ID can be linked from elsewhere on the same page, creating smooth scrolling or jump-to-section functionality.

supports: {
  anchor: true
}

• If we create a FAQ section, we can use the anchor support to let users jump directly to specific questions by linking to a block’s anchor (e.g., #faq1, #faq2).

• Ensure that anchor IDs are unique across the page. Duplicate anchor IDs can cause issues in page navigation.
• It’s good practice to add validation for anchor input, ensuring no spaces or special characters are used.

Custom Class Names (customClassName)

The customClassName support allows users to apply custom CSS class names to blocks. This is enabled by default, but we can choose to disable it if we don’t want users to customize the block’s classes (useful for keeping the design consistent or limiting customization).

• How it works:
• When enabled, an input field appears in the block settings where users can input custom class names. These classes are added to the block’s wrapper in the rendered HTML, allowing for additional styling.

supports: {
  customClassName: true  // Enable custom class names
}

• Consistency: While it can be helpful to enable custom class names for flexibility, it may lead to inconsistencies in design if users apply non-standard classes. Disable it for blocks where consistent design is crucial.
• CSS Conflict: Ensure that custom classes do not conflict with the block’s own styles.

Reusable Blocks (reusable)

This support allows blocks to be saved as reusable blocks. A reusable block can be inserted into multiple pages or posts, and any updates to the reusable block will be reflected everywhere it’s used.

• How it works:
• When reusable support is enabled, users will have the option to save the block as a reusable block within the editor interface.

supports: {
  reusable: true
}

• Global Changes: Be cautious with reusable blocks, as editing a reusable block will affect all instances where it is used.
• Performance: Reusable blocks can reduce performance issues when used excessively on large pages or complex layouts, as they are loaded dynamically.

HTML Editing (html)

This feature controls whether users can directly edit the block’s HTML in the Gutenberg code editor. Disabling HTML editing ensures that users can’t break the block’s structure by modifying the underlying HTML.

• Options:
• true: Allows users to switch to the HTML view and edit the block’s markup.
• false: Disables HTML editing for this block to maintain structure and prevent accidental changes to the block’s code.

supports: {
  html: false  // Disable HTML editing for the block
}

• If a block has a very complex structure or relies on specific HTML elements to work correctly, disabling HTML editing can prevent users from accidentally breaking the block.

• Flexibility vs. Safety: Disabling HTML editing gives more control to the block developer but can reduce flexibility for users who want to customize the block’s content at the code level.

Spacing (spacing)

The spacing feature enables padding, margin, and block gap controls for the block. These controls allow users to adjust the space inside and outside the block, making it easier to fine-tune the layout and spacing between elements.

• Options for spacing:
• padding: Allows users to set padding (inside the block) through the block settings.
• margin: Allows users to set margins (outside the block) through the block settings.
• blockGap: Enables control over the space between child blocks inside a container block, such as columns or groups.

supports: {
  spacing: {
    padding: true,
    margin: true,
    blockGap: true
  }
}

• Ensure that the theme supports custom spacing, or implement CSS styles to manage how padding and margin are applied.
• Test blocks with large values of margin or padding to ensure that they don’t break the layout, especially on smaller screens.

Color (color)

The color support enables text color, background color, and gradient color options in the block. This gives users the ability to customize the color scheme of the block’s content or background directly from the editor.

• Options for color:
• text: Enables text color control for the block.
• background: Enables background color control for the block.
• gradients: Enables gradient backgrounds in the block’s settings.

supports: {
  color: {
    text: true,
    background: true,
    gradients: true
  }
}

• disableCustomColors: Disables the ability to choose custom colors and limits users to the theme’s predefined palette.
• disableCustomGradients: Disables custom gradients and forces users to pick from a predefined set of gradients.

• Color Accessibility: Ensure that the chosen text and background color combinations maintain a high level of contrast for readability.
• Consistency: Consider disabling custom colors if our block should adhere to a specific design or theme palette.

Typography (typography)

The typography support provides control over the font size, line height, and other text-related properties like font family or letter spacing. It’s a powerful option for blocks that rely heavily on text content.

• Options for typography:
• fontSize: Enables font size control for the block’s text.
• lineHeight: Allows users to adjust the line height of text.
• letterSpacing: Enables control over letter spacing (if needed).
• fontFamily: Allows users to select different font families (if the theme supports this).

supports: {
  typography: {
    fontSize: true,
    lineHeight: true,
    letterSpacing: true,
    fontFamily: true
  }
}

• Responsiveness: Be mindful of how larger font sizes or line heights affect the block’s appearance on different screen sizes.
• Theme Support: Ensure that the theme we are using allows for the necessary typography controls, especially if enabling font family or letter spacing options.

Multiple (multiple)

The multiple option determines whether a block can be added multiple times to the same post or page. By default, most blocks can be used repeatedly. However, we may want to limit some blocks to a single instance per post (e.g., a table of contents block).

• Options:
• true: The block can be added multiple times (default behavior).
• false: The block can only be added once per post.

supports: {
  multiple: false  // Limit this block to one instance per post
}

• This is particularly useful for blocks like site headers, footers, or table of contents, where having multiple instances doesn’t make sense.