Blog - Blocks - Accelerate Heading Block

Accelerate Heading Block

The Accelerate Heading block is an upgrade to WordPress Heading blocks, but it also works with them. It has a number of style and layout settings that can be applied to all other Accelerate and WordPress Heading blocks on the site that share it’s H-Tag value. The Accelerate Heading block takes it further with the ability to override those settings and add more to individual blocks. Want more? The Accelerate Heading block also has optional icons, button, and search box.

Settings Overview

  • Block Settings
    • H-Tag Value : Choose the H-Tag value to use for this heading. This value affects how it is styled and is generally used for page content organization and prioritization.
    • Inherit Site Style : By default this block will inherit the saved “Site H1 Style” if one is available. Turn this setting off to ignore those styles in this block.
    • Block Layout : The Accelerate theme supports the WordPress “Wide” and “Full” block alignments. [tutorial] We call them Layouts and add one called “Full Content Aligned”.
    • Content Alignment : Align the title text and icons within their available space. When the button or search box drop to the next row to fit viewport width they will follow suit with this alignment.
    • Button / Search Box Alignment : Align the button and search box on the left or right side of the title.
    • Styles : The block has a full set of node styling options. [tutorial]
  • Icons : Optional FontAwesome icons on the left and/or right side of the title text, each with it’s won styling options.
    • Left/Right Icon : Choose an icon from the FontAwesome icon chooser withver 1500 icons available.
      • Size : Set the font size in pixels to display the icon. Set to 0 to inherit the font size from the title.
      • Margin : Set the distance in pixels to separate the icon from the title.
      • Color : You may choose a custom color for the icon. Clear the color choice to inherit color from the title Font Color.
  • Button : Target a Link or PopUp ID from the button in the CTA Box. [tutorial]
  • Search Box : You may include a search box with options for searching by category, post type, and/or custom search parameters.
    • Include Search Box : Turn this switch on to include a Search Box in the title. Without parameters it will perform a sitewide search.
    • Placeholder Text (label) : You may edit the placeholder text directly in the editor panel. It will use “Search” by default if no placeholder is entered.
    • Search Parameters : You may enter custom URL formatted search parameters to be used in the search URL. (IE: “post_type=page” or “tag=tagname”)
    • Category : Specify a category narrow the search. The base URL will be changed to target the selected category.
    • Post Type : Specify a post type to narrow the search. The post type will be added to the URL parameters.
  • Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
    • root object : Block Settings panel
      • title object : text styles inherited from root
      • icons : Icons panel
      • button : Button panel

Object Map (DOM)

  • root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block, those styles can be applied to all heading blocks that share it’s H-Tag value.
    • internal wrapper (div) untargeted node : Used to support advanced layout options. Most of our blocks have one of these wrappers. It has no styling of it’s own, it’s children are considered the block’s children.
      • title object (div) untargeted node : Object wrapper for title and icons, styles are inherited from root object.
        • left icon (span) targeted node from Icons panel : You may choose an icon to display on the left side of the heading title text. You may also modify it’s color, size and spacing.
        • title text (text) not a node : Heading text.
        • right icon (span) targeted node from Icons panel : You may choose an icon to display on the right side of the heading title text. You may also modify it’s color, size and spacing.
      • button (*depends) targeted node from Button panel : The button can use the “button” class to inherit button styles from WordPress and stylesheets. It can also be custom styled or act as a plain link without button styling.
      • search box (div) targeted node from Search Box panel : This object has no styling options, it is rendered using theme search box styles.

Tutorial

  • Insert an Accelerate Categories block into the page. After a moment you will up to 6 categories load using the default style as set in the Customizer.
  • Open the Block Settings panel in the block inspector (sidebar).
    • Choose a Display Mode or Inherit the display mode assigned to the theme’s “Categories Display Mode” customizer setting for the current page.
      • If you choose “Image Grid” display mode, you may the choose one of four looks using the Image Grid – Text Display setting. This can also be inherited from the theme’s customizer settings.
    • Choose a Content Alignment, this only affects object that fall into rows that are not filling the available space in the browser or device. For example: if you have 4 categories in a space that allows 3 per row you will have a 4th category on the second row, which will be aligned to the left, right or center depending on this setting.
    • All AMP Publisher blocks have Top Margin and Bottom Margin settings allowing you to create space without having to insert a spacing block.
    • You may choose to display specific categories rather than letting WordPress populate them.
      • Enter a list of category IDs (term IDs) with a comma between them into the Category ID List field, in the order you wish to display them.
      • WP Doesn’t make it easy to get the term ID, you must look at the editor URL for the category and find the “tag_ID=##” in the URL parameters. The ID number is the value that follow the = equals sign. Yes, they are interchangeably referred to as “category ID”, “term ID” and “tag ID” by WP… even though they are all the same thing.
    • Set an Item Limit for the number of categories you wish to display in this block.

The Accelerate Heading block is like the rest of our blocks, you may style it using a variety of options including layout, color, border, shadow and more. These styles can be saved as the “Site Style” for the block’s H-Tag value. This allows you to style every heading from one place, and update as needed. Each Accelerate Heading block can override these styles individually with their own local settings, or opt-out and ignore the Site Style entirely.

For example, if you were to change the Border Style of the H1 block, then click the button in the toolbar to save… all H1 blocks that are inheriting the Site Style will look the same. You can choose to keep them all uniform or make a different look for each.

You can find more sitewide options for rending headings in the Basics sub-panel of the Accelerate Theme Customizer panel. There you can choose the default text alignment, font weight and font-case for all headings. You can also choose default font size, top and bottom margin for each H-Tag value.

The following are all examples of both Accelerate Heading blocks and WordPress Heading blocks. The WordPress blocks are inheriting styles from the Accelerate blocks, this option can be turned off in the theme customizer. Some of the Accelerate blocks are inheriting the Site Styles for their H-Tags and some are not.

Accelerate Heading using Site H1 Style

Accelerate Heading using Site H2 Style

Accelerate Heading using Site Style with text color changes

Accelerate Heading not using Site Styles, with many custom options

Accelerate Heading using Site H3 Style

Accelerate Heading using Site H4 Style

Accelerate Heading using Site H5 Style
Accelerate Heading using Site H6 Style

WordPress H1 Heading Block

WordPress H2 Heading Block

WordPress H3 Heading Block

WordPress H4 Heading Block

WordPress H5 Heading Block
WordPress H6 Heading Block