Skip to content

Latest commit

 

History

History
38 lines (22 loc) · 2.67 KB

README.md

File metadata and controls

38 lines (22 loc) · 2.67 KB
Raw

Developer Hours - Alternatives to Custom Blocks

This project is a child theme of Twenty Twenty Four that showcase different ways of extending a core block.

This child theme registers Block Styles and Variations of core/quote block and leverage Block Bindings to customize the dynamic render of the inner paragraph for one of its variations.

The following two Block Variations are registered in this child theme:

  • Quote API Editor - extends core/quote to allow it to fill it with a random quote from an API (optionally filtered by author) in the editor

quote api editor demo

  • API Quote Frontend - extends core/quote by connecting its inner paragraph to a custom binding source that outputs a random quote (optionally filtered by tags) in the frontend

quote api frontend demo

This project has been prepared for the event Developer Hours: Do you really need a custom block? Let’s explore alternatives that was held on July 23rd 2024 (see recording)

Developer Hours cover

Resources mentioned on the Developer Hours session are available at this Google Doc

Development

This child-theme requires that twenty-twenty-four theme also exists in the themes folder.

  1. Set up a local WordPress development environment.
  2. Clone / download this repository into the wp-content/themes folder.
  3. Navigate to the wp-content/themes/tt4-dh-alternatives-custom-blocks folder in the command line.
  4. Run npm install to install the themes's dependencies within a /node_modules/ folder.
  5. Run npm run start to compile and watch source files for changes while developing.
  6. Login to your local WordPress development environment, navigate from Dashboard > Themes and activate "Developer Hours - Alternatives Custom Blocks"

Refer to package.json for additional commands.