Behind the Scenes UX: Creating Editor-Friendly Experiences

Evolving Web hosted a free live webinar that focused on improving the content editing experience in the WordPress block editor. This repo holds the code examples from that webinar. Visit evolvingweb.com to see this, and other, past webinars.

Code samples from the webinar

• /demo-theme: A child theme of twentytwentyfive, created using the create-block-theme plugin. This theme demonstrates the following:

  • Using theme.json to:
    • Reduce the colour pallet,
    • Add custom fonts,
    • Remove specific settings from various blocks (eg: text and background colours, spacing, custom font sizes and line heights).
  • Registering a block style on the button block,
  • Adding a custom section style.

• /demo-plugin: A basic demo plugin that modifies the editor functionality in a variety of ways, including:

  • Removing unnecessary core/embed block variations, except for those specified in the code,
  • Removing the block directory,
  • Restricting permissions to specific features based on the user's role.

  This plugin uses @wordpress/scripts to manage it's build. See it's readme.

• /demo-custom-blocks: This plugin demonstrates two methods to create custom blocks: using native React blocks or using ACF blocks, which highlights the differences in content editor experiences in the two.

  • The React block provide a greater ability to customize the editor experience.
  • React blocks can be built to utilize the same familiar controls as the rest of the block editor.
  • However the ACF block is simpler for developers to build as they don't require React knowledge.

  This plugin uses @wordpress/scripts to manage it's build. See it's readme.

Note: This code is samples only and should not be treated as final code. Most of it was created using GitHub Copilot.

Additional Resources

WordPress

• https://developer.wordpress.org/news/2024/07/15-ways-to-curate-the-wordpress-editing-experience/
• https://developer.wordpress.org/news/2023/05/curating-the-editor-experience-with-client-side-filters/
• https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/disable-editor-functionality/
• https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living
• https://developer.wordpress.org/block-editor/how-to-guides/curating-the-editor-experience/filters-and-hooks/
• https://github.com/ndiego/editor-curation-examples
• https://rudrastyh.com/gutenberg/change-default-blocks-with-block-filters.html

Drupal

• https://www.drupalforge.org/template/drupal-cms-xb
• https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components