WordPress Gems for devs

Repository for code examples and resources used in the "WordPress gems for devs" talk.

Event	Date	Branch	Links
WordCamp Skopje 2024	19 October 2024	conf/WC-skopje-2024	Event | Slides
PHP Serbia 2024	06 September 2024	conf/php-serbia-0924	Event | Slides
WordUp Brighton	03 September 2024	meetup/brighton-0924	Event | Slides | Video

HTML API

What problems does it solve?

It makes manipulation of HTML faster, easier and more controlled.

It is built completely custom, starting with HTML standards, which means the parser is never surprised by the HTML it receives but rather it supports the HTML we will probably never see.

Reference

• WP_HTML_Tag_Processor
  • next_tag()
  • get_tag()
  • get_attribute()
  • remove_attribute()
  • get_updated_html()
• WP_HTML_Processor

Examples

• Add and remove classes
• Set aspect ratio for an iframe.
• Test if images have size values set
• Table of contents generator
• Tests:
  • HTML Tag Processor functionality
  • WP_HTML_Tag_Processor bookmark functionality

Resources

• HTML Tag Processor Roadmap
• Introducing the HTML API in WordPress 6.2
• HTML standards

Equivalents in other PHP frameworks

None.

Interactivity API

What problems does it solve?

• Compatibility with PHP hooks.
• Inter-block communication.
• Site-wide features such as client-side navigation.

Reference

• Interactivity API Reference
  • The Reactive and Declarative mindset
    • List of Directives
  • Understanding global state, local context and derived state
    • The store
  • Server-side rendering: Processing directives on the server
    • Server functions
• WP_Interactivity_API_Directives_Processor
• @wordpress/create-block-interactive-template

Examples

• The movie demo, GitHub repo
• Countdown
• Instant Search
• Todo list
• Interactivity API showcase

Resources

• Interactivity API: Roadmap
• Proposal: The Interactivity API – A better developer experience in building interactive blocks
• Interactivity API discussions
• Changelog - Tracking Breaking Changes in the Interactivity API
• Getting Started - and other learning resources

Equivalents in other PHP frameworks

• Laravel - Livewire using AlpineJS
• Symfony UX - Live components, primarily built on top of Turbo and Stimulus, which are part of the Hotwire framework.
• Phoenix LiveView