HTML API: Introduce safe HTML templating. #5949
Conversation
dmsnell
force-pushed
the
html-api/render-function
branch
2 times, most recently
from
0145fef
to
d275ba3
Compare
dmsnell
force-pushed
the
html-api/render-function
branch
from
d275ba3
to
6d712f1
Compare
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
|
I was chatting with @nerrad about The example from the dev note illustrates it better: import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
import { CustomComponent } from '../custom-component.js';
const translatedString = createInterpolateElement(
__( 'This is a <span>string</span> with a <a>link</a> and a self-closing <custom_component/>.' ),
{
span: <span class="special-text" />,
a: <a href="https://make.wordpress.org"/>,
custom_component: <CustomComponent />,
}
); |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @deeemsad. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
This is an interesting idea @gziolo but my initial reaction is wondering what this provides beyond the proposed templating. It feels different than JavaScript because we're already dealing with actual HTML strings. I'd be curious to see some of the tradeoffs this would bring. In contrast, with the ability to "spread" attributes there's a built-in opportunity to make HTML tags placeholders. |
Right, that's a good point. The same functionality is available but with a different syntax that is, in fact, a bit closer to what people familiar with JSX would expect. |
Trac ticket: Core-60229
🚧👷♂️🏗️ This feature is currently being proposed for the WordPress 6.6 release cycle, being pushed back from 6.5 to allow for more time to let the design work proceed.
Todo
Description
Introduces a function providing context-aware auto-escaping HTML templating.
trueto create a boolean attribute orfalse/nullremove an attribute.Why use these strange funky comments?
A funky comment looks like a tag closer, but the first character of what would be the tag name is a symbol. This was first mentioned in an HTML API progress report: there's a particular kind of HTML syntax error that meets a number of needs we have seen in attempting to replace dynamic content on the server. Namely:
>, making parsing trivial and reliable.What's in this patch?
This preliminary PR only renders child text and doesn't provide a mechanism for composing rendered HTML or rendering pre-processed HTML. That means everything passed as a child will be escaped to render verbatim in the browser. There are open questions about how best to represent nested HTML, and without a clear answer, this code prefers trust and safety over features.
esc_attr()andesc_html()which today are the same thing in WordPress, but which could be greatly expanded to improve the overall escaping situationoutputs
This proposed templating syntax uses closing tags containing invalid tag names, so-called "funky comments," as placeholders, because they are converted to HTML comments in the DOM and because there is near universal existing support for them in all browsers, and because the syntax cannot be nested. The % at the front indicates that the value for the placeholder should come from the args array with a key named according to what follows the %.