Ensure commands work in the new iframed Block Editor

.github/workflows/cypress.yml

@@ -17,9 +17,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - id: changed-files
-        uses: tj-actions/changed-files@v18.7
+        uses: tj-actions/changed-files@v37
         with:
           files: |
             .github/workflows/cypress.yml
@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Cache Node
         uses: actions/cache@v3
         with:
@@ -65,12 +65,12 @@ jobs:
       fail-fast: false
       matrix:
         core:
-          - { name: 'WP latest', version: 'latest', number: '6.1' }
-          - { name: 'WP trunk', version: 'WordPress/WordPress#master', number: '6.2' }
+          - { name: 'WP latest', version: 'latest', number: '6.3' }
+          - { name: 'WP trunk', version: 'WordPress/WordPress#master', number: '6.3' }
           - { name: 'WP minimum', version: 'WordPress/WordPress#5.7', number: '5.7' }
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Cache Node
         uses: actions/cache@v3
         with:
@@ -100,7 +100,7 @@ jobs:
           npx mochawesome-report-generator tests/cypress/reports/mochawesome.json -o tests/cypress/reports/
           cat ./tests/cypress/reports/mochawesome.md >> $GITHUB_STEP_SUMMARY
       - name: Make artifacts available
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-artifact

.wp-env.json

@@ -1,9 +1,11 @@
 {
   "plugins": [
     ".",
-    "WordPress/classic-editor",
-    "https://github.com/10up/retro-winamp-block/releases/download/1.0.1/retro-winamp-block.zip"
+    "WordPress/classic-editor"
   ],
+  "mappings": {
+    "wp-content/plugins/retro-winamp-block": "https://github.com/10up/retro-winamp-block/releases/download/1.0.1/retro-winamp-block.zip"
+  },
   "env": {
     "tests": {
       "mappings": {

README.md

@@ -6,7 +6,7 @@
 
 ## Prerequisites
 
-This library requires Cypress. Use [@10up/cypress-wp-setup](https://github.com/10up/cypress-wp-setup) to set up Cypress automatically, including this library.
+This library requires Cypress. Use [@10up/cypress-wp-setup](https://github.com/10up/cypress-wp-setup) to set up Cypress automatically, including this library. If running tests against WordPress 6.3, you'll probably need to set `chromeWebSecurity: false` in your Cypress config file. This allows Cypress to properly interact with the iframed Block Editor.
 
 ## Installation
 
@@ -23,7 +23,7 @@ Import the libary in `support/index.js` file:
 import '@10up/cypress-wp-utils';
 ```
 
-Documentation for commands can be found at https://10up.github.io/cypress-wp-utils/.
+Documentation for commands can be found at [https://10up.github.io/cypress-wp-utils/](https://10up.github.io/cypress-wp-utils/).
 
 ### IntelliSense and code completion for Cypress commands
 
@@ -47,7 +47,7 @@ This project uses `hygen` to scaffold new commands to reduce the effort of manua
 $ npx hygen cypress-command new customCommand
 
 Loaded templates: _templates
-       added: src/commands/custom-command.ts
+      added: src/commands/custom-command.ts
       inject: src/index.ts
       inject: src/index.ts
       inject: src/index.ts
@@ -61,12 +61,13 @@ npm i -D path/to/the/library
 
 ### Test against every WordPress major release
 
-For every incoming pull request by default on GitHub Actions we automatically perform tests against:
-- current minimum supported WordPress 5.2
+Every incoming pull request will automatically run tests against:
+
+- our current minimum supported WordPress version, 5.7
 - WordPress [latest release](https://github.com/WordPress/WordPress/tags)
 - current WordPress [future release](https://github.com/WordPress/WordPress/tree/master)
 
-To run tests locally against every WordPress major release since minimum support (5.2) to the latest nightly build (e.g., 6.0-alpha) use this script:
+To run tests locally against every WordPress major release since minimum support (5.7) to the latest nightly build (e.g., 6.4-alpha) use this script:
 
 ```sh
 ./run-all-cores.sh

package.json

@@ -22,6 +22,7 @@
     "env": "wp-env",
     "env:start": "wp-env start",
     "env:stop": "wp-env stop",
+    "env:destroy": "wp-env destroy",
     "postenv:start": "./tests/bin/initialize.sh"
   },
   "repository": {

run-all-cores.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-VERSIONS="5.7 5.8 5.9 6.0 6.1 master:6.2"
+VERSIONS="5.7 5.8 5.9 6.0 6.1 6.2 master:6.3"
 
 SPEC="-- --quiet"
 

src/commands/close-welcome-guide.ts

@@ -12,7 +12,7 @@ export const closeWelcomeGuide = (): void => {
     '.edit-post-welcome-guide .components-modal__header button';
 
   // Wait for edit page to load
-  cy.get(titleInput).should('exist');
+  cy.getBlockEditor().find(titleInput).should('exist');
 
   cy.get('body').then($body => {
     if ($body.find(closeButtonSelector).length > 0) {

src/commands/create-post.ts

@@ -67,20 +67,20 @@ export const createPost = ({
   const titleInput = 'h1.editor-post-title__input, #post-title-0';
   const contentInput = '.block-editor-default-block-appender__content';
 
-  // Make sure editor loaded properly.
-  cy.get(contentInput).should('exist');
-
   // Close Welcome Guide.
   cy.closeWelcomeGuide();
 
   // Fill out data.
   if (title.length > 0) {
-    cy.get(titleInput).clear().type(title);
+    cy.getBlockEditor().find(titleInput).clear().type(title);
   }
 
   if (content.length > 0) {
-    cy.get(contentInput).click();
-    cy.get('.block-editor-rich-text__editable').first().type(content);
+    cy.getBlockEditor().find(contentInput).click();
+    cy.getBlockEditor()
+      .find('.block-editor-rich-text__editable')
+      .first()
+      .type(content);
   }
 
   if ('undefined' !== typeof beforeSave) {

src/commands/get-block-editor.ts

@@ -0,0 +1,27 @@
+import { getIframe } from '../functions/get-iframe';
+
+/**
+ * Get the Block Editor
+ *
+ * @returns Block Editor element.
+ *
+ * @example
+ * Find the title input and type in it
+ * ```
+ * cy.getBlockEditor().find('.editor-post-title__input').type('Test Post');
+ * ```
+ */
+export const getBlockEditor = (): Cypress.Chainable<unknown> => {
+  // Ensure the editor is loaded.
+  cy.get('.edit-post-visual-editor').should('exist');
+
+  return cy
+    .get('body')
+    .then($body => {
+      if ($body.find('iframe[name="editor-canvas"]').length) {
+        return getIframe('iframe[name="editor-canvas"]');
+      }
+      return $body;
+    })
+    .then(cy.wrap); // eslint-disable-line @typescript-eslint/unbound-method
+};

src/commands/insert-block.ts

@@ -1,4 +1,4 @@
-import { fail } from 'assert';
+import { getIframe } from '../functions/get-iframe';
 
 /**
  * Inserts Block
@@ -38,6 +38,21 @@ export const insertBlock = (type: string, name?: string): void => {
     }
   }
 
+  // Remove block patterns
+  /* eslint-disable */
+  let patterns: any[] = [];
+  let settings: any = {};
+  cy.window().then(win => {
+    settings = win.wp.data.select('core/block-editor').getSettings();
+    patterns = settings?.__experimentalBlockPatterns || [];
+    if (patterns.length > 0) {
+      settings.__experimentalBlockPatterns = [];
+    }
+  });
+
+  cy.wait(500);
+  /* eslint-enable */
+
   // Open blocks panel
   cy.get(
     '.edit-post-header-toolbar__inserter-toggle, .edit-post-header-toolbar .block-editor-inserter__toggle'
@@ -63,27 +78,58 @@ export const insertBlock = (type: string, name?: string): void => {
     }
   });
 
+  // Add patterns back
+  if (patterns.length > 0) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    settings.__experimentalBlockPatterns = patterns;
+  }
+
   // Remove tailing suffix of sub-blocks
   const blockType = type.replace(/^(.*?)\/(.*?)\/[^/]+$/, '$1/$2');
 
   const blockTypeAlt = type.replace('/', '-');
 
   // Get last block of the current type
+  // Pull from the iframe editor first, if it exists
   cy.get('body').then($body => {
-    if ($body.find(`.wp-block[data-type="${blockType}"]`).length > 0) {
-      cy.get(`.wp-block[data-type="${blockType}"]`)
-        .last()
-        .then(block => {
-          const id = block.prop('id');
-          cy.wrap(id);
-        });
-    } else if ($body.find(`.wp-block[data-type="${blockTypeAlt}"]`)) {
-      cy.get(`.wp-block[data-type="${blockTypeAlt}"]`)
-        .last()
-        .then(block => {
-          const id = block.prop('id');
-          cy.wrap(id);
-        });
+    if ($body.find('iframe[name="editor-canvas"]').length) {
+      getIframe('iframe[name="editor-canvas"]').then($iframe => {
+        if ($iframe.find(`.wp-block[data-type="${blockType}"]`).length > 0) {
+          getIframe('iframe[name="editor-canvas"]')
+            .find(`.wp-block[data-type="${blockType}"]`)
+            .last()
+            .then(block => {
+              const id = block.prop('id');
+              cy.wrap(id);
+            });
+        } else if (
+          $iframe.find(`.wp-block[data-type="${blockTypeAlt}"]`).length
+        ) {
+          getIframe('iframe[name="editor-canvas"]')
+            .find(`.wp-block[data-type="${blockTypeAlt}"]`)
+            .last()
+            .then(block => {
+              const id = block.prop('id');
+              cy.wrap(id);
+            });
+        }
+      });
+    } else {
+      if ($body.find(`.wp-block[data-type="${blockType}"]`).length > 0) {
+        cy.get(`.wp-block[data-type="${blockType}"]`)
+          .last()
+          .then(block => {
+            const id = block.prop('id');
+            cy.wrap(id);
+          });
+      } else if ($body.find(`.wp-block[data-type="${blockTypeAlt}"]`)) {
+        cy.get(`.wp-block[data-type="${blockTypeAlt}"]`)
+          .last()
+          .then(block => {
+            const id = block.prop('id');
+            cy.wrap(id);
+          });
+      }
     }
   });
 };