Explore one of the coolest new features of WordPress 6.2
Aurooba and Brian explore the new WP_HTML_Tag_Processor that landed in WordPress 6.2, and how handy it would be in scenarios where they've had to use regular expressions to modify HTML in their WordPress projects. They then walk through a function using the new processor to inline and safely modify SVGs, ways they could improve the function and take advantage of the processor's capabilities more, and discuss other ways the processor could enhance complicated filtering of rendered output in WordPress.
A full transcript of the episode is available on the website. Watch the video podcast on YouTube and subscribe to our channel and newsletter (https://viewsource.fm/subscribe) to hear about episodes (and more) first!
The code from this episode – https://github.com/viewSourcePodcast/...
Aurooba's post with a walkthrough of the code – https://aurooba.com/inline-svgs-in-yo...
The Dev Note – https://github.com/WordPress/gutenber...
Brian's website – https://www.briancoords.com
Aurooba's website – https://aurooba.com
PHP Inline SVG helper function from Ian – https://gist.github.com/ian-svoboda-p...
Gist to get the file contents of an SVG – https://gist.github.com/rugor/1decc15...
WP SVG Helper functions – https://gist.github.com/kingkool68/6d...
How to Modify HTML in a PHP WordPress Plugin Using The New Tag Processor API – https://adamadam.blog/2023/02/16/how-...
00:00:00 Introduction
00:00:35 The old way of modify rendered HTML in WordPress
00:02:59 Inline SVGs in WordPress
00:05:04 WP_HTML_Tag_Processor for the win
00:06:15 How the HTML Tag Processor works
00:07:55 Inlining SVGs with the HTML Tag Processor
00:08:52 Interactive playgrounds in blog posts
00:11:16 How the get_svg() function works
00:17:51 Modifying individual HTML attributes with the HTML Tag Processor
00:18:53 Handling classes with the HTML Tag Processor
00:20:44 The process of adding a PHP template to a Block Theme
00:21:54 Filtering output from block editor with the HTML Tag Processor
00:23:03 get_svg() function demo
00:29:02 Conclusion
