wpautop breaks inline MathML

[nicholaswilson]

wpautop treats inline <math> tags as block; they in fact may be placed block or inline, with their flow model dependent on the mode or CSS display property.

Trivial to fix; just needs someone to commit the change. Remove "|math" from $allblocks in file wp-includes/formatting.php. math tags on their own will be wrapped in a paragraph, which is fine.

As a very convenient enhancement, please replace on line 210:

     if ($br) {
-        $pee = preg_replace_callback('/<(script|style). ....
+        $pee = preg_replace_callback('/<(script|style|math) ...

to prevent MathML being polluted with breaks (current required workaround people are using is to have the whole block on one line, which is very messy to edit).

[wojtek.szkutnik]

Adding the patch. All looks pretty straightforward to me, shouldn't break anything.

[hakre]

wpautop() related/informative tickets:

Related: #1706
Related: #2833
Related: #3007
Related: #3833
Related: #4857
Related: #4298
Related: #5250
Related: #6984
Related: #7988
Related: #9437
Related: #10033
Related: #10490
Related: #11678
Related: #12061
Related: #13327

Informative: #7937
Informative: #9744

AutoP tickets get only fixed in very specific situations. In any case they need extensive testing because of backward compabilities and side-effects and therefore normally Unit-Tests.

[nacin]

This looks straightforward.

[nacin]

Not knowing anything about MatML, I want confirmation before doing anything like this.

enhancements can go to 3.2.

[chriscct7]

Can anyone confirm this works per @nacin?

[ericlewis]

Can anyone offer boilerplate to reproduce the issue here?

[ericlewis]

<math> is ​a separate markup language which is a subset of XML. ​It is not supported by modern browsers. It would be odd to support this as a first-class citizen of wpautop().

[ericlewis]

Closing this out as per my previous comments, feel free to reopen with follow-up if the feature is justified.

[hughie.molloy]

<math> tag has been a support element in HTML5 since 2011. ​https://www.w3.org/wiki/HTML/Elements/math
Please consider reopening this as it makes a huge difference to inline formatting.

Purposed:

Current:

Plain Text:
<h3>Quantum quandary</h3>At first sight, magnetic monopoles seem to be incompatible with quantum mechanics. That is because in quantum mechanics, electromagnetic fields have to be described in terms of a scalar potential <math xmlns="​http://www.w3.org/1998/Math/MathML"><mi>ϕ</mi></math> and vector potential <math xmlns="​http://www.w3.org/1998/Math/MathML"><mi mathvariant="bold">A</mi></math>. The magnetic field is given by the curl of the vector potential, <math xmlns="​http://www.w3.org/1998/Math/MathML"><mi mathvariant="bold">B</mi><mo>=</mo><mi mathvariant="bold">∇</mi><mo>×</mo><mi mathvariant="bold">A</mi></math>, and it follows from elementary vector calculus that the field must then be sourceless, <math xmlns="​http://www.w3.org/1998/Math/MathML"><mi mathvariant="bold">∇</mi><mo>.</mo><mi mathvariant="bold">B</mi><mo>=</mo><mn>0</mn></math>. In other words, magnetic field lines cannot end. So how can there be magnetic monopoles?

[conner_bw]

Chiming in with a me too.

If I apply this patch it fixes the issue:

https://core.trac.wordpress.org/attachment/ticket/13340/13340.diff

For obvious reasons, I won't patch wp-includes/formatting.php, WordPress must do it...

Or, let us filter those strings? Example:

$allblocks = apply_filters( 'autop_allblocks', 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary' );
$allblocks = '(?:' . $allblocks . ')';

// ... snip ...

// Replace newlines that shouldn't be touched with a placeholder.
$newline_preservation_helper = apply_filters( 'autop_newline_preservation_helper', 'script|style' );
$pee = preg_replace_callback( '/<(' . $newline_preservation_helper . ').*?<\/\\1>/s', '_autop_newline_preservation_helper', $pee );

[conner_bw]

PS: Would affect TinyMCE too:

​https://github.com/WordPress/WordPress/blob/28ad3662fc6a7f829b33753785fa3a295bec121f/wp-admin/js/editor.js#L1012
​https://github.com/WordPress/WordPress/blob/28ad3662fc6a7f829b33753785fa3a295bec121f/wp-admin/js/editor.js#L886

[SteelWagstaff]

Hi all,

While it’s true that browser support for MathML is incomplete, MathML has been a W3C recommendation for more than 15 years, the 3rd version (released in 2014) is an ISO standard, and it has been a standard element in the HTML5 specification since 2014 (references: ​https://www.w3.org/TR/MathML/ + ​https://www.w3.org/2015/06/mathmlpas.html.en + ​https://www.w3.org/TR/html52/semantics-embedded-content.html#mathml). Furthermore, there’s a widely-used, openly-licensed, cross-platform JavaScript display engine for mathematics called MathJax that works in all browsers that can accept MathML as one of its input syntaxes (​https://www.mathjax.org/). There are clear reasons, based both in our desire to use web standards and to make more accessible websites, that many of us would like to use MathML in our WordPress-based sites. Would you be willing to reconsider your decision not to treat <math> as a "first-class citizen of wpautop()", or failing that, allow us to filter the strings proposed a few months ago by @conner_bw?

[SteelWagstaff]

Pinging again to see if there's been any movement on this? Is there any appetite to treat "<math> as a "first-class citizen of wpautop()", or allow us to filter the strings as proposed by connor_bw earlier in this thread?

[joedolson]

If wrapping the math element with p tags can break it, it would make the most sense to add it to the list of excluded elements. Because it's a limited use element that's only viable in specialist use cases, I think the risk of breaking people's sites because they're expecting the tag to be wrapped in p is quite low.

MathML, while still having poor native support, is the only practical way to communicate mathematics accessibly, so breaking that is a real problem.

I think that the principle of wpautop is to attempt to wrap text that is either unmarked or marked only with inline elements; the exclusion list is intended to prevent breaking existing markup. Since running wpautop on math elements has a strong potential to break markup, I think it should be considered.

[ryokuhi]

This ticket was reviewed today during the weekly bug scrub of the Accessibility Team.

The math element has a display attribute that can be set to either block or inline, allowing the user to decide how the element should be treated. By applying the wpautop function to all math elements, WordPress is overriding a choice that should be left to users, displaying all math elements as block ones.

After a quick check, it appears that the math element, if no display attribute is set, is displayed as an inline element in Chrome, Edge, and Firefox on Windows. If this is the standard behavior, then simply removing math from $allblocks in the wpautop function might break the styling on websites, as all math elements displaying as blocks would be shown as inline.

After a short discussion, the team decided that this should not be a blocker to moving this ticket forward: the ticket is now milestoned for the next major release, but we're already adding the needs-dev-note keyword so that users will be aware of this possibly breaking change in their layouts.

I'm also transforming this ticket to a bug since there currently are no other ways to add adding formulas to a website in an accessible way.

Trac ticket: https://core.trac.wordpress.org/ticket/13340

[bgoewert]

Test Report

Patch tested: ​pr:3847

Steps to Test

1. Copy/Paste an inline example of MathML to a Paragraph block and a Custom HTML block.
2. Create a new Classic Block, Edit as HTML, and paste an inline example.
3. Repeat first two steps for an example of block MathML.
4. Install & activate the ​Classic Editor plugin.
5. Create a new post/page.
6. Select the "Text" tab.
7. Paste the inline and block examples.

Inline Example:

<math><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup><mo>=</mo><msup><mi>c</mi><mn>2</mn></msup></mrow></math>

Block Example:

<math display="block"><mtable><mtr><mtd><msup><mrow><mo>(</mo><mi>a</mi><mo>+</mo><mi>b</mi><mo>)</mo></mrow><mn>2</mn></msup></mtd><mtd><mo>=</mo></mtd><mtd><msup><mi>c</mi><mn>2</mn></msup><mo>+</mo><mn>4</mn><mo>⋅</mo><mo>(</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>a</mi><mi>b</mi><mo>)</mo></mtd></mtr><mtr><mtd><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><mn>2</mn><mi>a</mi><mi>b</mi><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mtd><mtd><mo>=</mo></mtd><mtd><msup><mi>c</mi><mn>2</mn></msup><mo>+</mo><mn>2</mn><mi>a</mi><mi>b</mi></mtd></mtr><mtr><mtd><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mtd><mtd><mo>=</mo></mtd><mtd><msup><mi>c</mi><mn>2</mn></msup></mtd></mtr></mtable></math>

Source: ​MDN Examples - Proving the Pythagorean theorem

Another Example: ​MDN - Deriving the Quadratic Formula

Expected Results

• ✅ Inline MathML - Gutenberg
• ✅ Block MathML - Gutenberg
• ✅ Inline MathML - TinyMCE
• ✅ Block MathML - TinyMCE

Environment

• OS: Pop!_OS
• Web Server: Docker-Desktop & wordpress-develop
• Browser: Firefox 108, Chrome 109
• PHP: 7.4.33
• WordPress: 6.2-alpha-54642-src
• Theme: Twenty Twenty-Three
• Active Plugins: Classic Editor

• OS: macOS Monterey (via LambdaTest)
• Browser: Safari 16

Actual Results

• ⚠ Inline MathML - Gutenberg: Custom HTML block only
• ⚠ Block MathML - Gutenberg: Custom HTML block only
• ⚠ Inline MathML - TinyMCE: Text Editor only
• ⚠ Block MathML - TinyMCE: Text Editor only

Additional Notes

• Twenty Twenty-Three does not apply margin to inline elements.
• Swithcing TinyMCE to the Visual Editor after pasting to the Text Editor removes the markup.
• While Gutenberg only parses this correctly using the Custom HTML block, I did also find that there is a ​MathML block plugin.

Supplemental Artifacts

Figure 1: Inline MathML - Gutenberg

Figure 2: Block MathML - Gutenberg

Figure 3: TinyMCE

[bgoewert]

Related Gutenberg issue: ​https://github.com/WordPress/gutenberg/issues/47198

[adamsilverstein]

13340.diff​ looks good to me, we should add some unit tests though to confirm the new behavior.

[joedolson]

PR ​https://github.com/WordPress/wordpress-develop/pull/4001 adds unit tests using the test cases above, although switches the block math element to use multiline entry, so that it properly tests whether or not br elements are inserted.

Test inline & block math elements against wpautop.

This PR should verify tests. First test should pass; second should fail.

Trac ticket: https://core.trac.wordpress.org/ticket/13340

[joedolson]

In 55272:

Formatting: Treat math elements as block-level elements.

The math element can be displayed either as a block or inline element. If wpautop only treats it as an inline element, it will break multiline elements by inserting br elements. Treating the element as a block element means that the editor won't break common normative usages of the math element.

Prevent math elements from having internal elements split up with br elements, disrupting formatting.

Props nicholaswilson, wojtek.szkutnik, hakre, conner_bw, ericlewis, hughie.molloy, SteelWagstaff, ryokuhi, joedolson, bgoewert, adamsilverstein, joedolson.
Fixes #13340.

In https://core.trac.wordpress.org/changeset/55272

Closed in 55272