Skip to content

WordPress Plugin: display a list of posts based on (custom) post types as Gutenberg block.

License

Notifications You must be signed in to change notification settings

ArmandPhilippot/post-types-query-block

Repository files navigation

Post Types Query Block

License Version

Post Types Query Block is a WordPress plugin which add a new Gutenberg block. It allows you to query post types and offers different options to customize the display.

Introduction

By default, WordPress Gutenberg offers a Latest Posts block to display the recent posts but it does not include the custom post types or even the pages. So, I decide to create my own block with some settings to make it more reusable.

With Post Types Query Block, you can choose:

  • one post type to display among "Posts", "Pages", "Media" and your custom post types.
  • the number of posts to display.
  • the order ("Title", "Publication date", "Update date", "Author").
  • to filter by author, categories and tags.
  • the information you want to display (dates, author, featured image, excerpt) with or without label and you can even rewrite the labels.
  • the layout (list or grid) and some customization (no bullet lists or the number of grid columns).

Install

Composer install

You can use Composer to install this plugin as a dependency if you use custom installers:

{
"require": {
    "armandphilippot/post-types-query-block": "dev-main"
}
"repositories": [{
    "type": "git",
    "url": "[email protected]:ArmandPhilippot/post-types-query.git"
}]

You can specify the version by adding the corresponding tag: dev-main#v1.0.0.

Manual install

You can download this plugin on Github/Gitlab, then extract it in /wp-content/plugins/ directory.

Usage

  1. Navigate to the "Plugins" dashboard page and click on "Activate".
  2. Choose "Post Types Query Block" inside Gutenberg Editor to add a new block.
  3. Configure the settings in the sidebar and choose the layout with the toolbar buttons.

Screenshots

These screenshots were taken with the "Twenty Twenty-One" theme of WordPress. I just made an adjustment to the meta since I use description list to display them and this theme use a padding-left with dd.

List Preview Grid Preview
Admin List Preview Admin Grid Preview
Public List Preview Public Grid Preview

Translation

Currently, the block is available in English and in French.

If you want to provide another translation for the plugin, any pull request is welcome. Likewise, if some words are misused in English, I accept the corrections. It's not my native language.

You can use wp-cli to generate a new POT file (wp i18n make-pot) then to convert it in JSON (wp i18n make-json). However, it is not working for me. It does not allow me to extract JS strings with make-pot and the make-json command output multiple files... it is not convenient.

So, you can process like me with Poedit and po2json (the last one is already present in package.json).

  1. Copy languages/PTQBlock.pot and rename it to languages/PTQBlock-{your-locale}.po.
  2. Use the tool you want to provide translations inside the .po file.
  3. Convert the .po file to .json with po2json by using the jed format.

Example:

./node_modules/.bin/po2json languages/PTQBlock-fr_FR.po languages/PTQBlock-fr_FR-ptqblock-i18n.json -f jed

License

This project is open source and available under the GPL v2 or later License.