Using the Blog Posts App Block in MemberPress App

The Blog Posts App Block displays selected WordPress blog content on custom app pages using a swipeable carousel. This block promotes articles and provides direct blog access within the app. This document explains how to add the Blog Posts block, customize its design, filter content, and preview the layout.

Understanding the Blog Posts Block

The Blog Posts block creates scrollable carousels of blog content on App Pages. The block supports filtering by categories, tags, authors, or dates. Specific posts can be manually selected for display. The carousel format encourages content discovery through horizontal swiping.

Adding the Blog Posts Block

You can edit the App Pages using the block-based (Gutenberg) App Pages Editor:

1. Navigate to Dashboard > MP App > App Pages.
2. Locate the app page where you want to add the Blog Posts block.
3. Hover over the app page name to show additional options, and click Edit.

Within the App Pages Editor, the Blog Posts block is added through the block inserter:

1. Click the + icon in the App Page editor to insert a new block.

2. Scroll to the MemberPress App Blocks section.
3. Select the Blog Posts block from the available blocks.

4. Drag the block to the desired position on the page.

Customizing Blog Posts

Once added, you should customize the Blog Posts. You can adjust the colors and set which posts will be displayed and in which order. You can configure the block using the Settings in the right sidebar:

1. While within the App Page editor, select the Blog Posts block you wish to configure.

2. Locate the Settings panel on the right sidebar.

Block Title and Colors

Start by customizing the block Title and colors:

1. Find the Title field and the text you wish to display at the top of this post's blog.

2. Next, under the Color panel, you can set the Heading Text Color and Background Color options.
3. Select a color using the color picker or choose transparent.

4. Click Update to save changes.

Select Posts Using Filter Posts

Under the Select posts panel, you can choose to use the Filter posts option. Post filtering displays content based on specific conditions.

The Filter posts option comes with multiple customization options:

1. Select the Blog Posts block in the editor.
2. Locate the block Settings panel.
3. Select Filter Posts to configure filtering options.
4. Order By to sort by Newest or Alphabetical.

5. Order to arrange Ascending or Descending.

6. Sticky Posts to Include, Exclude, or show Only Sticky posts.

7. Categories/Tags to filter by comma-separated category or tag slugs.

Note: Category and tag slugs must match existing taxonomy terms exactly.

8. Authors to filter by comma-separated author usernames.

9. Date to filter posts by date range.

10. Items to Show to set the number of visible carousel items.

11. Click Update to save the page.

Select Posts By Displaying Specific Posts

The specific post selection displays manually selected blog entries.

1. Select the Blog Posts block in the editor.
2. Locate the Select posts option in the Settings panel.
3. Select Specific posts.
4. Click the Specific posts panel to open the post selector.

5. From the available list, choose the blog posts that you wish to display.

6. Click Confirm or Apply to finalize selection.
7. Save changes by clicking the Update button.

Specific post selection overrides any filter criteria when enabled.

Saving and Previewing

The block configuration must be saved, and the app must be restarted to view the changes.

1. Click Update in the App Page editor to save changes.
2. Force-close the MemberPress App completely on the mobile device.
3. Reopen the app to reload the page configuration.
4. Navigate to the page containing the Blog Posts block.
5. Review the carousel display and post arrangement.
6. Swipe horizontally to browse carousel items.
7. Tap See All to open the full blog archive if available.

The carousel updates automatically when new blog posts are published if filtering is configured.