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.