Accelerate Categories Block

Settings Overview

• Block Settings
  • Layout
    • Display Mode : Choose a responsive layout and style for displaying posts in this block.
      • Image Grid : The image grid places image blocks in a row with consistent heights, then drops the column count as the browser size decreases. The text overlay has a white semi-transparent background.
      • Thumbnails : Works the same as the Image Grid with a smaller title (adjustable) and hidden byline.
    • Image Grid – Text Display : Choose where and how to display the text for boxes when using the Image Grid display mode.
    • Object Alignment : Alignment used for Post object content or box (per block “Display Mode”).
      • The “Image Grid” and “Thumbnails” display modes use CSS flex, they will fill rows within the available space when possible and then align objects within a row when not full.
    • Margins : All AMP Publisher blocks have Top Margin and Bottom Margin settings. [tutorial]
    • Post Query
    • Category ID List : You may choose to designate specific categories in a specific order rather than letting it populate automatically. Enter the Taxonomy IDs for the categories you wish to include, with a comma between each ID number.
    • Item Limit : Limit the number of categories to be included, the block will display as many as it can up to this limit.

Object Map (DOM)

• root object (div) targeted node from Block Settings panel : You may assign style settings that apply to this entire block.
  • 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.
    • category items (div) untargeted node : Objects containing the category title and image redered to suit display mode settings.

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.