Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Gutenberg 7.3.0: Trigger E2E tests #38857

Merged
merged 15 commits into from
Jan 24, 2020
Merged

Gutenberg 7.3.0: Trigger E2E tests #38857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
f83d8f9
Trigger E2E tests
chriskmnds Jan 15, 2020
eede374
Refactor some old references to editor-block-list__block
chriskmnds Jan 16, 2020
1d7a231
Update e2e block selectors
chriskmnds Jan 17, 2020
c7f20f4
Update: Logos -> Logos & Badges
chriskmnds Jan 17, 2020
6b73537
Update: Simple Payments -> Simple Payments button
chriskmnds Jan 17, 2020
0f3f84f
Update: Pricing Table -> Pricing Table Item
chriskmnds Jan 17, 2020
95a0aec
Revert "Update: Pricing Table -> Pricing Table Item"
chriskmnds Jan 17, 2020
6d85607
Fix Logos & Badges inserter class name
chriskmnds Jan 17, 2020
d3f71ea
Fix Simple Payments inserter class name
chriskmnds Jan 17, 2020
e8e6670
Revert "Revert "Update: Pricing Table -> Pricing Table Item""
chriskmnds Jan 17, 2020
764e3b1
Cleanup fix
chriskmnds Jan 17, 2020
6d99dbb
Revert "Revert "Revert "Update: Pricing Table -> Pricing Table Item"""
chriskmnds Jan 20, 2020
383d066
Introduce variable selected-block class name
chriskmnds Jan 20, 2020
2534eea
Update Jetpack Contact Form Selectors
ockham Jan 20, 2020
6e9a9ef
Fix labels for block selectors
chriskmnds Jan 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 & {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will require a new FSE release @Automattic/cylon

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Contributor Author

@chriskmnds chriskmnds Jan 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@chriskmnds chriskmnds Jan 18, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

border-bottom-width: 1px;
}
.editor-block-list__block:last-child & {
.block-editor-block-list__block:last-child & {
border-top-width: 1px;
}

Expand Down
2 changes: 1 addition & 1 deletion ...ugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@chriskmnds chriskmnds Jan 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@chriskmnds chriskmnds Jan 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn 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. 🙂

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+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.

Copy link
Contributor Author

@chriskmnds chriskmnds Jan 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

> .block-editor-block-list__block-edit
> div
> .block-core-columns
> .editor-inner-blocks {
Expand Down
6 changes: 3 additions & 3 deletions apps/o2-blocks/src/todo/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mmtr anyone to nudge about this? 😀

Copy link
Member

@mmtr mmtr Jan 20, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

width: 100%;
margin-right: 6px;
padding: 7.5px 8px;
Expand All @@ -154,8 +154,8 @@ body:not( .wp-admin ) .gutenberg {
display: none;
}

.editor-block-list__block.is-selected,
.editor-block-list__block.is-typing {
.block-editor-block-list__block.is-selected,
.block-editor-block-list__block.is-typing {
.wp-block-a8c-todo .add-new-todo-item-form {
display: flex;
}
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/lib/gutenberg/blocks/contact-form-block-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export class ContactFormBlockComponent extends GutenbergBlockComponent {

async insertEmail( email ) {
const emailSelector = By.css(
'.jetpack-contact-form .components-base-control:nth-child(2) .components-text-control__input'
'.jetpack-contact-form .components-base-control:nth-child(1) .components-text-control__input'
);
await driverHelper.waitTillPresentAndDisplayed( this.driver, emailSelector );

Expand All @@ -26,7 +26,7 @@ export class ContactFormBlockComponent extends GutenbergBlockComponent {

async insertSubject( subject ) {
const subjectSelector = By.css(
'.jetpack-contact-form .components-base-control:nth-child(4) .components-text-control__input'
'.jetpack-contact-form .components-base-control:nth-child(3) .components-text-control__input'
);
await driverHelper.waitTillPresentAndDisplayed( this.driver, subjectSelector );

Expand Down
2 changes: 1 addition & 1 deletion test/e2e/lib/gutenberg/blocks/gutenberg-block-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default class GutenbergBlockComponent extends AsyncBaseContainer {

async focusBlock() {
const selectedBlockSelector = By.css(
`${ this.blockID }.editor-block-list__block.is-selected`
`${ this.blockID }.block-editor-block-list__block.is-selected`
);

await driverHelper.clickWhenClickable( this.driver, this.expectedElementSelector );
Expand Down
16 changes: 13 additions & 3 deletions test/e2e/lib/gutenberg/gutenberg-editor-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ export default class GutenbergEditorComponent extends AsyncBaseContainer {
async addBlock( name ) {
name = name.charAt( 0 ).toUpperCase() + name.slice( 1 ); // Capitalize block name
let blockClass = name;
let selectedBlockConfirmClass = 'is-selected';
let prefix = '';
switch ( name ) {
case 'Instagram':
Expand All @@ -202,16 +203,25 @@ export default class GutenbergEditorComponent extends AsyncBaseContainer {
case 'Form':
prefix = 'jetpack-contact-';
break;
case 'Simple Payments':
case 'Simple Payments button':
prefix = 'jetpack-';
blockClass = 'simple-payments';
break;
case 'Markdown':
prefix = 'jetpack-';
break;
case 'Buttons':
case 'Click to Tweet':
case 'Hero':
case 'Logos':
prefix = 'coblocks-';
break;
case 'Pricing Table':
prefix = 'coblocks-';
selectedBlockConfirmClass = 'has-child-selected';
break;
case 'Logos & Badges':
prefix = 'coblocks-';
blockClass = 'logos';
break;
case 'Dynamic HR':
prefix = 'coblocks-';
Expand All @@ -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*='Block: ${ name }']`
);

await this.openBlockInserterAndSearch( name );
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/wp-calypso-gutenberg-coblocks-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,7 @@ describe( `[${ host }] Calypso Gutenberg Editor: CoBlocks (${ screenSize })`, fu

step( 'Can insert the Logos & Badges block', async function() {
const gEditorComponent = await GutenbergEditorComponent.Expect( driver );
await gEditorComponent.addBlock( 'Logos' );
await gEditorComponent.addBlock( 'Logos & Badges' );
return await driverHelper.waitTillPresentAndDisplayed(
driver,
By.css( '.wp-block-coblocks-logos' )
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/wp-calypso-gutenberg-page-editor-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,7 +537,7 @@ describe( `[${ host }] Calypso Gutenberg Editor: Pages (${ screenSize })`, funct
step( 'Can insert the payment button', async function() {
const pageTitle = 'Payment Button Page: ' + dataHelper.randomPhrase();
const gEditorComponent = await GutenbergEditorComponent.Expect( driver );
const blockId = await gEditorComponent.addBlock( 'Simple Payments' );
const blockId = await gEditorComponent.addBlock( 'Simple Payments button' );

const gPaymentComponent = await SimplePaymentsBlockComponent.Expect( driver, blockId );
await gPaymentComponent.insertPaymentButtonDetails( paymentButtonDetails );
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/wp-calypso-gutenberg-post-editor-spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1015,7 +1015,7 @@ describe( `[${ host }] Calypso Gutenberg Editor: Posts (${ screenSize })`, funct
step( 'Can insert the payment button', async function() {
const blogPostTitle = 'Payment Button: ' + dataHelper.randomPhrase();
const gEditorComponent = await GutenbergEditorComponent.Expect( driver );
const blockId = await gEditorComponent.addBlock( 'Simple Payments' );
const blockId = await gEditorComponent.addBlock( 'Simple Payments button' );

const gPaymentComponent = await SimplePaymentsBlockComponent.Expect( driver, blockId );
await gPaymentComponent.insertPaymentButtonDetails( paymentButtonDetails );
Expand Down