-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add AMP compatibility and implement rendering on archive/home pages #32
Add AMP compatibility and implement rendering on archive/home pages #32
Conversation
Excellent, thank you for your contribution @westonruter - I was just thinking about working on this and found your PR! I'll give this a test. |
*/ | ||
function is_amp() { | ||
return ( | ||
( function_exists( 'amp_is_request' ) && \amp_is_request() ) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@westonruter is this the newer 2.0+ preferred way to detect is_amp?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In reality it is identical. We just renamed is_amp_endpoint()
to amp_is_request()
and then added a soft-deprecated is_amp_endpoint()
which calls amp_is_request()
. This was done just to start using prefixed functions everywhere. We're not going to hard-deprecate it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 ah, ok so purely a naming convention based change. thanks for clarifying.
* @return string Rendered block. | ||
*/ | ||
function render_block( $attributes, $content = '' ) { | ||
if ( is_admin() || ! preg_match( '#^(?P<start_div>\s*<div.*?>)(?P<formula>.+)(?P<end_div></div>\s*)$#s', $content, $matches ) ) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What does this regex do? The goal is to only enqueue the mathjax script on the front end when there are (inline) tags or mathml blocks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The regex is for parsing the $content
, in particular to isolate the formula from the start tag and end tag for the enclosed div
. This is done not only to extract the formula to supply into the amp-mathml
tag, but also in the non-AMP version to be able to inject the scripts inside the block wrapper. This ensures that styles that target blocks that have a certain sibling won't get tripped up by the injected script
. The scripts are printed right away instead of waiting for wp_footer
in order to minimize the flash of unstyled content.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Apparently the regex needs to be adapted to support inline <mathml>
tags per below.
@westonruter Excellent work, thank you for all of the improvements included here! I left a few code comments/questions and have some additional feedback here:
|
This was intentional, yes. It's to prevent sibling selectors from breaking when trying to target one block followed by another. See #32 (comment). It didn't seem to cause any problem for the
Is this only available when using the code editor? The |
No, if you type the formula directly in a paragraph, select it and hit the shortcut key (cmd-m) or choose MathML from the ... menu that will insert a formula inline. or shortcut-type formula-shortcut also works. The reason I suggested source code view is that if you try to paste a formula inline in the wysiwyg mode, it will strip/interpret the encoding or slashing.
Good point, I had not thought of that. I will work on this in a separate issue, it should be safe to add the tag to kses allowed list when the plugin is active. |
Something like #35 should work (untested). |
… add/amp-compat * 'master' of github.com:adamsilverstein/mathml-block: run on all tags Require PHP 5.6 in readme Require PHP 5.6 Next version is 1.1.5 (adamsilverstein#34) Bump for wp 5.5, version 1.1.2. (adamsilverstein#33) Make JS translations work (adamsilverstein#29)
OK, I've added support for the inline Math in a72edfa. It seems that the non-AMP version doesn't properly show the Math inline: |
@westonruter Great, thank you! I'll take a look at why the inline rendering isn't working as expected. |
@westonruter it worked well in my testing, can you give me the source code for the post content you are testing? (... -> Code Editor). Mine is: <!-- wp:mathml/mathmlblock -->
<div class="wp-block-mathml-mathmlblock">\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]</div>
<!-- /wp:mathml/mathmlblock -->
<!-- wp:paragraph -->
<p>Scelerisque fringilla magna a dapibus class sapien mauris, hendrerit praesent cras diam vivamus ridiculus bibendum, condimentum platea luctus nostra suspendisse lacinia. Cum metus sem nostra sapien urna magna, leo laoreet inceptos vulputate maecenas mattis placerat, tristique est tincidunt magnis tellus. <mathml>\( \cos(θ+φ)=\cos(θ)\cos(φ)−\sin(θ)\sin(φ) \)</mathml> Tempor purus sociis blandit vel cubilia ut vivamus quisque platea eleifend scelerisque, ligula mauris nisi aliquam lacus sapien curabitur mollis lacinia inceptos eros quis, condimentum sem metus placerat et vulputate ornare dui litora non.</p>
<!-- /wp:paragraph -->
<!-- wp:mathml/mathmlblock -->
<div class="wp-block-mathml-mathmlblock"></div>
<!-- /wp:mathml/mathmlblock -->
<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --> Anyway, output looks good to me! |
Humm. Your example looks good to me as well. My <!-- wp:paragraph -->
<p>This is inline: <mathml>\[x = 2a\]</mathml> This is after</p>
<!-- /wp:paragraph --> Maybe my formula is just buggy. |
OK! 🤷♂️ |
Oh, I see what it is - for inline math you need to use slightly different format: start with <!-- wp:paragraph -->
<p>This is inline: <mathml>\(x = 2a\)</mathml> This is after</p>
<!-- /wp:paragraph --> See http://docs.mathjax.org/en/latest/input/tex/delimiters.html |
Thanks again for all your work here @westonruter 🎉 ! |
Ah, ok. It's what I get for trying to write an example for a syntax I don't know! |
Ha! My knowledge extends only slightly further than yours... Enough to copy examples to test and build all these components. Getting inline working correctly was tricky when building the |
// Add same margins as .MJXc-display. | ||
?> | ||
<style class="amp-mathml"> | ||
.wp-block-mathml-mathmlblock amp-mathml { margin: 1em 0; } | ||
</style> | ||
<?php |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was wrong. It caused a bug in legacy Reader mode. See #38.
Fixes #5.
This PR adds support for AMP by conditionally rendering
amp-mathml
on AMP pages. This will allow us to feature the plugin on the amp-wp.org plugin ecosystem page, and we can move forward with deprecating the AMP MathML block in the AMP plugin (see ampproject/amp-wp#4556).It also ensures that MathML blocks are rendered on archive pages, whereas previously they were only rendered on singular templates:
Other changes:
async
. These two changes ensure no render blocking.Some of the changes here are based on some learnings from the Syntax-highlighting Code Block plugin. For printing scripts and styles just-in-time with the rendering of blocks, see also WordPress/gutenberg#21838 (comment).