Gutenberg 7.3.0: Trigger E2E tests #38857

chriskmnds · 2020-01-15T15:11:45Z

E2E integration tests against Gutenberg Edge.

matticbot · 2020-01-15T15:11:47Z

Test live: https://calypso.live/?branch=try/gutenberg-7.3.0-e2e

matticbot · 2020-01-15T15:28:43Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

mmtr · 2020-01-16T11:15:37Z

apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss

@@ -65,10 +65,10 @@
 		border-color: rgba( #425863, 0.4 ); // Gutenberg $dark-opacity-light-800
 	}

-	.editor-block-list__block:first-child & {
+	.block-editor-block-list__block:first-child & {


This will require a new FSE release @Automattic/cylon

I think we are aiming to update Monday, will that work with this change?

If the CSS class is changing, it might be a good idea to keep the old one to handle the case where a user is still on an older Gutenberg version (unless this Gutenberg update has already been pushed to everyone on simple and atomic)

I believe these refactors happened a while back in Gutenberg. This seems like the relevant PR: WordPress/gutenberg#14420

Legacy support was also dropped in WordPress/gutenberg#19050

Ah yeah, removing legacy support would certainly do it. Thanks for adding the fix! By the way, how did you find that these broke?

how did you find that these broke

Not sure I recall exactly, but probably something I spotted while looking into some of the e2e test failures. This in particular may have led me to it (meaning, to search for other references): https://github.com/Automattic/wp-calypso/pull/38857/files#diff-926c3450baa62272252cb16253634da9L27-R27

We might still need to keep the old .editor- selectors in order to support old versions of Gutenberg. In any case, since these changes are unrelated to the E2E fixes, I'd move them to a separate PR.

Ok, I can create a new PR with these changes.

See my comment here please before I proceed: https://github.com/Automattic/wp-calypso/pull/38857/files#r369510379 I may be missing something.

This reverts commit 0f3f84f.

This reverts commit 95a0aec.

chriskmnds · 2020-01-18T15:11:20Z

apps/o2-blocks/src/todo/editor.scss

@@ -135,7 +135,7 @@ $color-accent-green: #31843f;
 }

 // Same for the "add item" input.
-.editor-block-list__block .wp-block-a8c-todo .add-new-item {
+.block-editor-block-list__block .wp-block-a8c-todo .add-new-item {


@mmtr anyone to nudge about this? 😀

I don't know who owns o2 blocks, but they are used in P2s so we can assume that latest Gutenberg will be available. This will also require to generate a new build and upload it to WP.com but I think @ockham is familiar with the process.

Same as above (let's keep the old .editor- selectors and move these changes to a separate PR).

This reverts commit e8e6670.

ockham · 2020-01-20T12:43:58Z

test/e2e/lib/gutenberg/gutenberg-editor-component.js

@@ -225,7 +235,7 @@ export default class GutenbergEditorComponent extends AsyncBaseContainer {
 				.toLowerCase() }`
 		);
 		const insertedBlockSelector = By.css(
-			`.block-editor-block-list__block.is-selected[aria-label*='Block: ${ name }']`
+			`.block-editor-block-list__block.${ selectedBlockConfirmClass }[aria-label*='${ name } Block']`


What's going on here is that we're inserting a block that contains child blocks. When normally the entire block would then be selected, it's only the first child block in this case:

Ideally, we'll find a way to make our selector accomodate for both cases 🤔

If we can't, I'd still suggest maybe handling the 'child block selected' case not through a generic-sounding selectedBlockConfirmClass, but maybe through a bool that determines whether we're dealing with a 'normal' block, or with one that has inner blocks, and set the relevant selector class to either is-selected or has-child-selected, depending on the value of that bool (so the code represents what's going on maybe a bit more intuitively).

Yep, sounds like a good idea. I'll do a cleanup in the end to nail things down. :-)

mmtr · 2020-01-22T10:02:13Z

apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss

@@ -65,10 +65,10 @@
 		border-color: rgba( #425863, 0.4 ); // Gutenberg $dark-opacity-light-800
 	}

-	.editor-block-list__block:first-child & {
+	.block-editor-block-list__block:first-child & {


We might still need to keep the old .editor- selectors in order to support old versions of Gutenberg. In any case, since these changes are unrelated to the E2E fixes, I'd move them to a separate PR.

mmtr · 2020-01-22T10:03:22Z

...-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss

@@ -406,7 +406,7 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 			> .editor-inner-blocks
 			> .editor-block-list__layout
 			> [data-type='core/column']
-			> .editor-block-list__block-edit


Same as above (let's keep the old .editor- selectors and move these changes to a separate PR).

Hmmm I wonder if this is actually something we should be concerned at all with here. I can see several other occurrences of the non-legacy/newer formats in this and other files in the plugin. I feel a more concentrated effort ought to be carried out for this type of thing? There's at least 20+ occurrences of block-editor-block prefixed selectors in the plugin that could potentially be candidates for legacy-support. 🤔

I'm not familiar with what's the backwards compatibility policy we have on the FSE plugin, but I think we tried to have it compatible with at least the 2 latest releases of WP Core (so FSE can work even if the Gutenberg plugin is not active). So I'd assume that any existing selector is currently working with WP 5.2 and we shouldn't worry about them. @Automattic/cylon or @Automattic/ajax might know more.

Ok. My argument is just that if block-editor-block__x won't work here due to missing support for older browsers, then it won't work anywhere. I am not sure if it makes a lot of sense to add support here and leave it hanging loose elsewhere. I feel a more holistic effort is appropriate for this - assuming that's the case! (last I checked it was 20+ candidate selectors). Then again I may be wrong (on approach at least). Let's see what @Automattic/cylon @Automattic/ajax are thinking. 🙂

I'd defer to @noahtallen for a final call on this, but personally I don't think we'd need to be too worried about WP back compat. The plugin is meant to work with simple and atomic, third-party users are installing it on their own risk. See https://github.com/Automattic/wp-calypso/blob/master/apps/full-site-editing/full-site-editing-plugin/readme.txt#L32

+1 for what @obenland said. We require the latest version of the Gutenberg dev plugin in a lot of cases, so we are fine updating everything to the most recent APIs as long as Atomic / Simple sites also have that.

I think we removed the previous 2 WP version requirement a few months back. I agree with what @chriskmnds is saying about some of the syntax. We've been trying to keep up with newer CSS selectors as we've noticed things breaking, so we've also removed older classnames as well when we've made those updates.

The only case I can think of is covering the gap between

FSE plugin update is released with new classnames

Gutenberg plugin update is released to Simple sites

Gutenberg plugin update is released to Atomic sites.

Things could break in the period between when one of those is released and all of them is released.

Thanks for the input folks. I believe we are aligned then. 🙂

p.s. it should be safe to apply these refactors to FSE at any point. It's just legacy selectors replaced with the new ones. I will prepare a separate PR.

EDIT: Now handling these in #39035

mmtr · 2020-01-22T10:03:36Z

apps/o2-blocks/src/todo/editor.scss

@@ -135,7 +135,7 @@ $color-accent-green: #31843f;
 }

 // Same for the "add item" input.
-.editor-block-list__block .wp-block-a8c-todo .add-new-item {
+.block-editor-block-list__block .wp-block-a8c-todo .add-new-item {


Same as above (let's keep the old .editor- selectors and move these changes to a separate PR).

ockham

Thanks for this 👍

Trigger E2E tests

f83d8f9

chriskmnds added DO NOT MERGE [Status] Needs e2e Testing Gutenberg Edge Run e2e tests with a special site that is running the latest Gutenberg plugin snapshot labels Jan 15, 2020

chriskmnds requested review from ockham and mmtr January 15, 2020 15:11

chriskmnds self-assigned this Jan 15, 2020

chriskmnds mentioned this pull request Jan 15, 2020

Plugin updates: Gutenberg 7.3.0 / CoBlocks 1.20.1 #38852

Closed

23 tasks

Refactor some old references to editor-block-list__block

eede374

chriskmnds requested review from a team as code owners January 16, 2020 10:44

mmtr reviewed Jan 16, 2020

View reviewed changes

chriskmnds added 9 commits January 17, 2020 10:18

Update e2e block selectors

1d7a231

Update: Logos -> Logos & Badges

c7f20f4

Update: Simple Payments -> Simple Payments button

6b73537

Update: Pricing Table -> Pricing Table Item

0f3f84f

Revert "Update: Pricing Table -> Pricing Table Item"

95a0aec

This reverts commit 0f3f84f.

Fix Logos & Badges inserter class name

6d85607

Fix Simple Payments inserter class name

d3f71ea

Revert "Revert "Update: Pricing Table -> Pricing Table Item""

e8e6670

This reverts commit 95a0aec.

Cleanup fix

764e3b1

chriskmnds commented Jan 18, 2020

View reviewed changes

chriskmnds added 2 commits January 20, 2020 13:16

Revert "Revert "Revert "Update: Pricing Table -> Pricing Table Item"""

6d99dbb

This reverts commit e8e6670.

Introduce variable selected-block class name

383d066

ockham reviewed Jan 20, 2020

View reviewed changes

Update Jetpack Contact Form Selectors

2534eea

ockham mentioned this pull request Jan 20, 2020

Gutenberg E2E Tests: Some fixes #38944

Merged

mmtr reviewed Jan 22, 2020

View reviewed changes

Fix labels for block selectors

6e9a9ef

noahtallen mentioned this pull request Jan 23, 2020

Fix FSE template part styles. #38987

Merged

ockham approved these changes Jan 24, 2020

View reviewed changes

ockham merged commit 67168b0 into master Jan 24, 2020

ockham mentioned this pull request Feb 6, 2020

EditorRegions: Move to block-editor package, rename to __experimentalEditorSkeleton WordPress/gutenberg#20050

Merged

5 tasks

sirreal deleted the try/gutenberg-7.3.0-e2e branch November 27, 2020 11:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenberg 7.3.0: Trigger E2E tests #38857

Gutenberg 7.3.0: Trigger E2E tests #38857

chriskmnds commented Jan 15, 2020 •

edited

Loading

matticbot commented Jan 15, 2020

matticbot commented Jan 15, 2020

mmtr Jan 16, 2020

noahtallen Jan 16, 2020

noahtallen Jan 16, 2020

chriskmnds Jan 17, 2020 •

edited

Loading

noahtallen Jan 17, 2020

chriskmnds Jan 18, 2020 •

edited

Loading

mmtr Jan 22, 2020

chriskmnds Jan 22, 2020

chriskmnds Jan 22, 2020

chriskmnds Jan 18, 2020

mmtr Jan 20, 2020 •

edited

Loading

mmtr Jan 22, 2020

ockham Jan 20, 2020

chriskmnds Jan 20, 2020

mmtr Jan 22, 2020

mmtr Jan 22, 2020

chriskmnds Jan 22, 2020 •

edited

Loading

mmtr Jan 22, 2020

chriskmnds Jan 23, 2020 •

edited

Loading

obenland Jan 23, 2020

noahtallen Jan 23, 2020

chriskmnds Jan 23, 2020 •

edited

Loading

mmtr Jan 22, 2020

ockham left a comment

Gutenberg 7.3.0: Trigger E2E tests #38857

Gutenberg 7.3.0: Trigger E2E tests #38857

Conversation

chriskmnds commented Jan 15, 2020 • edited Loading

matticbot commented Jan 15, 2020

matticbot commented Jan 15, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chriskmnds Jan 17, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chriskmnds Jan 18, 2020 • 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

mmtr Jan 20, 2020 • 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

chriskmnds Jan 22, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chriskmnds Jan 23, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chriskmnds Jan 23, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ockham left a comment

Choose a reason for hiding this comment

chriskmnds commented Jan 15, 2020 •

edited

Loading

chriskmnds Jan 17, 2020 •

edited

Loading

chriskmnds Jan 18, 2020 •

edited

Loading

mmtr Jan 20, 2020 •

edited

Loading

chriskmnds Jan 22, 2020 •

edited

Loading

chriskmnds Jan 23, 2020 •

edited

Loading

chriskmnds Jan 23, 2020 •

edited

Loading