<html2react>package that, among other things, contains a function that is executed if a certain test condition evaluates as true. The test condition is used to match elements (or nodes) in the HTML markup of the content. The processor function will in some way process or alter the markup of that element and return either the modified markup or even something else in it's place.
testthe function simply returns a boolean value depending on whether a condition is matched. The condition checks against each node in the DOM tree. Normally it will test whether a node has a particular HTML tag or a particular class, or other property.
trueif the received node (i.e. an HTML element) is an
<img>tag. For all other elements in the DOM tree it will return
processorfunction is dependent on the value returned by the
processorfunction will only be executed if the
true, therefore the
processorfunction will only operate on nodes that match the
processorfunction will only be executed if the element being tested by the
testfunction is an
<img>, and it will then process that element in a defined way.
html2reactpackage into your theme
librariesobject, which must be passed via props to the component connected via
html2reactcomponent to render the HTML for the post/page content the
testfunction will be evaluated for each element in the DOM tree and the
processorfunction will execute and process that element if the test on that node passes, i.e. returns
libraries.html2react.processorsin the theme's
html2reactcomponent and a specific condition, as defined by the
testfunction, is met. The condition is specified by a pattern, such as a specific element type which has a specific class. For example:
<blockquote>element with a React component.
./processors/quote.js. This file also includes the React component
<Quote>that will replace any
<blockquote>element that also has the class
wp-block-quote. However, a more complex example might import this from a separate file.
processorfunction extracts certain sub-parts of the
<blockquote>element and passes them as props to the
processorfunction also returns the HTML returned by the
quoteprocessor is exported.
quoteprocessor is then imported into our theme's
<Html2React>component to render the content, as follows: