Add Gutenberg 'Enable AMP' toggle #1275

kienstra · 2018-07-21T23:15:32Z

This adds the 'Enable AMP' toggle to the Gutenberg editor.

This should have the initial enabled value, probably from AMP_Post_Meta_Box.
It could also have the notifications that the classic editor has, if needed.

This still needs to have the initial toggled value probably from AMP_Post_Meta_Box. It could also have the notifications that the classic editor has, if needed.

Mainly taken from amp-block-validation.js. Also, rename it to clarify that it's for Gutenberg. Though don't use that name, as the name probably won't remain after its Core merge.

This enables reusing it for the block toggle. Also, add a PHPUnit test for this. This is mainly copied from test_render_status().

Include the variable ampBlockEditorToggle. And defaultStatus.

Add documentation for module.data. And other functions, like onAmpChange() and getEnabledStatus().

westonruter · 2018-07-24T23:14:55Z

It could also have the notifications that the classic editor has, if needed.

Meaning the notices shown when expanding the toggle to edit? Yes, these should be shown as well. In Gutenberg perhaps these notices would be shown unconditionally since there wouldn't be any toggle to expand. So this will require exporting $errors from PHP to JS as found here:

https://github.com/Automattic/amp-wp/blob/e3d036c2db60b215636a2b665414b0e599e9ad97/includes/admin/class-amp-post-meta-box.php#L187-L203

kienstra · 2018-07-25T01:40:37Z

Notices

Hi @westonruter,

Meaning the notices shown when expanding the toggle to edit?

Yes, that's what I had in mind. Good point that they would have to be shown without the toggle to expand.

westonruter · 2018-07-25T04:57:11Z

assets/js/amp-block-editor-toggle.js

@@ -0,0 +1,121 @@
+/**


Ideally this file would be converted into a module similar to all of the scripts for blocks in https://github.com/Automattic/amp-wp/tree/develop/blocks

This needs to be done for https://github.com/Automattic/amp-wp/blob/develop/assets/js/amp-block-validation.js and https://github.com/Automattic/amp-wp/blob/develop/assets/js/amp-editor-blocks.js as well. This would allow for being able to use Babel to handle i18n and it would allow for the scripts to all be concatenated into a single build script.

Sure, Issue #1298 now tracks bundling this amp-block-editor-toggle.js module with amp-block-validation.js. We could also add converting amp-editor-blocks.js to a module.

As Weston suggested, this script should be a module, and we could use Babel for internationalization. All of these scripts might eventually be in a single script. But this only affects 1 script now.

There will probably be styling issues to correct. Eventually, we might be able to compile all of the block-related JS scripts into one.

The ternary conditional doesn't really need a (). Also, improve documentation, including changing 'Gutenberg' to 'block editor.'

Before, this used wp_add_inline_script(). But that doesn't seem to work well with this module, as it had used a variable in the global scope. This simply adds a global variable, wpAmpEditor And other AMP Gutenberg scripts could possibly use this.

kienstra · 2018-07-30T20:04:05Z

Hiding Toggle, Displaying Notice

The next step is to apply something like the Classic Editor UI. If AMP is disabled via errors, you shouldn't be able to select "Enabled."

westonruter · 2018-07-30T20:51:20Z

webpack.config.js

@@ -4,7 +4,8 @@ const path = require( 'path' );

 module.exports = {
 	entry: {
-		'./assets/js/amp-blocks-compiled': './blocks/index.js'
+		'./assets/js/amp-blocks-compiled': './blocks/index.js',
+		'./assets/js/amp-block-editor-toggle-compiled': './assets/src/amp-block-editor-toggle.js'


I think these two two should be combined into a single entry point. In other words, ./blocks/index.js could just import the module for the block editor toggle, and then there wouldn't be a need for amp-block-editor-toggle-compiled.js

Good idea, I'll apply that.

Could this instead combine amp-block-editor-toggle-compiled.js with any future modules, like amp-block-validation.js (when that's converted to a module)?

It looks like assets/js/amp-blocks-compiled.js is only enqueued if amp_is_canonical().

@kienstra Yes, amp-block-validation.js should also be converted to a module and included in this bundle. 100%

Good point on amp-blocks-compiled.js. Maybe that would make sense to be a separate bundle then. Either that, or there could be an arg passed for whether the blocks should be registered. But if not, then why include the file in the first place?

So amp-block-validation.js and amp-block-editor-toggle-compiled.js should definitely be combined.

Sounds good. 👍

I know that @hellofromtonya is currently working on amp-block-validation.js so it would be good to not step on her toes 😄

@kienstra One more thing for that issue you'll create: please add to it the need to generate source maps.

@westonruter, @kienstra and I synced up in slack. He'll open the issue. Once we resolve the issues in amp-block-validation.js, then we can green light the task.

Issue #1298 now tracks bundling amp-block-editor-toggle.js with amp-block-validation.js. It also mentions that it's probably best to wait for #1293.

@todo

On Weston's suggestion, in order to display notices in Gutenberg, like they display in the Classic Editor. @todo: handle <a> elements, as they are escaped.

kienstra · 2018-07-30T22:58:44Z

Current Notice Display

Here's an example of how the Notice looks so far when AMP can't be enabled:

westonruter · 2018-07-31T00:42:43Z

That looks good 👍

Move the message function into another helper, get_raw_error_messages(). This has the text of the message and the href. And it allows the block editor script to construct the <a>.

kienstra · 2018-07-31T05:14:16Z

The Notice in the block editor now has the same links as the Classic Editor:

And here's the display in the unlikely case that there are 2 messages in a Notice:

And more comments descrbing how text and <a> is contructed in the Notice.

This might not be the right syntax But it'll prvent having to add a new line for all of the compiled JS files.

When Gutenberg is merged, the gutenberg_ prefix might be removed from functions. So only call this function if it exists. Also, simplify call to get_classic_editor_error_messages().

kienstra · 2018-07-31T22:50:36Z

templates/admin/amp-status.php

@@ -39,36 +39,7 @@
 			</fieldset>
 		<?php else : ?>
 			<div class="inline notice notice-warning notice-alt">
-				<p>
-					<?php
-					$error_messages = array();


This section is moved to get_raw_error_messages().

$raw_messages is not needed. Instead, simply pass it to the funtion.

kienstra · 2018-08-01T00:01:21Z

Request For Code Review

Hi @westonruter,
Could you please review this PR?

Notice with a link:

Notice without a link:

You know this, but for this PR's record, please run this to compile the script:
npm run dev

westonruter · 2018-08-01T00:52:09Z

includes/admin/class-amp-post-meta-box.php

+	 * @param array $raw_error_messages The raw error messages, possibly with URLs.
+	 * @return array $error_messages The error message(s), as an array of strings.
+	 */
+	public function get_classic_editor_error_messages( $raw_error_messages ) {


There is duplication between PHP here and the JS in PluginPostStatusInfo. I appreciate the concern to not dangerouslySetInnerHTML but since the error messages are coming from a trusted source, I think it would be better to do so in this case. Even in Gutenberg, for example, there is a RawHTML component for this purpose. This component is publicly available already in Gutenberg via wp.element.RawHTML.

Thanks, I'm working on this now.

These commits simplify the error messages to use RawHTML like you suggested.

As Weston suggested, it's possible to construct elements using RawHTML. So this simplifies how the messages are output, to just use a string.

The tested method had several changes, so update this for them.

I noticed the error when adding a new Jetpack Testimonial post. Also switch to from classic functions to arrow functions.

westonruter

@kienstra You've written some beautiful JS here. Great work.

kienstra · 2018-08-01T02:55:18Z

Thanks, @westonruter!

kienstra added 6 commits July 21, 2018 18:12

Begin Gutenberg 'Enabled AMP' toggle.

5fb8d66

This still needs to have the initial toggled value probably from AMP_Post_Meta_Box. It could also have the notifications that the classic editor has, if needed.

Refactor JS file to use a module patter.

9f57e67

Mainly taken from amp-block-validation.js. Also, rename it to clarify that it's for Gutenberg. Though don't use that name, as the name probably won't remain after its Core merge.

Abstract logic to get enabled status into helper method.

a06e32d

This enables reusing it for the block toggle. Also, add a PHPUnit test for this. This is mainly copied from test_render_status().

Add assertions for inline script.

c328564

Include the variable ampBlockEditorToggle. And defaultStatus.

Improve documentation in amp-block-editor-toggle.js.

acc6467

Add documentation for module.data. And other functions, like onAmpChange() and getEnabledStatus().

Address Travis error by removing blank line.

c05e469

westonruter reviewed Jul 25, 2018

View reviewed changes

kienstra added 5 commits July 27, 2018 20:20

Take first step to enable compiling amp-block-editor-togge.js

5ed6837

As Weston suggested, this script should be a module, and we could use Babel for internationalization. All of these scripts might eventually be in a single script. But this only affects 1 script now.

Begin to convert AMP block editor toggle to a module.

69d6c77

There will probably be styling issues to correct. Eventually, we might be able to compile all of the block-related JS scripts into one.

Merge branch 'develop' into add/editor-toggle

46723ad

Improve documentation, simplify conditional.

f59170c

The ternary conditional doesn't really need a (). Also, improve documentation, including changing 'Gutenberg' to 'block editor.'

westonruter reviewed Jul 30, 2018

View reviewed changes

Move error messages into function, localize them into script

d5378c5

On Weston's suggestion, in order to display notices in Gutenberg, like they display in the Classic Editor. @todo: handle <a> elements, as they are escaped.

Output Notices with links in the block editor.

0735ed0

Move the message function into another helper, get_raw_error_messages(). This has the text of the message and the href. And it allows the block editor script to construct the <a>.

kienstra mentioned this pull request Jul 31, 2018

Convert block validation script to a module, and bundle it with block toggle module #1298

Closed

kienstra added 3 commits July 31, 2018 16:49

Improve documentation for Notices

f8c3c09

And more comments descrbing how text and <a> is contructed in the Notice.

Use wildcards in .eslintignore and .jshintignore

8b5d749

This might not be the right syntax But it'll prvent having to add a new line for all of the compiled JS files.

Only call gutenberg_get_jed_locale_data() if it exists.

c7bc94c

When Gutenberg is merged, the gutenberg_ prefix might be removed from functions. So only call this function if it exists. Also, simplify call to get_classic_editor_error_messages().

kienstra commented Jul 31, 2018

View reviewed changes

Simply pass value to function without storing in variable

9f0e248

$raw_messages is not needed. Instead, simply pass it to the funtion.

kienstra requested a review from westonruter August 1, 2018 00:01

kienstra changed the title ~~[WIP] Add Gutenberg 'Enable AMP' toggle~~ Add Gutenberg 'Enable AMP' toggle Aug 1, 2018

westonruter reviewed Aug 1, 2018

View reviewed changes

kienstra and others added 3 commits July 31, 2018 20:54

Simplify error messages to use RawHTML.

b76886a

As Weston suggested, it's possible to construct elements using RawHTML. So this simplifies how the messages are output, to just use a string.

Fix test_get_error_messages() to apply latest change.

230d87a

The tested method had several changes, so update this for them.

Fix error raised when post resource lacks meta

c4da67b

I noticed the error when adding a new Jetpack Testimonial post. Also switch to from classic functions to arrow functions.

westonruter approved these changes Aug 1, 2018

View reviewed changes

westonruter added this to the v1.0 milestone Aug 1, 2018

westonruter merged commit 27406eb into develop Aug 1, 2018

westonruter deleted the add/editor-toggle branch August 1, 2018 02:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Gutenberg 'Enable AMP' toggle #1275

Add Gutenberg 'Enable AMP' toggle #1275

kienstra commented Jul 21, 2018 •

edited

Loading

westonruter commented Jul 24, 2018

kienstra commented Jul 25, 2018 •

edited

Loading

westonruter Jul 25, 2018

kienstra Jul 31, 2018

kienstra commented Jul 30, 2018 •

edited

Loading

westonruter Jul 30, 2018

kienstra Jul 30, 2018

kienstra Jul 31, 2018

westonruter Jul 31, 2018

westonruter Jul 31, 2018

westonruter Jul 31, 2018

westonruter Jul 31, 2018

westonruter Jul 31, 2018

hellofromtonya Jul 31, 2018

kienstra Jul 31, 2018

kienstra commented Jul 30, 2018

westonruter commented Jul 31, 2018

kienstra commented Jul 31, 2018

kienstra Jul 31, 2018

kienstra commented Aug 1, 2018

westonruter Aug 1, 2018

kienstra Aug 1, 2018

kienstra Aug 1, 2018

westonruter left a comment

kienstra commented Aug 1, 2018

Add Gutenberg 'Enable AMP' toggle #1275

Add Gutenberg 'Enable AMP' toggle #1275

Conversation

kienstra commented Jul 21, 2018 • edited Loading

westonruter commented Jul 24, 2018

kienstra commented Jul 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Jul 30, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Jul 30, 2018

westonruter commented Jul 31, 2018

kienstra commented Jul 31, 2018

Choose a reason for hiding this comment

kienstra commented Aug 1, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

westonruter left a comment

Choose a reason for hiding this comment

kienstra commented Aug 1, 2018

kienstra commented Jul 21, 2018 •

edited

Loading

kienstra commented Jul 25, 2018 •

edited

Loading

kienstra commented Jul 30, 2018 •

edited

Loading