How to Create Custom WordPress Editor Blocks in 2020

Peter Tasker shares his insights on crafting custom WordPress blocks:

He notes the ease of using the WP CLI scaffold command to establish a WordPress theme or plugin with a dedicated "blocks" folder. This folder pre-populates the necessary PHP, CSS, and JavaScript files. However, he points out that the generated JavaScript utilizes the older ES5 syntax instead of the modern ESNext standard. ESNext offers more concise coding and enables the use of JSX.

Alternatively, Ahmad Awais' create-guten-block tool provides a comprehensive starting point, including Webpack and ESNext support, streamlining the setup process. Tasker found this tool user-friendly, comparing its ease of use to Create React App.

Tasker's personal experience leans towards create-guten-block, finding it intuitive, especially given his familiarity with both WordPress and React development. He suggests that developers without React experience might find the process less approachable.

He also highlights the frustration of the "This block appears to have been modified externally…" message in Gutenberg, which occurs whenever the block's markup changes upon reloading. While understanding the reason for the error, he notes its impact on workflow efficiency.

Finally, Tasker contrasts this approach with Advanced Custom Fields' method, which relies primarily on PHP and templating, a seemingly more traditional WordPress approach. This suggests a possible alternative development path where core WordPress handles the basic block creation with PHP, leaving the advanced React features to third-party plugins.

Direct Link →

The above is the detailed content of How to Create Custom WordPress Editor Blocks in 2020. For more information, please follow other related articles on the PHP Chinese website!