Accelerate Posts Block

Settings Overview

• Block Settings
  • Layout
    • Display Mode : Choose a responsive layout and style for displaying posts in this block.
      • Article : The article display mode morphs as the browser width decreases eventually removing the image and content as it gets smaller. Title, author info, date and content left aligned with the featured image on the right.
      • 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 “Article” display mode aligns the image to the left or right side with overflow content wrapping below it.
      • 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]
    • Text Alignment : Aligns the text in this object. Child objects will inherit this setting. [tutorial]
  • Post Query
    • Post ID List : You may choose to designate specific posts in a specific order rather than letting it populate automatically. Enter the numeric IDs for the posts you wish to include, with a comma between each ID number.
    • Category : Specify a category for the post results you wish to display.
    • Sort Order : Sorting order for the post query. Results will be prioritized using this setting, up to the specified Item Limit.
    • Item Limit : Limit the number of posts 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.
    • post items (div) untargeted node : Objects containing the post title, image and data redered to suit display mode settings.

Tutorial

• Insert an Accelerate Posts block into the page. After a moment you will up to 6 posts 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 “Posts 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 posts in a space that allows 3 per row you will have a 4th post 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.
  • Choose a Text Alignment, this affects the alignment of the image in the “Article” style and the alignment of the text in the other styles.
    • You may override this setting and center align the content in mobile mode by turning on the Center Text in Mobile setting.
  • You may choose to display specific posts rather than letting WordPress populate them.
    • Enter a list of post IDs with a comma between them into the Post ID List field, in the order you wish to display them.
    • You can get the post ID by looking at the editor URL for the post. Find the “post=##” in the URL parameters, the ID number is the value that follow the = equals sign.
  • You may choose a category from the Category selector to limit the block to displaying posts only from that specific category.
  • Choose a Sort Order to prioritize post results by date, name, # of comments or random picks.
  • Set an Item Limit for the number of posts you wish to display in this block.