Import animation styles separate from general styles.

.dev/tests/phpunit/includes/test-coblocks-block-assets.php

@@ -98,7 +98,31 @@ public function test_editor_assets_scripts() {
 		$this->go_to( '/wp-admin/post-new.php' );
 		$this->coblocks_block_assets->editor_assets();
 
-		$this->assertTrue( array_key_exists( 'coblocks-editor', $wp_scripts->registered ) );
+		$this->assertTrue( array_key_exists( 'coblocks-editor', $wp_scripts->registered,  ) );
+
+		$path = 'wp-content/plugins/coblocks/dist/coblocks-*.js';
+		$files = glob( $path );
+
+		foreach($files as $file) {
+			$dist_script = end(
+				explode('/',
+					explode('.',
+						$file
+					)[0]
+				)
+			);
+
+			if ($dist_script == 'coblocks-plugin-deactivation') {
+				$this->assertFalse( array_key_exists( $dist_script, $wp_scripts->registered  ) );
+				continue;
+			}
+
+			if ( $dist_script === 'coblocks-extensions' ) {
+				$dist_script = 'coblocks-editor';
+			}
+
+			$this->assertTrue( array_key_exists( $dist_script, $wp_scripts->registered  ) );
+		}
 	}
 
 	/**
@@ -154,6 +178,7 @@ public function test_block_assets_loaded_with_coblocks_block() {
 		do_action( 'enqueue_block_assets' );
 
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue ); // Should have animation
 	}
 
 	public function test_block_assets_loaded_with_any_reusable_block() {
@@ -212,7 +237,11 @@ public function test_block_assets_loaded_with_core_image_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
+
 	}
 
 	public function test_typography_styles_loaded_with_core_button_block() {
@@ -235,7 +264,10 @@ public function test_typography_styles_loaded_with_core_button_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
 
 	public function test_typography_styles_loaded_with_core_cover_block() {
@@ -258,7 +290,10 @@ public function test_typography_styles_loaded_with_core_cover_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
 
 	public function test_typography_styles_loaded_with_core_heading_block() {
@@ -281,7 +316,10 @@ public function test_typography_styles_loaded_with_core_heading_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
 
 	public function test_typography_styles_loaded_with_core_list_block() {
@@ -304,7 +342,10 @@ public function test_typography_styles_loaded_with_core_list_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
 
 	public function test_typography_styles_loaded_with_core_paragraph_block() {
@@ -327,7 +368,10 @@ public function test_typography_styles_loaded_with_core_paragraph_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
 
 	public function test_typography_styles_loaded_with_core_pullquote_block() {
@@ -350,7 +394,10 @@ public function test_typography_styles_loaded_with_core_pullquote_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
 
 	public function test_typography_styles_loaded_with_core_quote_block() {
@@ -373,6 +420,9 @@ public function test_typography_styles_loaded_with_core_quote_block() {
 		$this->coblocks_block_assets->block_assets();
 		do_action( 'enqueue_block_assets' );
 
+		// Core blocks should also have coblocks-animation.
 		$this->assertContains( 'coblocks-frontend', $wp_styles->queue );
+		$this->assertContains( 'coblocks-animation', $wp_styles->queue );
+		$this->assertContains( 'coblocks-extensions', $wp_styles->queue );
 	}
 }

.github/workflows/test-e2e-cypress.yml

@@ -28,7 +28,201 @@ on:
         required: false
 
 jobs:
-  test_cypress_e2e:
+  setup-matrix:
+    runs-on: ubuntu-latest
+    outputs:
+      matrix: ${{ steps.setup-spec-matrix.outputs.matrix }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Spec Matrix
+        id: setup-spec-matrix
+        run: |
+          changed_files=$(git diff --name-only --diff-filter=ADMR ${{ github.event.before }} origin/master)
+          spec_list=()
+
+          for line in $changed_files; do
+            if [[ "$line" =~ src/(blocks|extensions|componets).* ]]; then # If changed file is within our tested paths.
+
+              changed_path=$(echo $line | cut -d'/' -f3) # Get the main path of the changed file, e.g. author, food-and-drinks, lightbox.
+
+              found_specs=$(find . -type f -name "*.cypress.js") # Find real spec files.
+              pattern="/src/(blocks|extensions|components)/${changed_path}/" # Changed files pattern to match against.
+
+              for spec in $found_specs; do
+                if [[ $spec  =~ $pattern ]]; then
+
+                  # Remove the path from the spec.
+                  spec=$(echo $spec | sed 's:.*/::')
+
+                  # Build spec list for cypress run.
+                  spec_list+="'${spec}',"
+
+                fi
+              done
+
+            fi
+          done
+
+          # All changes processed. Format string for cypress run.
+          # Remove trailing comma from spec_list.
+          updated_string=$(echo $spec_list | sed 's/,$//' )
+
+          # Wrap list in brackets for GH workflow matrix.
+          wrapped_string="[$updated_string]"
+
+          # Save the matrix array to the output.
+          echo "Testing against the following specs:"
+          echo $wrapped_string
+          echo "matrix=$wrapped_string" >> "$GITHUB_OUTPUT"
+
+  build-coblocks:
+    name: Build CoBlocks and Upload build Artifacts
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: |
+          composer install --prefer-dist --optimize-autoloader &
+          yarn install --immutable
+
+      - name: Build plugin
+        run: |
+           npx grunt build
+           # moving the built directory to this location means no dev files in tests-container.
+           # mv ./build/coblocks $(wp-env install-path)/${{ inputs.installPath }}/wp-content/plugins/
+
+      - name: Upload build artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: coblocks-build
+          path: ./build/coblocks
+
+      # - name: Upload node_modules artifact
+      #   uses: actions/upload-artifact@v3
+      #   with:
+      #     name: node_modules
+      #     path: ./node_modules
+
+
+  test_cypress_e2e_changed_files:
+    needs: [setup-matrix, build-coblocks]
+    if: github.event_name == 'pull_request' && needs.setup-matrix.outputs.matrix != '[]'
+    name: E2E Test - Changed Files
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        spec: ${{ fromJson(needs.setup-matrix.outputs.matrix) }}
+
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup wp-env
+        uses: godaddy-wordpress/setup-wp-env@v1
+        with:
+          core: ${{ inputs.wpVersion }}
+          phpVersion: ${{ inputs.phpVersion }}
+          plugins: '["."]'
+          themes: '["https://downloads.wordpress.org/theme/go.zip"]'
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: |
+          composer install --prefer-dist --optimize-autoloader &
+          yarn install --immutable
+
+      - name: Download dependencies
+        uses: actions/download-artifact@v2
+        with:
+          name: coblocks-build
+          path: $(wp-env install-path)/${{ inputs.installPath }}/wp-content/plugins/
+
+
+      # - name: Build plugin
+      #   run: |
+      #     npx grunt build
+      #     # moving the built directory to this location means no dev files in tests-container.
+      #     mv ./build/coblocks $(wp-env install-path)/${{ inputs.installPath }}/wp-content/plugins/
+
+      - name: Prepare Theme
+        run: |
+          if [ "$theme_url" = "https://downloads.wordpress.org/theme/go.zip" ]; then
+            cd $(wp-env install-path)/go
+          else
+            cd $(wp-env install-path)/${{ inputs.installPath }}/wp-content/themes/twentytwentythree
+          fi
+          mkdir -p coblocks/icons
+          echo '<svg height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><circle class="inner-circle" cx="20" cy="20" r="8" stroke-width="8" stroke-dasharray="50.2655 50.2655" stroke-dashoffset="0"></circle></svg>' >> coblocks/icons/custom.svg
+
+      - name: Prepare tests
+        run: |
+          WP_CORE_VERSION=$(wp-env run cli wp core version)
+          echo "WP_CORE_VERSION=${WP_CORE_VERSION}" >> $GITHUB_ENV
+          wp-env run tests-cli wp post generate --count=5
+          wp-env run cli wp post generate --count=5
+          wp-env run cli wp option update permalink_structure '/%postname%'
+          if [ "${{ inputs.theme }}" = "https://downloads.wordpress.org/theme/go.zip" ]; then
+            wp-env run tests-cli wp theme activate go
+          fi
+
+      # Only create a new post if running the migrated specs
+      - name: Create post and get ID
+        if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js'
+        run: |
+          # Generate application-password to use with WP REST API.
+          app_password=$(wp-env run tests-cli wp user application-password create admin gha-password --porcelain)
+
+          # Retrieve post content from fixture.
+          post_content=$(cat .dev/tests/cypress/fixtures/${{matrix.spec}}.html)
+          echo $post_content
+
+          # Create a post using the REST API and parse the postId from the response.
+          postId=$(curl -s -X POST 'http://localhost:8889/?rest_route=/wp/v2/posts' --data-urlencode "title=${{matrix.spec}}" --data-raw "content=$post_content" --data-urlencode "status=publish" --user "admin:$app_password"| jq '.id')
+
+          # Save the postId to the output.
+          echo "postId=$postId" >> $GITHUB_OUTPUT
+        id: create-post
+
+      # Only retrieve the post ID if running the first spec
+      - name: Save post ID to file
+        if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js'
+        run: |
+          path="$GITHUB_WORKSPACE/.dev/tests/cypress/fixtures/${{matrix.spec}}.json"
+          touch "$path"
+          echo "{\"${{matrix.spec}}\": \"$(echo "${{ steps.create-post.outputs.postId }}")\"}" > "$path"
+
+      - name: Run tests
+        run: |
+          CYPRESS_SPEC=$(find ./src/* -name ${{ matrix.spec }} -type f)
+          echo '{"wpUsername":"admin","wpPassword":"password","testURL":"http://localhost:8889"}' | jq . > cypress.env.json
+          ./node_modules/.bin/cypress verify
+          ./node_modules/.bin/cypress run --browser ${{ inputs.browser }} --spec $CYPRESS_SPEC
+
+      - name: Upload failure video
+        if: ${{ failure() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: ${{ matrix.spec }}-fail.mp4
+          path: ./.dev/tests/cypress/videos/${{ matrix.spec }}.mp4
+          retention-days: 1
+
+
+  test_cypress_e2e_full:
+    if: github.event_name == 'push'
+    needs: [setup-matrix, build-coblocks]
     name: E2E Test
     runs-on: ubuntu-latest
     strategy:
@@ -108,11 +302,19 @@ jobs:
           composer install --prefer-dist --optimize-autoloader &
           yarn install --immutable
 
-      - name: Build plugin
-        run: |
-          npx grunt build
-          # moving the built directory to this location means no dev files in tests-container.
-          mv ./build/coblocks $(wp-env install-path)/${{ inputs.installPath }}/wp-content/plugins/
+      - name: Download dependencies
+        uses: actions/download-artifact@v2
+        with:
+          name: coblocks-build
+          path: $(wp-env install-path)/${{ inputs.installPath }}/wp-content/plugins/
+
+
+
+      # - name: Build plugin
+      #   run: |
+      #     npx grunt build
+      #     # moving the built directory to this location means no dev files in tests-container.
+      #     mv ./build/coblocks $(wp-env install-path)/${{ inputs.installPath }}/wp-content/plugins/
 
       - name: Prepare Theme
         run: |

.github/workflows/test-wp-next.yml

@@ -21,8 +21,8 @@ jobs:
     if: needs.check_if_released.outputs.should_run_workflow == 'true'
     runs-on: ubuntu-latest
     outputs:
-      # Should be current latest WP Next release on `wordpress.org`. eg: `https://wordpress.org/wordpress-6.4-RC2.zip`
-      wp_next: "https://wordpress.org/wordpress-6.4-RC2.zip"
+      # Should be current latest WP Next release on `wordpress.org`. eg: `https://wordpress.org/wordpress-6.4-RC3.zip`
+      wp_next: "https://wordpress.org/wordpress-6.4-RC3.zip"
     steps:
       - run: echo "Setting WP Next Constant"
 
@@ -34,7 +34,7 @@ jobs:
     uses: ./.github/workflows/test-e2e-cypress.yml
     with:
       wpVersion: ${{ needs.set_constant.outputs.wp_next }}
-      installPath: "tests-wordpress-6.4-RC2"
+      installPath: "tests-wordpress-6.4-RC3"
       theme: "https://downloads.wordpress.org/theme/go.zip"
     concurrency:
       group: chrome-wp-next