Update used WooCommerce plugin in Circle CI

- latest version: 9.6.1
 - previous version: 9.5.2

.circleci/config.yml

@@ -99,12 +99,12 @@ executors:
   wpcli_php_max_wporg:
     <<: *default_job_config
     docker:
-      - image: mailpoet/wordpress:8.1_20230307.1
+      - image: mailpoet/wordpress:8.1_20230307.1 # We need to use 8.1 to emulate the WP.org environment
 
   wpcli_php_latest:
     <<: *default_job_config
     docker:
-      - image: mailpoet/wordpress:8.1_20230307.1
+      - image: mailpoet/wordpress:8.2_20241126.1
 
   wpcli_php_mysql_oldest:
     <<: *default_job_config
@@ -115,7 +115,7 @@ executors:
   wpcli_php_mysql_latest:
     <<: *default_job_config
     docker:
-      - image: mailpoet/wordpress:8.1_20230307.1
+      - image: mailpoet/wordpress:8.2_20241126.1
       - image: cimg/mysql:8.0
         command: --default-authentication-plugin=mysql_native_password --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_520_ci
 
@@ -141,6 +141,8 @@ jobs:
           key: composer-{{ checksum "tasks/code_sniffer/composer.json" }}-{{ checksum "tasks/code_sniffer/composer.lock" }}
       - restore_cache:
           key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
+      - restore_cache:
+          key: composer-{{ checksum "../tests_env/composer.json" }}-{{ checksum "../tests_env/composer.lock" }}
       - restore_cache:
           key: composer-prefixed-{{ checksum "prefixer-checksum" }}
       - restore_cache:
@@ -157,7 +159,7 @@ jobs:
             ./do install
             ./do compile:all --env production --skip-tests
             ./do doctrine:generate-cache
-            vendor/bin/codecept build
+            ../tests_env/vendor/bin/codecept build
             ./do twig:generate-cache
       - run:
           name: 'Check Prettier formatting'
@@ -178,6 +180,10 @@ jobs:
           key: composer-{{ checksum "composer.json" }}-{{ checksum "composer.lock" }}
           paths:
             - vendor
+      - save_cache:
+          key: composer-{{ checksum "../tests_env/composer.json" }}-{{ checksum "../tests_env/composer.lock" }}
+          paths:
+            - ../tests_env/vendor
       - save_cache:
           key: composer-prefixed-{{ checksum "prefixer-checksum" }}
           paths:
@@ -191,10 +197,10 @@ jobs:
       - run:
           name: Download additional WP Plugins for tests
           command: |
-            ./do download:woo-commerce-zip 9.2.2
-            ./do download:woo-commerce-subscriptions-zip 6.6.0
+            ./do download:woo-commerce-zip 9.6.1
+            ./do download:woo-commerce-subscriptions-zip 7.1.0
             ./do download:woo-commerce-memberships-zip 1.26.5
-            ./do download:automate-woo-zip 6.0.32
+            ./do download:automate-woo-zip 6.1.5
       - run:
           name: Dump tests ENV variables for acceptance tests
           command: |
@@ -445,19 +451,19 @@ jobs:
       - run:
           name: 'Pull test docker images'
           # Pull docker images with 3 retries
-          command: i='0';while ! docker-compose -f ../tests_env/docker/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
+          command: i='0';while ! docker compose -f ../tests_env/docker/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
       - run:
           name: Create docker containers for test
           # We experienced some failures when creating containers so we do it explicitly with one retry
           command: |
             cd ../tests_env/docker
-            docker-compose create || docker-compose create
+            docker compose create || docker compose create
       - run:
           # Some tools we use may need different version based on PHP version used in docker
           name: Ensure correct versions of tools
           command: |
             cd ../tests_env/docker
-            docker-compose run --rm -w /project -e COMPOSER_DEV_MODE=1 --entrypoint "php tools/install.php" codeception_acceptance
+            docker compose run --rm -w /project -e COMPOSER_DEV_MODE=1 --entrypoint "php tools/install.php" codeception_acceptance
       - when:
           condition: ${WOOCOMMERCE_VERSION}
           steps:
@@ -465,7 +471,7 @@ jobs:
                 name: Download WooCommerce Core
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-zip ${WOOCOMMERCE_VERSION}" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
+                  docker compose run --rm -w /project --entrypoint "./do download:woo-commerce-zip ${WOOCOMMERCE_VERSION}" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
       - when:
           condition: << parameters.woo_subscriptions_version >>
           steps:
@@ -473,7 +479,7 @@ jobs:
                 name: Download WooCommerce Subscriptions
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-subscriptions-zip << parameters.woo_subscriptions_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
+                  docker compose run --rm -w /project --entrypoint "./do download:woo-commerce-subscriptions-zip << parameters.woo_subscriptions_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
       - when:
           condition: << parameters.woo_memberships_version >>
           steps:
@@ -481,7 +487,7 @@ jobs:
                 name: Download WooCommerce Memberships
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-memberships-zip << parameters.woo_memberships_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
+                  docker compose run --rm -w /project --entrypoint "./do download:woo-commerce-memberships-zip << parameters.woo_memberships_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
       - when:
           condition: << parameters.automate_woo_version >>
           steps:
@@ -489,7 +495,7 @@ jobs:
                 name: Download AutomateWoo
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:automate-woo-zip << parameters.automate_woo_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
+                  docker compose run --rm -w /project --entrypoint "./do download:automate-woo-zip << parameters.automate_woo_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_acceptance
       - run:
           name: Group acceptance tests
           command: |
@@ -518,7 +524,7 @@ jobs:
               --xml
               -g circleci_split_group
             )
-            docker-compose run -e SKIP_DEPS=1 \
+            docker compose run -e SKIP_DEPS=1 \
             -e CIRCLE_BRANCH=${CIRCLE_BRANCH} \
             -e CIRCLE_JOB=${CIRCLE_JOB} \
             -e MULTISITE=<< parameters.multisite >> \
@@ -577,13 +583,13 @@ jobs:
       - run:
           name: 'Pull test docker images'
           # Pull docker images with 3 retries
-          command: i='0';while ! docker-compose -f tests/performance/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
+          command: i='0';while ! docker compose -f tests/performance/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
       - run:
           name: Create docker containers for test
           # We experienced some failures when creating containers so we do it explicitly with one retry
           command: |
             cd tests/performance
-            docker-compose create || docker-compose create
+            docker compose create || docker compose create
       - run:
           name: Run performance tests
           command: |
@@ -741,19 +747,19 @@ jobs:
       - run:
           name: 'Pull test docker images'
           # Pull docker images with 3 retries
-          command: i='0';while ! docker-compose -f ../tests_env/docker/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
+          command: i='0';while ! docker compose -f ../tests_env/docker/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
       - run:
           name: Create docker containers for test
           # We experienced some failures when creating containers so we do it explicitly with one retry
           command: |
             cd ../tests_env/docker
-            docker-compose create || docker-compose create
+            docker compose create || docker compose create
       - run:
           # Some tools we use may need different version based on PHP version used in docker
           name: Ensure correct versions of tools
           command: |
             cd ../tests_env/docker
-            docker-compose run --rm -w /project -e COMPOSER_DEV_MODE=1 --entrypoint "php tools/install.php" codeception_integration
+            docker compose run --rm -w /project -e COMPOSER_DEV_MODE=1 --entrypoint "php tools/install.php" codeception_integration
       - when:
           condition: ${WOOCOMMERCE_VERSION}
           steps:
@@ -761,7 +767,7 @@ jobs:
                 name: Download WooCommerce Core
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-zip ${WOOCOMMERCE_VERSION}" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
+                  docker compose run --rm -w /project --entrypoint "./do download:woo-commerce-zip ${WOOCOMMERCE_VERSION}" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
       - when:
           condition: << parameters.woo_subscriptions_version >>
           steps:
@@ -769,7 +775,7 @@ jobs:
                 name: Download WooCommerce Subscriptions
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-subscriptions-zip << parameters.woo_subscriptions_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
+                  docker compose run --rm -w /project --entrypoint "./do download:woo-commerce-subscriptions-zip << parameters.woo_subscriptions_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
       - when:
           condition: << parameters.woo_memberships_version >>
           steps:
@@ -777,7 +783,7 @@ jobs:
                 name: Download WooCommerce Memberships
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-memberships-zip << parameters.woo_memberships_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
+                  docker compose run --rm -w /project --entrypoint "./do download:woo-commerce-memberships-zip << parameters.woo_memberships_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
       - when:
           condition: << parameters.automate_woo_version >>
           steps:
@@ -785,7 +791,7 @@ jobs:
                 name: Download AutomateWoo
                 command: |
                   cd ../tests_env/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:automate-woo-zip << parameters.automate_woo_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
+                  docker compose run --rm -w /project --entrypoint "./do download:automate-woo-zip << parameters.automate_woo_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception_integration
       - run:
           name: 'PHP Integration tests'
           command: |
@@ -804,7 +810,7 @@ jobs:
             if [[ -n '<< parameters.skip_group >>' ]]; then
               args+=(--skip-group << parameters.skip_group >>)
             fi
-            docker-compose run -e SKIP_DEPS=1 \
+            docker compose run -e SKIP_DEPS=1 \
               -e CIRCLE_BRANCH=${CIRCLE_BRANCH} \
               -e CIRCLE_JOB=${CIRCLE_JOB} \
               -e SKIP_PLUGINS=<< parameters.skip_plugins >> \
@@ -934,40 +940,28 @@ workflows:
           name: acceptance_tests_base_and_woo
           enable_hpos: 1
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - acceptance_tests:
           <<: *slack-fail-post-step
           name: acceptance_tests_woo_hpos_sync_on
           group: woo
           enable_hpos_sync: 1
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - acceptance_tests:
           <<: *slack-fail-post-step
           name: acceptance_tests_woo_hpos_off
           group: woo
           disable_hpos: 1
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - acceptance_tests:
           <<: *slack-fail-post-step
           name: acceptance_tests_blockbased_theme
           group: frontend
           blockbased_theme: 1
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - js_tests:
           <<: *slack-fail-post-step
           requires:
@@ -978,55 +972,41 @@ workflows:
           enable_hpos_sync: 1
           name: integration_test_woo_hpos_sync_on
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - integration_tests:
           <<: *slack-fail-post-step
           group: woo
           name: integration_test_woo_hpos_on
           enable_hpos: 1
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - integration_tests:
           <<: *slack-fail-post-step
           group: woo
           disable_hpos: 1
           name: integration_test_woo_hpos_off
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - integration_tests:
           <<: *slack-fail-post-step
           skip_group: woo
           skip_plugins: 1
           name: integration_test_base
           requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - acceptance_tests:
           <<: *slack-fail-post-step
           <<: *multisite_acceptance_config
           name: acceptance_tests_multisite
+          requires:
+            - build
       - integration_tests:
           <<: *slack-fail-post-step
           <<: *only_trunk_and_release
           multisite: 1
           name: integration_tests_multisite
           requires:
-            - unit_tests
-            - static_analysis_php7
-            - static_analysis_php8
-            - qa_js
-            - qa_php
+            - build
       - acceptance_tests:
           <<: *slack-fail-post-step
           <<: *only_release
@@ -1055,9 +1035,18 @@ workflows:
             - integration_test_woo_hpos_on
             - integration_test_woo_hpos_off
             - integration_test_woo_hpos_sync_on
+            - integration_with_premium_latest
             - acceptance_tests_woo_hpos_sync_on
             - acceptance_tests_woo_hpos_off
             - acceptance_tests_blockbased_theme
+            - static_analysis_php8
+            - static_analysis_php7
+            - unit_tests
+            - qa_js
+            - qa_php
+            - qa_php_oldest
+            - security_analysis
+            - qa_php_max_wporg
       - qit_security_scan:
           <<: *slack-fail-post-step
           requires:
@@ -1093,15 +1082,15 @@ workflows:
       - acceptance_tests:
           <<: *slack-fail-post-step
           name: acceptance_oldest
-          woo_core_version: 9.1.4
-          woo_subscriptions_version: 6.5.0
+          woo_core_version: 9.5.2
+          woo_subscriptions_version: 7.0.0
           woo_memberships_version: 1.25.2
-          automate_woo_version: 5.8.5
+          automate_woo_version: 6.0.33
           mysql_command: --max_allowed_packet=100M
           mysql_image: mysql:5.5
           codeception_image_version: 7.4-cli_20220605.0
           wordpress_image_version: 6.1.1-php7.4 # We use image with PHP 7.4 and install required WordPress version via CLI
-          wordpress_version: 6.5.5
+          wordpress_version: 6.6.2
           requires:
             - build
       - performance_tests:
@@ -1134,13 +1123,13 @@ workflows:
       - integration_tests:
           <<: *slack-fail-post-step
           name: integration_oldest
-          woo_core_version: 9.1.4
-          woo_subscriptions_version: 6.5.0
+          woo_core_version: 9.5.2
+          woo_subscriptions_version: 7.0.0
           woo_memberships_version: 1.25.2
-          automate_woo_version: 5.8.5
+          automate_woo_version: 6.0.33
           codeception_image_version: 7.4-cli_20220605.0
           wordpress_image_version: 6.1.1-php7.4 # We use image with PHP 7.4 and install required WordPress version via CLI # We use image with PHP 7.4 and install required WordPress version via CLI
-          wordpress_version: 6.5.5
+          wordpress_version: 6.6.2
           mysql_command: --max_allowed_packet=100M
           mysql_image: mysql:5.5
           requires:
@@ -1197,25 +1186,25 @@ workflows:
       - acceptance_tests:
           <<: *slack-fail-post-step
           name: acceptance_with_premium_oldest
-          woo_core_version: 9.1.4
-          woo_subscriptions_version: 6.5.0
+          woo_core_version: 9.5.2
+          woo_subscriptions_version: 7.0.0
           woo_memberships_version: 1.25.2
-          automate_woo_version: 5.8.5
+          automate_woo_version: 6.0.33
           codeception_image_version: 7.4-cli_20220605.0
           wordpress_image_version: 6.1.1-php7.4 # We use image with PHP 7.4 and install required WordPress version via CLI
-          wordpress_version: 6.5.5
+          wordpress_version: 6.6.2
           requires:
             - build_premium
       - integration_tests:
           <<: *slack-fail-post-step
           name: integration_with_premium_oldest
-          woo_core_version: 9.1.4
-          woo_subscriptions_version: 6.5.0
+          woo_core_version: 9.5.2
+          woo_subscriptions_version: 7.0.0
           woo_memberships_version: 1.25.2
-          automate_woo_version: 5.8.5
+          automate_woo_version: 6.0.33
           codeception_image_version: 7.4-cli_20220605.0
           wordpress_image_version: 6.1.1-php7.4 # We use image with PHP 7.4 and install required WordPress version via CLI
-          wordpress_version: 6.5.5
+          wordpress_version: 6.6.2
           mysql_command: --max_allowed_packet=100M
           mysql_image: mysql:5.5
           requires:

.editorconfig

@@ -10,6 +10,12 @@ indent_size = 2
 ij_smart_tabs = false
 max_line_length = off
 
+[packages/php/email-editor/**]
+indent_style = tab
+
+[packages/js/email-editor/**.{js,jsx,ts,tsx,scss}]
+indent_style = tab
+
 [*.php]
 ij_php_align_key_value_pairs = false
 ij_php_align_multiline_chained_methods = false
@@ -55,3 +61,5 @@ ij_php_space_after_for_semicolon = true
 ij_php_space_after_colon_in_return_type = true
 ij_php_space_before_else_keyword = true
 ij_php_for_statement_new_line_after_left_paren = true
+ij_php_class_brace_style = end_of_line
+ij_php_comma_after_last_array_element = true

.git-blame-ignore-revs

@@ -39,3 +39,15 @@ e66c76133ec3ef667e382203426d91a4b4aa5174
 
 # Prettier autoformatting
 ab27eaee2df740c0add4331a7f8c115a87ecfa2b
+
+# Move email editor to JS packages folder
+912282f57ccc839491ff951ec5cf7aa10c14f429
+
+# Switch email editor js packages to WP coding style
+b2fb96f8793b63db629d5237010d87332330c51e
+
+# Email editor Prettier autoformatting
+8c604453b1d82e3a2c731241e1c96ea8b32ec716
+
+# Move email editor components out of the engine folder
+1c3ea9cd0a5fc8848a64d840e2fa16a6c7d8c1fe

.github/workflows/email-editor-package.yml

@@ -0,0 +1,212 @@
+name: Email Editor Package Tests
+
+on:
+  push:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        php-version: ['7.4', '8.2']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Cache Composer vendor dependencies for MailPoet
+        id: composer-mailpoet-cache
+        uses: actions/cache@v4
+        with:
+          path: mailpoet/vendor
+          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('mailpoet/composer.lock') }}-${{ hashFiles('mailpoet/composer.json') }}
+
+      - name: Cache Composer vendor-prefixed dependencies for MailPoet
+        id: vendor-prefixed-cache
+        uses: actions/cache@v4
+        with:
+          path: mailpoet/vendor-prefixed
+          key: ${{ runner.os }}-vendor-prefixed-${{ matrix.php-version }}-${{ hashFiles('mailpoet/prefixer/composer.lock') }}-${{ hashFiles('mailpoet/prefixer/composer.json') }}
+
+      - name: Cache Composer vendor for test environment
+        id: composer-tests-env-cache
+        uses: actions/cache@v4
+        with:
+          path: tests_env/vendor
+          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('tests_env/composer.lock') }}-${{ hashFiles('tests_env/composer.json') }}
+
+      - name: Cache Composer dependencies for Email Editor
+        id: composer-email-editor-cache
+        uses: actions/cache@v4
+        with:
+          path: packages/php/email-editor/vendor
+          key: ${{ runner.os }}-composer-email-editor-${{ matrix.php-version }}-${{ hashFiles('packages/php/email-editor/composer.lock') }}-${{ hashFiles('packages/php/email-editor/composer.json') }}
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php-version }}
+          extensions: gd
+
+      - name: Install tools
+        run: |
+          COMPOSER_DEV_MODE=1 php tools/install.php
+          touch .env
+        working-directory: mailpoet
+
+      # Install Test Environment dependencies only if the cache was not hit
+      - name: Install test environment dependencies
+        if: steps.composer-tests-env-cache.outputs.cache-hit != 'true'
+        run: ../mailpoet/tools/vendor/composer.phar install
+        working-directory: tests_env
+
+      # Install MailPoet dependencies only if the cache was not hit
+      - name: Install mailpoet dependencies
+        if: |
+          steps.composer-mailpoet-cache.outputs.cache-hit != 'true' || steps.vendor-prefixed-cache.outputs.cache-hit != 'true'
+        run: ./tools/vendor/composer.phar install
+        working-directory: mailpoet
+
+      # Install Email Editor dependencies only if the cache was not hit
+      - name: Install email-editor dependencies
+        if: steps.composer-email-editor-cache.outputs.cache-hit != 'true'
+        run: ../../../mailpoet/tools/vendor/composer.phar install
+        working-directory: packages/php/email-editor
+
+      # Dump Email Editor autoload
+      # This is needed to refresh classmap autoload when the composer cache is hit
+      - name: Dump email-editor autoload
+        run: ../../../mailpoet/tools/vendor/composer.phar dump-autoload
+        working-directory: packages/php/email-editor
+
+      # Dump MailPoet autoload
+      # This is needed to refresh classmap autoload when the composer cache is hit
+      - name: Dump MailPoet autoload
+        run: ./tools/vendor/composer.phar dump-autoload
+        working-directory: mailpoet
+
+      # Run Email Editor unit tests
+      - name: Run email-editor package unit tests
+        run: ../../../tests_env/vendor/bin/codecept build && ../../../mailpoet/tools/vendor/composer.phar unit-test
+        working-directory: packages/php/email-editor
+
+      - name: Run email-editor package integration tests
+        run: ../../../mailpoet/tools/vendor/composer.phar integration-test
+        working-directory: packages/php/email-editor
+
+  code-style:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.2'
+
+      - name: Install tools
+        run: |
+          COMPOSER_DEV_MODE=1 php tools/install.php
+          touch .env
+        working-directory: mailpoet
+
+      - name: Install composer dependencies
+        run: ../../tools/vendor/composer.phar install
+        working-directory: mailpoet/tasks/code_sniffer
+
+      - name: Run code style check
+        run: ../../../mailpoet/tools/vendor/composer.phar code-style
+        working-directory: packages/php/email-editor
+
+  phpstan-static-analysis:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        php-version: ['7.4', '8.2']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Cache Composer vendor dependencies for MailPoet
+        id: composer-mailpoet-cache
+        uses: actions/cache@v4
+        with:
+          path: mailpoet/vendor
+          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('mailpoet/composer.lock') }}-${{ hashFiles('mailpoet/composer.json') }}
+
+      - name: Cache Composer vendor-prefixed dependencies for MailPoet
+        id: vendor-prefixed-cache
+        uses: actions/cache@v4
+        with:
+          path: mailpoet/vendor-prefixed
+          key: ${{ runner.os }}-vendor-prefixed-${{ matrix.php-version }}-${{ hashFiles('mailpoet/prefixer/composer.lock') }}-${{ hashFiles('mailpoet/prefixer/composer.json') }}
+
+      - name: Cache Composer vendor for test environment
+        id: composer-tests-env-cache
+        uses: actions/cache@v4
+        with:
+          path: tests_env/vendor
+          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('tests_env/composer.lock') }}-${{ hashFiles('tests_env/composer.json') }}
+
+      - name: Cache Composer dependencies for Email Editor
+        id: composer-email-editor-cache
+        uses: actions/cache@v4
+        with:
+          path: packages/php/email-editor/vendor
+          key: ${{ runner.os }}-composer-email-editor-${{ matrix.php-version }}-${{ hashFiles('packages/php/email-editor/composer.lock') }}-${{ hashFiles('packages/php/email-editor/composer.json') }}
+
+      - name: Set up PHP
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php-version }}
+          extensions: gd
+
+      - name: Install tools
+        run: |
+          COMPOSER_DEV_MODE=1 php tools/install.php
+          touch .env
+        working-directory: mailpoet
+
+      # Install Test Environment dependencies only if the cache was not hit
+      - name: Install test environment dependencies
+        if: steps.composer-tests-env-cache.outputs.cache-hit != 'true'
+        run: ../mailpoet/tools/vendor/composer.phar install
+        working-directory: tests_env
+
+      # Install MailPoet dependencies only if the cache was not hit
+      - name: Install mailpoet dependencies
+        if: |
+          steps.composer-mailpoet-cache.outputs.cache-hit != 'true' || steps.vendor-prefixed-cache.outputs.cache-hit != 'true'
+        run: ./tools/vendor/composer.phar install
+        working-directory: mailpoet
+
+      # Install Email Editor dependencies only if the cache was not hit
+      - name: Install email-editor dependencies
+        if: steps.composer-email-editor-cache.outputs.cache-hit != 'true'
+        run: ../../../mailpoet/tools/vendor/composer.phar install
+        working-directory: packages/php/email-editor
+
+      - name: Install composer dependencies
+        run: ../../tools/vendor/composer.phar install
+        working-directory: mailpoet/tasks/phpstan
+
+      # Dump Email Editor autoload
+      # This is needed to refresh classmap autoload when the composer cache is hit
+      - name: Dump email-editor autoload
+        run: ../../../mailpoet/tools/vendor/composer.phar dump-autoload
+        working-directory: packages/php/email-editor
+
+      # Dump MailPoet autoload
+      # This is needed to refresh classmap autoload when the composer cache is hit
+      - name: Dump MailPoet autoload
+        run: ./tools/vendor/composer.phar dump-autoload
+        working-directory: mailpoet
+
+      - name: Run code phpstan
+        run: ../../../mailpoet/tools/vendor/composer.phar phpstan -- --php-version=${{ matrix.php-version == '7.4' && '70400' || '80200' }}
+        working-directory: packages/php/email-editor

.github/workflows/wordpress-playground-preview.yml

@@ -5,7 +5,7 @@ on:
     types: [opened, reopened, synchronize]
 
 jobs:
-  append-description:
+  add-wp-playground-link:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
@@ -20,8 +20,8 @@ jobs:
           BRANCH_NAME="${{ github.head_ref }}"
           DESCRIPTION="$(gh pr view $PR_NUMBER --json body -q .body)"
           HEADING="## Preview"
-          CONTENT="$(printf "\n\n${HEADING}\n\n[Preview in WordPress Playground](https://account.mailpoet.com/playground/new/branch:${BRANCH_NAME})\n\n_The latest successful build from \`${BRANCH_NAME}\` will be used. If none is available, the link won't work._")"
+          CONTENT="$(printf "${HEADING}\n\n[Preview in WordPress Playground](https://account.mailpoet.com/playground/new/branch:${BRANCH_NAME})\n\n_The latest successful build from \`${BRANCH_NAME}\` will be used. If none is available, the link won't work._")"
 
           if [[ "$DESCRIPTION" != *"$HEADING"* ]]; then
-            gh pr edit $PR_NUMBER --body "${DESCRIPTION}\n\n${CONTENT}"
+            gh pr edit $PR_NUMBER --body "$(printf "${DESCRIPTION}\n\n${CONTENT}")"
           fi

.gitignore

@@ -9,3 +9,5 @@ npm-debug.log
 mailpoet-premium
 tsconfig.tsbuildinfo
 /wordpress
+packages/php/*/vendor
+tests_env/vendor

.husky/common.sh

@@ -7,7 +7,6 @@ export MP_GIT_HOOKS_ESLINT="${MP_GIT_HOOKS_ESLINT:-true}"
 export MP_GIT_HOOKS_STYLELINT="${MP_GIT_HOOKS_STYLELINT:-true}"
 export MP_GIT_HOOKS_PHPLINT="${MP_GIT_HOOKS_PHPLINT:-true}"
 export MP_GIT_HOOKS_CODE_SNIFFER="${MP_GIT_HOOKS_CODE_SNIFFER:-true}"
-export MP_GIT_HOOKS_MINIMAL_PLUGIN_STANDARDS="${MP_GIT_HOOKS_MINIMAL_PLUGIN_STANDARDS:-true}"
 export MP_GIT_HOOKS_PHPSTAN="${MP_GIT_HOOKS_PHPSTAN:-true}"
 export MP_GIT_HOOKS_INSTALL_JS="${MP_GIT_HOOKS_INSTALL_JS:-false}"
 export MP_GIT_HOOKS_INSTALL_PHP="${MP_GIT_HOOKS_INSTALL_PHP:-false}"

.husky/post-checkout

@@ -4,3 +4,5 @@
 [ "$MP_GIT_HOOKS_ENABLE" != "true" ] && exit 0
 
 installIfUpdates
+
+./do cleanup:cached-files

.husky/pre-commit

@@ -1,7 +1,8 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 [ "$MP_GIT_HOOKS_ENABLE" != "true" ] && exit 0
 
 npx lint-staged -c mailpoet/package.json --cwd mailpoet
 npx lint-staged -c package.json
+npx lint-staged -c packages/js/email-editor/package.json --cwd packages/js/email-editor
+npx lint-staged -c packages/php/email-editor/.lintstagedrc.json --cwd packages/php/email-editor

.prettierignore

@@ -25,3 +25,5 @@ vendor-prefixed
 /mailpoet/views
 /mailpoet-premium
 /wordpress
+/packages/php/email-editor
+/packages/js/email-editor

.woodpecker.yml

@@ -0,0 +1,30 @@
+clone:
+  git:
+    image: woodpeckerci/plugin-git
+    settings:
+      depth: 1
+
+steps:
+  build:
+    image: node:current-bookworm-slim
+    commands:
+      - apt update
+      - apt install php php-symfony bash -y
+      - npm install pnpm
+      - cd mailpoet
+      - bash build.sh
+      - mkdir ../output
+      - mv mailpoet.zip ../output
+      - cd ..
+
+  release:
+    image: woodpeckerci/plugin-gitea-release:latest
+    settings:
+      base_url: https://git.cavemanon.xyz
+      api_key:
+        from_secret: releasesmithapikey
+      files: "output/"
+      prerelease: false
+      title: "${CI_COMMIT_TAG}"
+    when:
+      - event: tag

README.md

@@ -103,8 +103,8 @@ Then create a Docker Compose override file with NFS settings and restart contain
 ```shell
 cp docker-compose.override.macos-sample.yml docker-compose.override.yml
 
-docker-compose down -v --remove-orphans
-docker-compose up -d
+docker compose down -v --remove-orphans
+docker compose up -d
 ```
 
 **NOTE:** If you are on MacOS Catalina or newer, make sure to put the repository
@@ -163,10 +163,10 @@ To switch the environment to a different PHP version:
        dockerfile: dev/{PHP_VERSION}/Dockerfile
    ```
 
-3. Run `docker-compose build wordpress`.
+3. Run `docker compose build wordpress`.
 4. Start the stack with `./do start`.
 
-To switch back to the default PHP version remove what was added in 2) and, run `docker-compose build wordpress` for application container and `docker-compose build test_wordpress` for tests container,
+To switch back to the default PHP version remove what was added in 2) and, run `docker compose build wordpress` for application container and `docker compose build test_wordpress` for tests container,
 and start the stack using `./do start`.
 
 ### Disabling the Tracy panel

dev/initial-setup.sh

@@ -21,7 +21,7 @@ mkdir -p wordpress/wp-content/plugins/mailpoet-premium
 mkdir -p dev/data/mailhog
 
 for plugin in "mailpoet" "mailpoet-premium"; do
-  docker-compose run --rm wordpress /bin/sh -c "
+  docker compose run --rm wordpress /bin/sh -c "
     [ -d /var/www/html/wp-content/plugins/$plugin ] &&
     cd /var/www/html/wp-content/plugins/$plugin &&
     ./do install &&
@@ -29,7 +29,7 @@ for plugin in "mailpoet" "mailpoet-premium"; do
   "
 done
 
-docker-compose run --rm wordpress /bin/sh -c "
+docker compose run --rm wordpress /bin/sh -c "
   cd /var/www/templates &&
   mkdir assets classes exported
 "

dev/mac-nfs-setup.sh

@@ -29,6 +29,6 @@ cat <<EOT
 NFS volume sharing is set up. Recreate your containers and volumes using:
     cp docker-compose.override.macos-sample.yml docker-compose.override.yml
 
-    docker-compose down -v --remove-orphans
-    docker-compose up -d
+    docker compose down -v --remove-orphans
+    docker compose up -d
 EOT

do

@@ -3,8 +3,8 @@
 function syntax {
   cat << EOF
   ./do setup                           Setup the dev environment.
-  ./do start                           Start the docker containers (docker-compose up -d).
-  ./do stop                            Stop the docker containers (docker-compose stop).
+  ./do start                           Start the docker containers (docker compose up -d).
+  ./do stop                            Stop the docker containers (docker compose stop).
   ./do ssh [--test]                    Run an interactive bash shell inside the plugin directory.
   ./do run [--test] <command>          Run a custom bash command in the wordpress container.
   ./do acceptance [--premium]          Run acceptance tests.
@@ -21,7 +21,7 @@ EOF
 function ssh_and_run {
   params=("$@")
   params=("${params[@]:1}")
-  docker-compose exec $1 bash -c "${params[@]}"
+  docker compose exec $1 bash -c "${params[@]}"
 }
 
 if [ "$1" = "" -o "$1" = "--help" ]; then
@@ -31,10 +31,10 @@ elif [ "$1" = "setup" ]; then
   ./dev/initial-setup.sh
 
 elif [ "$1" = "start" ]; then
-  docker-compose up -d
+  docker compose up -d
 
 elif [ "$1" = "stop" ]; then
-  docker-compose stop
+  docker compose stop
 
 elif [ "$1" = "run" ]; then
   params=("$@")
@@ -54,9 +54,9 @@ elif [ "$1" = "ssh" ]; then
   fi
 
   if [ "$2" = "--test" ] || [ "$3" = "--test" ]; then
-    docker-compose exec --workdir $dir test_wordpress bash
+    docker compose exec --workdir $dir test_wordpress bash
   else
-    docker-compose exec --workdir $dir wordpress bash
+    docker compose exec --workdir $dir wordpress bash
   fi
 
 elif [ "$1" = "acceptance" ]; then
@@ -65,7 +65,7 @@ elif [ "$1" = "acceptance" ]; then
   else
     cd mailpoet
   fi
-  COMPOSE_HTTP_TIMEOUT=200 docker-compose run codeception_acceptance -e KEEP_DEPS=1 --steps --debug -vvv
+  COMPOSE_HTTP_TIMEOUT=200 docker compose run codeception_acceptance -e KEEP_DEPS=1 --steps --debug -vvv
   cd ..
 
 elif [ "$1" = "build" ]; then

docker-compose.override.macos-sample.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   # for M1 Macs
   db:

docker-compose.yml

@@ -25,7 +25,7 @@ services:
     container_name: mp-wp
     build:
       context: .
-      dockerfile: dev/php81/Dockerfile
+      dockerfile: dev/php82/Dockerfile
       args:
         UID: ${UID:-1000}
         GID: ${GID:-1000}
@@ -54,6 +54,7 @@ services:
       - './pnpm-lock.yaml:/var/www/html/wp-content/plugins/pnpm-lock.yaml'
       - './pnpm-workspace.yaml:/var/www/html/wp-content/plugins/pnpm-workspace.yaml'
       - './patches:/var/www/html/wp-content/plugins/patches'
+      - './tests_env:/var/www/html/wp-content/plugins/tests_env'
       - './mailpoet:/var/www/html/wp-content/plugins/mailpoet'
       - './mailpoet-premium:/var/www/html/wp-content/plugins/mailpoet-premium'
       - './packages:/var/www/html/wp-content/plugins/packages'

mailpoet/.env.sample

@@ -51,7 +51,6 @@ MP_GIT_HOOKS_ESLINT=true
 MP_GIT_HOOKS_STYLELINT=true
 MP_GIT_HOOKS_PHPLINT=true
 MP_GIT_HOOKS_CODE_SNIFFER=true
-MP_GIT_HOOKS_MINIMAL_PLUGIN_STANDARDS=true
 MP_GIT_HOOKS_PHPSTAN=true
 MP_GIT_HOOKS_INSTALL_JS=false
 MP_GIT_HOOKS_INSTALL_PHP=false

mailpoet/RoboFile.php

@@ -23,6 +23,7 @@ class RoboFile extends \Robo\Tasks {
     return $this->taskExecStack()
       ->stopOnFail()
       ->exec('./tools/vendor/composer.phar install')
+      ->exec('cd ../packages/php/email-editor && ../../../mailpoet/tools/vendor/composer.phar install && cd -')
       ->exec('cd .. && pnpm install --frozen-lockfile --prefer-offline')
       ->addCode([$this, 'cleanupCachedFiles'])
       ->run();
@@ -32,6 +33,7 @@ class RoboFile extends \Robo\Tasks {
     return $this->taskExecStack()
       ->stopOnFail()
       ->exec('./tools/vendor/composer.phar install')
+      ->exec('cd ../packages/php/email-editor && ../../../mailpoet/tools/vendor/composer.phar install && cd -')
       ->addCode([$this, 'cleanupCachedFiles'])
       ->run();
   }
@@ -208,7 +210,7 @@ class RoboFile extends \Robo\Tasks {
     $env = ($opts['env']) ?
       sprintf('./node_modules/.bin/cross-env NODE_ENV="%s"', $opts['env']) :
       null;
-    return $this->_exec($env . ' ./node_modules/webpack/bin/webpack.js --env BUILD_TESTS=' . ($opts['skip-tests'] ? 'skip' : 'build') . '--env BUILD_ONLY_TESTS=' . ($opts['only-tests'] ? 'true' : 'false'));
+    return $this->_exec($env . ' ./node_modules/webpack/bin/webpack.js --env BUILD_TESTS=' . ($opts['skip-tests'] ? 'skip' : 'build') . ' --env BUILD_ONLY_TESTS=' . ($opts['only-tests'] ? 'true' : 'false'));
   }
 
   public function compileCss($opts = ['env' => null]) {
@@ -220,7 +222,7 @@ class RoboFile extends \Robo\Tasks {
 
     $compilationResult = $this->taskExecStack()
       ->exec('pnpm run stylelint-check -- "assets/css/src/**/*.scss"')
-      ->exec('pnpm run scss')
+      ->exec('pnpm run scss' . ($opts['env'] === 'production' ? ' --no-source-map' : ''))
       ->exec('pnpm run autoprefixer')
       ->run();
 
@@ -330,7 +332,7 @@ class RoboFile extends \Robo\Tasks {
   }
 
   public function testUnit(array $opts = ['file' => null, 'xml' => false, 'multisite' => false, 'debug' => false]) {
-    $command = 'vendor/bin/codecept run unit';
+    $command = '../tests_env/vendor/bin/codecept run unit';
 
     if ($opts['file']) {
       $command .= ' -f ' . $opts['file'];
@@ -404,7 +406,7 @@ class RoboFile extends \Robo\Tasks {
     return $this->testIntegration($opts);
   }
 
-  public function testAcceptance($opts = ['file' => null, 'skip-deps' => false, 'group' => null, 'timeout' => null, 'disable-hpos' => false, 'enable-hpos-sync' => false, 'enable-hpos' => false, 'wordpress-version' => null]) {
+  public function testAcceptance($opts = ['file' => null, 'skip-deps' => false, 'group' => null, 'timeout' => null, 'disable-hpos' => false, 'enable-hpos-sync' => false, 'enable-hpos' => false, 'wordpress-version' => null, 'skip-plugins' => false]) {
     return $this->runTestsInContainer($opts);
   }
 
@@ -420,7 +422,7 @@ class RoboFile extends \Robo\Tasks {
       ->option('env', 'US=' . $opts['us'])
       ->option('env', 'PW=' . $opts['pw'])
       ->option('env', 'K6_BROWSER_HEADLESS=' . ($opts['head'] ? 'false' : 'true'))
-      ->option('env', 'K6_BROWSER_TIMEOUT=120s')
+      ->option('env', 'K6_BROWSER_TIMEOUT=' . getenv('K6_BROWSER_TIMEOUT'))
       ->option('env', 'SCENARIO=' . $opts['scenario'])
       ->arg($path ?? "$dir/tests/performance/scenarios.js")
       ->dir($dir)->run();
@@ -437,6 +439,7 @@ class RoboFile extends \Robo\Tasks {
       ->option('env', 'SCENARIO=' . $opts['scenario'])
       ->option('env', 'K6_CLOUD_TOKEN=' . getenv('K6_CLOUD_TOKEN'))
       ->option('env', 'K6_CLOUD_ID=' . getenv('K6_CLOUD_ID'))
+      ->option('env', 'K6_BROWSER_TIMEOUT=' . getenv('K6_BROWSER_TIMEOUT'))
       ->option('env', 'K6_PROJECT_NAME=' . $opts['scenario'])
       ->option('out', 'cloud')
       ->arg($path ?? "$dir/tests/performance/scenarios.js")
@@ -473,14 +476,14 @@ class RoboFile extends \Robo\Tasks {
 
     // import data & run WordPress setup
     $this->say('Importing data and running a WordPress setup...');
-    $this->taskExec('COMPOSE_HTTP_TIMEOUT=200 docker-compose run --rm -it setup')
+    $this->taskExec('COMPOSE_HTTP_TIMEOUT=200 docker compose run --rm -it setup')
       ->dir(__DIR__ . '/tests/performance')
       ->run();
     $this->say('Data imported, WordPress set up.');
   }
 
   public function testPerformanceClean() {
-    $this->taskExec('COMPOSE_HTTP_TIMEOUT=200 docker-compose down --remove-orphans -v')
+    $this->taskExec('COMPOSE_HTTP_TIMEOUT=200 docker compose down --remove-orphans -v')
       ->dir(__DIR__ . '/tests/performance')
       ->run();
   }
@@ -494,7 +497,7 @@ class RoboFile extends \Robo\Tasks {
    */
   public function deleteDocker() {
     return $this->taskExec(
-      'docker-compose down -v --remove-orphans --rmi all'
+      'docker compose down -v --remove-orphans --rmi all'
     )->dir(__DIR__ . '/../tests_env/docker')->run();
   }
 
@@ -504,20 +507,20 @@ class RoboFile extends \Robo\Tasks {
   public function resetTestDocker() {
     return $this
       ->taskExec(
-        'docker-compose down -v --remove-orphans'
+        'docker compose down -v --remove-orphans'
       )->dir(__DIR__ . '/../tests_env/docker')
       ->addCode([$this, 'cleanupCachedFiles'])
       ->run();
   }
 
   public function testFailedUnit() {
-    $this->_exec('vendor/bin/codecept build');
-    return $this->_exec('vendor/bin/codecept run unit -g failed');
+    $this->_exec('../tests_env/vendor/bin/codecept build');
+    return $this->_exec('../tests_env/vendor/bin/codecept run unit -g failed');
   }
 
   public function testFailedIntegration() {
-    $this->_exec('vendor/bin/codecept build');
-    return $this->_exec('vendor/bin/codecept run integration -g failed');
+    $this->_exec('../tests_env/vendor/bin/codecept build');
+    return $this->_exec('../tests_env/vendor/bin/codecept run integration -g failed');
   }
 
   public function containerDump() {
@@ -683,11 +686,21 @@ class RoboFile extends \Robo\Tasks {
   }
 
   public function qaLintJavascript() {
-    return $this->_exec('pnpm run check-types && pnpm run lint');
+    $collection = $this->collectionBuilder();
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->exec('pnpm run check-types && pnpm run lint')
+      ->exec('cd .. && cd packages/js/email-editor && pnpm run check-types && pnpm run lint:js')
+      ->run();
   }
 
   public function qaLintCss() {
-    return $this->_exec('pnpm run stylelint-check -- "assets/css/src/**/*.scss"');
+    $collection = $this->collectionBuilder();
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->exec('pnpm run stylelint-check -- "assets/css/src/**/*.scss"')
+      ->exec('cd .. && cd packages/js/email-editor && pnpm run lint:css')
+      ->run();
   }
 
   public function qaCodeSniffer(array $filesToCheck, $opts = ['severity' => 'all']) {
@@ -748,7 +761,7 @@ class RoboFile extends \Robo\Tasks {
       return $this->collectionBuilder()
         ->taskExec(
           './tasks/code_sniffer/vendor/bin/phpcbf ' .
-            '--standard=./tasks/code_sniffer/MailPoet ' .
+            '--standard=tasks/code_sniffer/MailPoet/free-ruleset.xml ' .
             '--runtime-set testVersion 7.4-8.2 ' .
             $filePath . ' -n'
         )
@@ -774,7 +787,7 @@ class RoboFile extends \Robo\Tasks {
     }
 
     // make sure Codeception support files are present to avoid invalid errors when running PHPStan
-    $this->_exec('vendor/bin/codecept build');
+    $this->_exec('../tests_env/vendor/bin/codecept build');
 
     // PHPStan must be run out of main plugin directory to avoid its autoloading
     // from vendor/autoload.php where some dev dependencies cause conflicts.
@@ -1598,7 +1611,7 @@ class RoboFile extends \Robo\Tasks {
     }
     $annotationReaderProvider = new \MailPoet\Doctrine\Annotations\AnnotationReaderProvider();
     $configuration = (new \MailPoet\Doctrine\ConfigurationFactory($annotationReaderProvider, true))->createConfiguration();
-    $platformClass = \MailPoet\Doctrine\ConnectionFactory::PLATFORM_CLASS;
+    $platformClass = \MailPoetVendor\Doctrine\DBAL\Platforms\MySQLPlatform::class;
     return \MailPoetVendor\Doctrine\ORM\EntityManager::create([
       'driverClass' => \MailPoet\Doctrine\ConnectionFactory::DRIVER_CLASS,
       'platform' => new $platformClass,
@@ -1609,7 +1622,7 @@ class RoboFile extends \Robo\Tasks {
     $testType = $opts['test_type'] ?? 'acceptance';
     $this->doctrineGenerateCache();
     return $this->taskExec(
-      'COMPOSE_HTTP_TIMEOUT=200 docker-compose run ' .
+      'COMPOSE_HTTP_TIMEOUT=200 docker compose run ' .
       (isset($opts['wordpress-version']) && $opts['wordpress-version'] ? '-e WORDPRESS_VERSION=' . $opts['wordpress-version'] . ' ' : '') .
       (isset($opts['skip-deps']) && $opts['skip-deps'] ? '-e SKIP_DEPS=1 ' : '') .
       (isset($opts['disable-hpos']) && $opts['disable-hpos'] ? '-e DISABLE_HPOS=1 ' : '') .

mailpoet/assets/css/src/components-editor/components/_history.scss

@@ -1,11 +1,16 @@
 .mailpoet_history_wrapper {
-  display: flex;
+  display: grid;
+  grid-gap: $grid-gap;
+  grid-template-columns: 26px 26px auto;
   padding: 12px 20px;
+
+  .mailpoet_reset_template {
+    justify-self: end;
+  }
 }
 
 .mailpoet_history_arrow {
   cursor: pointer;
-  margin-right: 20px;
 
   svg {
     display: inline-block;

mailpoet/assets/css/src/components-plugin/_feature-announcement.scss

@@ -1,61 +0,0 @@
-.mailpoet_feature_announcement {
-  float: right;
-}
-
-.button.mailpoet_feature_announcement_button {
-  height: 28px;
-  min-height: auto;
-  padding: 0 5px 1px;
-  position: relative;
-
-  @include respond-to(small-screen) {
-    margin-top: 10px;
-  }
-}
-
-.mailpoet_feature_announcement_icon {
-  line-height: 28px;
-}
-
-.mailpoet_feature_announcement_dot:before {
-  background: #d54e21;
-  border-radius: 10px;
-  content: '';
-  display: block;
-  height: 10px;
-  position: absolute;
-  right: -4px;
-  top: -4px;
-  width: 10px;
-}
-
-.mailpoet_in_beamer_update_notice {
-  background: #f00;
-  bottom: 0;
-  box-sizing: border-box;
-  color: #fff;
-  font-size: 20px;
-  margin: 0;
-  padding: 20px 10px;
-  position: fixed;
-  right: -400px;
-  text-align: center;
-  transition: right 0.2s ease-in;
-  width: 400px;
-  z-index: 10000000000; // really has to be this high
-
-  a {
-    color: #fff;
-    text-decoration: underline;
-
-    &:hover,
-    &:focus {
-      color: #fff;
-      text-decoration: none;
-    }
-  }
-
-  .beamer_show & {
-    right: 0;
-  }
-}

mailpoet/assets/css/src/components-plugin/_listing-newsletters.scss

@@ -95,10 +95,6 @@ h1.title.mailpoet-newsletter-listing-heading {
 #mailpoet_editor_steps_heading {
   .mailpoet-top-bar {
     left: 0;
-
-    .mailpoet-top-bar-beamer {
-      top: 4px;
-    }
   }
 }
 

mailpoet/assets/css/src/components-plugin/_newsletter-templates.scss

@@ -30,6 +30,11 @@
   }
 }
 
+.mailpoet-template-preview-image {
+  max-width: 100%;
+  width: 700px;
+}
+
 .mailpoet-template-info {
   align-items: center;
   display: flex;

mailpoet/assets/css/src/components-plugin/_newsletter-types.scss

@@ -90,12 +90,17 @@
   width: max-content;
 }
 
-.mailpoet-re-engagement-scheduling-note {
-  color: $color-input-error;
+.mailpoet-re-engagement-scheduling {
+  display: grid;
+  grid-template-columns: 5fr 2fr 3fr;
+
+  .mailpoet-form-input {
+    width: auto;
+  }
 }
 
-.mailpoet-re-engagement-scheduling .mailpoet-form-input-small {
-  width: 150px;
+.mailpoet-re-engagement-scheduling-note {
+  color: $color-input-error;
 }
 
 [data-type='re_engagement'] .mailpoet-newsletter-type-image {

mailpoet/assets/css/src/components-plugin/_settings.scss

@@ -161,3 +161,12 @@ ul.sending-method-benefits {
 .mailpoet_install_premium_message {
   margin-bottom: $grid-gap-medium;
 }
+
+.mailpoet-verify-key-button {
+  height: 36px;
+}
+
+.mailpoet-premium-key-toggle {
+  height: 34px;
+  padding: 0 10px !important;
+}

mailpoet/assets/css/src/components-public/_public.scss

@@ -559,38 +559,3 @@ h2.mailpoet-heading {
     font-size: 85%;
   }
 }
-
-// screen-reader-text CSS class only exists within the WordPress environment
-// the class does not exist when using iFrame forms due to these being used outside WordPress
-// prefixing with mailpoet-* to not interfere with the default WordPress screen-reader-text class
-.mailpoet-screen-reader-text {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  word-wrap: normal !important;
-}
-
-.mailpoet-screen-reader-text:focus {
-  background-color: #ddd;
-  clip: auto !important;
-  -webkit-clip-path: none;
-  clip-path: none;
-  color: #444;
-  display: block;
-  font-size: 1em;
-  height: auto;
-  line-height: normal;
-  padding: 15px 23px 14px;
-  right: 5px;
-  text-decoration: none;
-  top: 5px;
-  width: auto;
-  z-index: 100000;
-}

mailpoet/assets/css/src/components-public/captcha.scss

@@ -10,3 +10,15 @@
     }
   }
 }
+
+// WP registration form
+form#registerform .g-recaptcha:not([data-size='invisible']) {
+  scale: 0.9;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+
+// WC registration form
+form.woocommerce-form-register .g-recaptcha {
+  padding-inline-start: 3px;
+}

mailpoet/assets/css/src/components/_parsley.scss

@@ -16,7 +16,7 @@ textarea.parsley-error {
 
 .parsley-errors-list {
   color: #900;
-  font-size: 13px;
+  font-size: 0.8rem;
   line-height: 1em;
   list-style-type: none;
   margin: 8px 0 3px;

mailpoet/assets/css/src/components/_top_bar.scss

@@ -1,5 +1,3 @@
-$beamer-dot-size: 8px;
-
 .mailpoet-top-bar {
   align-items: center;
   background-color: $color-white;
@@ -83,7 +81,7 @@ $beamer-dot-size: 8px;
   }
 }
 
-.mailpoet-top-bar-beamer {
+.mailpoet-top-bar-tutorial {
   align-items: center;
   background-color: $color-white;
   border: none;
@@ -96,6 +94,7 @@ $beamer-dot-size: 8px;
   position: relative;
   text-align: center;
   text-decoration: none;
+  top: 4px;
   width: 75px;
 
   svg {
@@ -103,15 +102,3 @@ $beamer-dot-size: 8px;
     width: 100%;
   }
 }
-
-.mailpoet-top-bar-beamer-dot:before {
-  background: $color-editor-warning;
-  border-radius: $beamer-dot-size;
-  content: '';
-  display: block;
-  height: $beamer-dot-size;
-  position: absolute;
-  right: 2px;
-  top: 2px;
-  width: $beamer-dot-size;
-}

mailpoet/assets/css/src/generic/_forms-checkbox.scss

@@ -21,7 +21,7 @@
 
     &:focus {
       ~ .mailpoet-form-checkbox-control {
-        border: 2px solid $color-input-border;
+        border-color: $color-input-border-focus;
       }
     }
   }

mailpoet/assets/css/src/generic/_forms-radio.scss

@@ -21,7 +21,7 @@
 
     &:focus {
       ~ .mailpoet-form-radio-control {
-        border: 2px solid $color-input-border;
+        border-color: $color-input-border-focus;
       }
     }
   }

mailpoet/assets/css/src/generic/_forms-toggle.scss

@@ -9,9 +9,15 @@
 
   input {
     height: 1px;
+    opacity: 0;
     position: absolute;
-    visibility: hidden;
     width: 1px;
+
+    &:focus {
+      ~ .mailpoet-form-toggle-control {
+        border-color: $color-input-border-focus;
+      }
+    }
   }
 }
 

mailpoet/assets/css/src/generic/_forms-yesno.scss

@@ -22,9 +22,16 @@
 
   input {
     height: 1px;
+    opacity: 0;
     position: absolute;
-    visibility: hidden;
     width: 1px;
+
+    &:focus {
+      ~ .mailpoet-form-yesno-control {
+        box-shadow: 0 0 0 1px $color-input-border-focus;
+        z-index: 1;
+      }
+    }
   }
 }
 

mailpoet/assets/css/src/generic/_helpers.scss

@@ -110,10 +110,3 @@ span.mailpoet-gap-half {
   height: 6px;
   width: 8px;
 }
-
-.mailpoet-is-dragging {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}

mailpoet/assets/css/src/generic/_typography.scss

@@ -4,6 +4,36 @@
   line-height: $line-height;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+caption,
+figcaption {
+  // https://developer.chrome.com/docs/css-ui/css-text-wrap-balance
+  text-wrap: balance;
+
+  // Skip in email editor to preserve WYSIWYG functionality
+  .mailpoet_newsletter_wrapper & {
+    text-wrap: wrap;
+  }
+}
+
+p,
+ul,
+ol,
+blockquote {
+  // https://developer.chrome.com/blog/css-text-wrap-pretty/
+  text-wrap: pretty;
+
+  // Skip in email editor to preserve WYSIWYG functionality
+  .mailpoet_newsletter_wrapper & {
+    text-wrap: wrap;
+  }
+}
+
 .admin_page_mailpoet-form-editor #wpbody {
   color: inherit;
 }

mailpoet/assets/css/src/mailpoet-plugin.scss

@@ -87,7 +87,6 @@
 @import 'components-plugin/newsletter-types';
 @import 'components-plugin/newsletter-template-styles';
 @import 'components-plugin/welcome-wizard';
-@import 'components-plugin/feature-announcement';
 @import 'components-plugin/newsletter-congratulate';
 @import 'components-plugin/discounts';
 @import 'components-plugin/review-request';

mailpoet/assets/css/src/settings/_colors.scss

@@ -31,6 +31,7 @@ $color-tertiary-hover: darken($color-tertiary, 10%);
 $color-tertiary-light: #dcdcde;
 $color-grey-0: #f6f7f7;
 $color-tertiary-light-hover: darken($color-tertiary-light, 10%);
+$color-tertiary-light-focus: #777;
 $color-tertiary-light-background: rgba($color-tertiary-light, 0.3);
 $color-destructive: #b52727;
 $color-destructive-hover: #a02222;
@@ -46,6 +47,7 @@ $color-text-dark: #2c3338;
 // Form colors
 $color-input-background: #fdfdff;
 $color-input-border: $color-tertiary-light-hover;
+$color-input-border-focus: $color-tertiary-light-focus;
 $color-input-error: #f00;
 $color-input-success: #7ed321;
 

mailpoet/assets/js/src/analytics-event.js

@@ -53,7 +53,7 @@ function exportMixpanel() {
 
   if (
     window.mailpoet_analytics_enabled &&
-    window.MailPoet.libs3rdPartyEnabled
+    window.mailpoet_3rd_party_libs_enabled
   ) {
     window.MailPoet.trackEvent = track;
   } else {
@@ -104,11 +104,30 @@ function cacheEvent(forced, name, data, options, callback) {
 }
 
 export function initializeMixpanelWhenLoaded() {
-  if (typeof window.mixpanel === 'object') {
+  const MAX_RETRY = 5;
+  let intervalId;
+  let retryCount = 0;
+
+  const setupMixpanel = () => {
     exportMixpanel();
     trackCachedEvents();
+  };
+
+  if (typeof window.mixpanel === 'object') {
+    setupMixpanel();
   } else {
-    setTimeout(initializeMixpanelWhenLoaded, 100);
+    intervalId = setInterval(() => {
+      if (typeof window.mixpanel === 'object') {
+        clearInterval(intervalId);
+        setupMixpanel();
+      } else {
+        retryCount += 1;
+      }
+
+      if (retryCount > MAX_RETRY) {
+        clearInterval(intervalId);
+      }
+    }, 100);
   }
 }
 

mailpoet/assets/js/src/announcements/feature-announcement.tsx

@@ -1,33 +0,0 @@
-import classnames from 'classnames';
-import { MailPoet } from 'mailpoet';
-import { withFeatureAnnouncement } from './with-feature-announcement';
-
-type Props = {
-  hasNews: boolean;
-  onBeamerClick: () => void;
-};
-
-function FeatureAnnouncementComponent({ hasNews, onBeamerClick }: Props) {
-  const buttonClasses = classnames(
-    'button mailpoet_feature_announcement_button',
-    hasNews ? 'mailpoet_feature_announcement_dot' : '',
-  );
-  return (
-    <div className="mailpoet_feature_announcement">
-      <button
-        type="button"
-        onClick={onBeamerClick}
-        className={buttonClasses}
-        title={MailPoet.I18n.t('whatsNew')}
-      >
-        <span className="mailpoet_feature_announcement_icon dashicons dashicons-carrot" />
-      </button>
-      <span id="beamer-empty-element" />
-    </div>
-  );
-}
-
-const FeatureAnnouncement = withFeatureAnnouncement(
-  FeatureAnnouncementComponent,
-);
-export { FeatureAnnouncement };

mailpoet/assets/js/src/announcements/with-feature-announcement.tsx

@@ -1,111 +0,0 @@
-import { ComponentType, FC } from 'react';
-import { MailPoet } from 'mailpoet';
-import ReactStringReplace from 'react-string-replace';
-import jQuery from 'jquery';
-import { noop } from 'lodash';
-
-interface FeatureAnnouncementWindow extends Window {
-  Beamer: {
-    show: () => void;
-  };
-  mailpoet_feature_announcement_has_news: boolean;
-  mailpoet_update_available: boolean;
-  beamer_config: {
-    product_id: string;
-    selector: string;
-    language: string;
-    callback: () => void;
-    filter?: string;
-  };
-  mailpoet_user_locale: string;
-}
-
-declare let window: FeatureAnnouncementWindow;
-
-export const withFeatureAnnouncement = <P extends Record<string, unknown>>(
-  Component: ComponentType<P>,
-): FC<Omit<P, 'hasNews' | 'onBeamerClick'>> => {
-  const isBeamerInitialized = () => typeof window.Beamer !== 'undefined';
-  let showDot = window.mailpoet_feature_announcement_has_news;
-  let beamerCallback;
-
-  function showPluginUpdateNotice() {
-    if (
-      !window.mailpoet_update_available ||
-      document.getElementById('mailpoet_update_notice')
-    ) {
-      return;
-    }
-    const updateMailPoetNotice = ReactStringReplace(
-      MailPoet.I18n.t('updateMailPoetNotice'),
-      /\[link\](.*?)\[\/link\]/,
-      (match) => `<a href="update-core.php">${match}</a>`,
-    ).join('');
-    jQuery('#beamerOverlay').append(
-      `<p id="mailpoet_update_notice" class="mailpoet_in_beamer_update_notice">${updateMailPoetNotice}</p>`,
-    );
-  }
-
-  function updateLastAnnouncementSeenValue() {
-    const data = { last_announcement_seen: Math.floor(Date.now() / 1000) };
-    void MailPoet.Ajax.post({
-      api_version: MailPoet.apiVersion,
-      endpoint: 'user_flags',
-      action: 'set',
-      data,
-    });
-  }
-
-  function loadBeamer() {
-    window.beamer_config = {
-      product_id: 'VvHbhYWy7118',
-      selector: '#beamer-empty-element',
-      language: window.mailpoet_user_locale,
-      callback: beamerCallback,
-    };
-    if (MailPoet.isWoocommerceActive) {
-      window.beamer_config.filter = 'woocommerce';
-    }
-    MailPoet.Modal.loading(true);
-    window.mailpoet_feature_announcement_has_news = false;
-    const s = document.createElement('script');
-    s.type = 'text/javascript';
-    s.src = 'https://app.getbeamer.com/js/beamer-embed.js';
-    document.getElementsByTagName('body')[0].appendChild(s);
-  }
-
-  function showBeamer(event = null) {
-    if (event) {
-      event.preventDefault();
-    }
-    if (!isBeamerInitialized()) {
-      loadBeamer();
-      return;
-    }
-    showDot = false;
-    beamerCallback = noop; // We show Beamer panel only on first callback after initialization
-    MailPoet.Modal.loading(false);
-    window.Beamer.show();
-    updateLastAnnouncementSeenValue();
-    showPluginUpdateNotice();
-  }
-
-  beamerCallback = () => {
-    if (!isBeamerInitialized()) {
-      return;
-    }
-    showBeamer();
-  };
-
-  return function withFeatureAnnouncementRenderer({
-    ...props
-  }: Omit<P, 'hasNews' | 'onBeamerClick'>) {
-    return (
-      <Component
-        {...(props as P)}
-        onBeamerClick={(e) => showBeamer(e)}
-        hasNews={showDot}
-      />
-    );
-  };
-};

mailpoet/assets/js/src/automation/api/index.ts

@@ -16,7 +16,11 @@ export type ApiError = {
 
 export const initializeApi = () => {
   apiFetch.use((options, next) => {
-    if (options.path && options.path.startsWith('/wc-analytics/')) {
+    if (
+      options.path &&
+      (options.path.startsWith('/wc-analytics/') ||
+        options.path.startsWith('/wp/v2/'))
+    ) {
       return apiFetch.createRootURLMiddleware(`${api.root}/`)(options, next);
     }
     return apiFetch.createRootURLMiddleware(apiUrl)(options, next);

mailpoet/assets/js/src/automation/automation.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import { TopBarWithBeamer } from 'common/top-bar/top-bar';
+import { TopBarWithBoundary } from 'common/top-bar/top-bar';
 import { SlotFillProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { registerTranslations } from 'common';
@@ -72,7 +72,7 @@ function Automations(): JSX.Element {
 
   return (
     <>
-      <TopBarWithBeamer />
+      <TopBarWithBoundary />
       <GlobalNotices />
       <Notices />
       <MssAccessNotices />

mailpoet/assets/js/src/automation/editor/components/automation/flow-ending.tsx

@@ -3,14 +3,23 @@ import { FlowSeparator } from './flow-separator';
 import { Step as StepData } from './types';
 
 type Props = {
-  stepData: StepData;
+  previousStepData: StepData;
   index: number;
+  nextStepData?: StepData;
 };
 
-export function FlowEnding({ stepData, index }: Props): JSX.Element {
+export function FlowEnding({
+  previousStepData,
+  index,
+  nextStepData,
+}: Props): JSX.Element {
   return (
     <div className="mailpoet-automation-editor-step-wrapper">
-      <FlowSeparator stepData={stepData} index={index} />
+      <FlowSeparator
+        previousStepData={previousStepData}
+        nextStepData={nextStepData}
+        index={index}
+      />
       <Icon
         className="mailpoet-automation-editor-automation-end"
         icon={check}

mailpoet/assets/js/src/automation/editor/components/automation/flow-separator.tsx

@@ -6,8 +6,9 @@ import { Step as StepData } from './types';
 import { RenderStepSeparatorType } from '../../../types/filters';
 
 type Props = {
-  stepData: StepData;
+  previousStepData: StepData;
   index: number;
+  nextStepData?: StepData;
 };
 
 export function FlowSeparator(props: Props): JSX.Element {
@@ -35,5 +36,9 @@ export function FlowSeparator(props: Props): JSX.Element {
       ),
     [context],
   );
-  return renderSeparator(props.stepData, props.index);
+  return renderSeparator(
+    props.previousStepData,
+    props.index,
+    props.nextStepData,
+  );
 }

mailpoet/assets/js/src/automation/editor/components/automation/flow.tsx

@@ -40,13 +40,24 @@ export function Flow({ stepData, row }: Props): JSX.Element {
 
           return nextStepData ? (
             <div key={id}>
-              {row > 0 && <FlowSeparator stepData={stepData} index={i} />}
+              {row > 0 && (
+                <FlowSeparator
+                  previousStepData={stepData}
+                  index={i}
+                  nextStepData={nextStepData}
+                />
+              )}
               <FlowStep stepData={nextStepData} index={i} />
               <Flow stepData={nextStepData} row={row + 1} />
             </div>
           ) : (
-            // eslint-disable-next-line react/no-array-index-key
-            <FlowEnding key={i} stepData={stepData} index={i} />
+            <FlowEnding
+              // eslint-disable-next-line react/no-array-index-key
+              key={i}
+              previousStepData={stepData}
+              index={i}
+              nextStepData={nextStepData}
+            />
           );
         })}
       </div>

mailpoet/assets/js/src/automation/editor/store/actions.ts

@@ -143,6 +143,7 @@ export function* activate() {
   return {
     type: 'ACTIVATE',
     automation: data?.data ?? automation,
+    saved: !!data?.data,
   } as const;
 }
 

mailpoet/assets/js/src/automation/editor/store/reducer.ts

@@ -41,11 +41,15 @@ export function reducer(state: State, action): State {
         savedState: 'saved',
       };
     case 'ACTIVATE':
-      return {
-        ...state,
-        automationData: action.automation,
-        savedState: 'saved',
-      };
+      return action.saved
+        ? {
+            ...state,
+            automationData: action.automation,
+            savedState: 'saved',
+          }
+        : {
+            ...state,
+          };
     case 'DEACTIVATE':
       return {
         ...state,

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/automation-flow/hooks/index.tsx

@@ -50,6 +50,7 @@ export function initHooks() {
       return function StatisticSeparatorWrapper(
         previousStepData: StepData,
         index: number,
+        nextStepData: StepData,
       ) {
         return (
           <>
@@ -62,7 +63,11 @@ export function initHooks() {
                 }
               />
             )}
-            <StatisticSeparator previousStep={previousStepData} index={index} />
+            <StatisticSeparator
+              previousStep={previousStepData}
+              nextStep={nextStepData}
+              index={index}
+            />
           </>
         );
       };

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/components/tabs/automation-flow/statistic-separator.tsx

@@ -8,11 +8,13 @@ import { Step } from '../../../../../../editor/components/automation/types';
 type Props = {
   previousStep: Step;
   index: number;
+  nextStep?: Step;
 };
 
 export function StatisticSeparator({
   previousStep,
   index,
+  nextStep,
 }: Props): JSX.Element | null {
   const { section, stepType } = useSelect(
     (s) => ({
@@ -52,15 +54,34 @@ export function StatisticSeparator({
     );
   }
 
-  const flow = data.step_data?.flow;
-  const value = flow !== undefined ? flow[previousStep.id] ?? 0 : 0;
+  const completed = data.step_data?.completed || {};
+  const failed = data.step_data?.failed || {};
+  const waiting = data.step_data?.waiting || {};
+  const calculateTotals = (id) =>
+    (completed[id] ?? 0) + (failed[id] ?? 0) + (waiting[id] ?? 0);
+  let totalEntered = 0;
+  if (nextStep) {
+    totalEntered = calculateTotals(nextStep.id);
+  } else if (previousStep.next_steps.length === 2) {
+    // When there is no next step and the previous step has 2+ next steps we are
+    // in an empty if/else branch. To calculate the total we need to subtract
+    // totalEntered of the sibling step from totalEntered of previousStep
+    const siblingStep = previousStep.next_steps.find((step) => step.id);
+    const totalEnteredSibling = siblingStep
+      ? calculateTotals(siblingStep.id)
+      : 0;
+    const totalEnteredPrevious = completed[previousStep.id] ?? 0;
+    totalEntered = totalEnteredPrevious - totalEnteredSibling;
+  } else {
+    totalEntered = completed[previousStep.id] ?? 0;
+  }
   const percent =
     data.step_data.total > 0
-      ? Math.round((value / data.step_data.total) * 100)
+      ? Math.round((totalEntered / data.step_data.total) * 100)
       : 0;
   const formattedValue = Intl.NumberFormat(locale.toString(), {
     notation: 'compact',
-  }).format(value);
+  }).format(totalEntered);
   const formattedPercent = Intl.NumberFormat(locale.toString(), {
     style: 'percent',
   }).format(percent / 100);

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/index.tsx

@@ -2,7 +2,7 @@ import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import { dispatch, select, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { TopBarWithBeamer } from '../../../../common/top-bar/top-bar';
+import { TopBarWithBoundary } from '../../../../common/top-bar/top-bar';
 import { Notices } from '../../../listing/components/notices';
 import { Header } from './components/header';
 import { Overview } from './components/overview';
@@ -49,7 +49,7 @@ function TopBarWithBreadcrumb(): JSX.Element {
   }));
 
   return (
-    <TopBarWithBeamer>
+    <TopBarWithBoundary>
       <p className="mailpoet-automation-analytics-title">
         <a href={MailPoet.urls.automationListing}>
           {__('Automations', 'mailpoet')}
@@ -57,7 +57,7 @@ function TopBarWithBreadcrumb(): JSX.Element {
         › <strong>{automation.name}</strong>
         <AutomationStatus status={automation.status} />
       </p>
-    </TopBarWithBeamer>
+    </TopBarWithBoundary>
   );
 }
 

mailpoet/assets/js/src/automation/integrations/mailpoet/analytics/store/types.ts

@@ -167,7 +167,7 @@ export type StepFlowData = {
   total: number;
   waiting: Record<string, number> | undefined;
   failed: Record<string, number> | undefined;
-  flow: Record<string, number> | undefined;
+  completed: Record<string, number> | undefined;
 };
 
 export type AutomationFlowSectionData = SectionData & {

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send-email/helper/is-transactional.ts

@@ -3,6 +3,7 @@ import { Step } from '../../../../../editor/components/automation/types';
 import { storeName } from '../../../../../editor/store';
 
 const transactionalTriggers = [
+  'mailpoet:custom-trigger',
   'woocommerce:order-status-changed',
   'woocommerce:order-created',
   'woocommerce:order-completed',
@@ -15,6 +16,9 @@ const transactionalTriggers = [
   'woocommerce-subscriptions:subscription-status-changed',
   'woocommerce-subscriptions:trial-ended',
   'woocommerce-subscriptions:trial-started',
+  'woocommerce:buys-from-a-tag',
+  'woocommerce:buys-from-a-category',
+  'woocommerce:buys-a-product',
 ];
 
 export function isTransactional(step: Step): boolean {

mailpoet/assets/js/src/automation/integrations/woocommerce/index.tsx

@@ -7,6 +7,7 @@ import { step as AbandonedCartTrigger } from './steps/abandoned-cart';
 import { MailPoet } from '../../../mailpoet';
 import { step as BuysAProductTrigger } from './steps/buys-a-product';
 import { step as BuysFromACategory } from './steps/buys-from-a-category';
+import { step as BuysFromATag } from './steps/buys-from-a-tag';
 import { step as MadeAReview } from './steps/made-a-review';
 // Insert new imports here
 
@@ -21,6 +22,7 @@ export const initialize = (): void => {
   registerStepType(AbandonedCartTrigger);
   registerStepType(BuysAProductTrigger);
   registerStepType(BuysFromACategory);
+  registerStepType(BuysFromATag);
   registerStepType(MadeAReview);
   // Insert new steps here
 };

mailpoet/assets/js/src/automation/integrations/woocommerce/steps/buys-from-a-tag/edit/index.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Search } from '@woocommerce/components';
+import { __ } from '@wordpress/i18n';
+import { PanelBody } from '@wordpress/components';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+import { dispatch, useSelect } from '@wordpress/data';
+import { PlainBodyTitle } from '../../../../../editor/components';
+import { storeName } from '../../../../../editor/store';
+import { OrderStatusPanel } from '../../order-status-changed/edit/order-status-panel';
+import autocompleter from './tag-autocompleter';
+
+type Tag = {
+  key: string | number;
+  label?: string;
+};
+
+async function fetchTags(include: number[], callback: (tags: Tag[]) => void) {
+  const path = addQueryArgs('/wp/v2/product_tag/', { include });
+  const data: { id: number; name: string }[] = await apiFetch({
+    path,
+    method: 'GET',
+  });
+  callback(data.map((item) => ({ key: item?.id, label: item?.name })));
+}
+
+export function Edit(): JSX.Element {
+  const [current, setCurrent] = useState<Tag[]>([]);
+  const { selectedStep } = useSelect((select) => ({
+    selectedStep: select(storeName).getSelectedStep(),
+  }));
+  const tagIds: number[] = useMemo(
+    () => (selectedStep.args?.tag_ids as number[]) ?? [],
+    [selectedStep],
+  );
+  const [isBusy, setIsBusy] = useState(tagIds.length > 0);
+
+  useEffect(() => {
+    if (!isBusy) {
+      return;
+    }
+    void fetchTags(tagIds, (tags: Tag[]) => {
+      setCurrent(tags);
+      setIsBusy(false);
+    });
+  }, [isBusy, tagIds]);
+  return (
+    <>
+      <PanelBody opened>
+        <PlainBodyTitle title={__('Tags', 'mailpoet')} />
+        <Search
+          disabled={isBusy}
+          type="custom"
+          autocompleter={autocompleter}
+          className={`mailpoet-product-search ${isBusy ? 'is-busy' : ''}`}
+          placeholder={__('Search for a tag', 'mailpoet')}
+          selected={current}
+          onChange={(items: Tag[]) => {
+            setCurrent(items);
+            void dispatch(storeName).updateStepArgs(
+              selectedStep.id,
+              'tag_ids',
+              items.map((item) => item.key),
+            );
+          }}
+          multiple
+          inlineTags
+        />
+      </PanelBody>
+
+      <OrderStatusPanel
+        label={__('Order settings', 'mailpoet')}
+        showFrom={false}
+        showTo
+        toLabel={__('Order status', 'mailpoet')}
+        onChange={(status, property) => {
+          void dispatch(storeName).updateStepArgs(
+            selectedStep.id,
+            property,
+            status,
+          );
+        }}
+      />
+    </>
+  );
+}

mailpoet/assets/js/src/automation/integrations/woocommerce/steps/buys-from-a-tag/edit/tag-autocompleter.tsx

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import apiFetch from '@wordpress/api-fetch';
+import { AutoCompleter } from '@woocommerce/components/build-types/search/autocompleters';
+
+const tagAutoCompleter: AutoCompleter = {
+  name: 'tags',
+  className: 'woocommerce-search__product-result',
+  options(search) {
+    const query = search
+      ? {
+          search,
+          per_page: 10,
+          orderby: 'count',
+        }
+      : {};
+    return apiFetch({
+      path: addQueryArgs('/wp/v2/product_tag', query),
+    });
+  },
+  isDebounced: true,
+  getOptionIdentifier(tag) {
+    return tag.id as number;
+  },
+  getOptionKeywords(tag) {
+    return [tag.name] as string[];
+  },
+  getFreeTextOptions(query) {
+    const label = (
+      <span key="name" className="woocommerce-search__result-name">
+        {__('Search results', 'mailpoet')}
+      </span>
+    );
+    const titleOption = {
+      key: 'title',
+      label,
+      value: { id: query, name: query },
+    };
+
+    return [titleOption];
+  },
+  getOptionLabel(tag) {
+    return (
+      <span
+        key="name"
+        className="woocommerce-search__result-name"
+        aria-label={tag.name}
+      >
+        {tag.name}
+      </span>
+    );
+  },
+  // This is slightly different than gutenberg/Autocomplete, we don't support different methods
+  // of replace/insertion, so we can just return the value.
+  getOptionCompletion(tag) {
+    const value = {
+      key: tag.id,
+      label: tag.name,
+    };
+    return value;
+  },
+};
+
+export default tagAutoCompleter;

mailpoet/assets/js/src/automation/integrations/woocommerce/steps/buys-from-a-tag/icon.tsx

@@ -0,0 +1,26 @@
+export function Icon(): JSX.Element {
+  return (
+    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.73173 4.00134C5.8081 3.03517 6.61579 2.27551 7.60166 2.27551C8.58753 2.27551 9.39522 3.03517 9.47159 4.00134H10.1904C10.7479 4.00134 11.2033 4.45681 11.2033 5.01426V10.1917C11.2033 10.7492 10.7479 11.2047 10.1904 11.2047H5.01292C4.45547 11.2047 4 10.7492 4 10.1917V5.01426C4 4.45681 4.45547 4.00134 5.01292 4.00134H5.73173ZM7.60166 3.43843C7.36389 3.43843 7.15161 3.55664 7.02145 3.73861C6.96586 3.81633 6.92553 3.90533 6.90474 4.00134H8.29858C8.27779 3.90533 8.23746 3.81633 8.18187 3.73861C8.05171 3.55664 7.83943 3.43843 7.60166 3.43843ZM5.16291 5.16426V9.65285C5.16291 9.86763 5.33703 10.0417 5.55181 10.0417H9.65151C9.86629 10.0417 10.0404 9.86763 10.0404 9.65285V5.16426H9.47749V5.87717C9.47749 6.19732 9.21618 6.45863 8.89603 6.45863C8.57589 6.45863 8.31458 6.19732 8.31458 5.87717V5.16426H6.88875V5.87717C6.88875 6.19732 6.62743 6.45863 6.30729 6.45863C5.98714 6.45863 5.72583 6.19732 5.72583 5.87717V5.16426H5.16291Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5858 4.58722C13.9609 4.21215 14.4696 4.00143 15 4.00143H18C18.5304 4.00143 19.0391 4.21215 19.4142 4.58722C19.7893 4.96229 20 5.471 20 6.00143V9.00143C20 9.53187 19.7893 10.0406 19.4142 10.4156C19.0391 10.7907 18.5304 11.0014 18 11.0014H15C14.4696 11.0014 13.9609 10.7907 13.5858 10.4156C13.2107 10.0406 13 9.53187 13 9.00143V6.00143C13 5.471 13.2107 4.96229 13.5858 4.58722ZM15 5.50143H18C18.1326 5.50143 18.2598 5.55411 18.3536 5.64788C18.4473 5.74165 18.5 5.86883 18.5 6.00143V9.00143C18.5 9.13404 18.4473 9.26122 18.3536 9.35499C18.2598 9.44876 18.1326 9.50143 18 9.50143H15C14.8674 9.50143 14.7402 9.44876 14.6464 9.35499C14.5527 9.26122 14.5 9.13404 14.5 9.00143V6.00143C14.5 5.86883 14.5527 5.74165 14.6464 5.64788C14.7402 5.55411 14.8674 5.50143 15 5.50143Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.5858 13.5844C13.9609 13.2093 14.4696 12.9986 15 12.9986H18C18.5304 12.9986 19.0391 13.2093 19.4142 13.5844C19.7893 13.9594 20 14.4681 20 14.9986V17.9986C20 18.529 19.7893 19.0377 19.4142 19.4128C19.0391 19.7879 18.5304 19.9986 18 19.9986H15C14.4696 19.9986 13.9609 19.7879 13.5858 19.4128C13.2107 19.0377 13 18.529 13 17.9986V14.9986C13 14.4681 13.2107 13.9594 13.5858 13.5844ZM15 14.4986H18C18.1326 14.4986 18.2598 14.5513 18.3536 14.645C18.4473 14.7388 18.5 14.866 18.5 14.9986V17.9986C18.5 18.1312 18.4473 18.2584 18.3536 18.3521C18.2598 18.4459 18.1326 18.4986 18 18.4986H15C14.8674 18.4986 14.7402 18.4459 14.6464 18.3521C14.5527 18.2584 14.5 18.1312 14.5 17.9986V14.9986C14.5 14.866 14.5527 14.7388 14.6464 14.645C14.7402 14.5513 14.8674 14.4986 15 14.4986Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.58579 13.5844C4.21071 13.9594 4 14.4681 4 14.9986V17.9986C4 18.529 4.21071 19.0377 4.58579 19.4128C4.96086 19.7879 5.46957 19.9986 6 19.9986H9C9.53043 19.9986 10.0391 19.7879 10.4142 19.4128C10.7893 19.0377 11 18.529 11 17.9986V14.9986C11 14.4681 10.7893 13.9594 10.4142 13.5844C10.0391 13.2093 9.53043 12.9986 9 12.9986H6C5.46957 12.9986 4.96086 13.2093 4.58579 13.5844ZM9 14.4986H6C5.86739 14.4986 5.74021 14.5513 5.64645 14.645C5.55268 14.7388 5.5 14.866 5.5 14.9986V17.9986C5.5 18.1312 5.55268 18.2584 5.64645 18.3521C5.74021 18.4459 5.86739 18.4986 6 18.4986H9C9.13261 18.4986 9.25979 18.4459 9.35355 18.3521C9.44732 18.2584 9.5 18.1312 9.5 17.9986V14.9986C9.5 14.866 9.44732 14.7388 9.35355 14.645C9.25979 14.5513 9.13261 14.4986 9 14.4986Z"
+      />
+    </svg>
+  );
+}

mailpoet/assets/js/src/automation/integrations/woocommerce/steps/buys-from-a-tag/index.tsx

@@ -0,0 +1,38 @@
+import { __ } from '@wordpress/i18n';
+import { StepType } from '../../../../editor/store';
+import { Edit } from './edit';
+import { Icon } from './icon';
+
+const keywords = [
+  // translators: noun, used as a search keyword for "Customer buys from a tag" trigger
+  __('tag', 'mailpoet'),
+  // translators: verb, used as a search keyword for "Customer buys from a tag" trigger
+  __('buy', 'mailpoet'),
+  // translators: verb, used as a search keyword for "Customer buys from a tag" trigger
+  __('purchase', 'mailpoet'),
+  // translators: noun, used as a search keyword for "Customer buys from a tag" trigger
+  __('ecommerce', 'mailpoet'),
+  // translators: noun, used as a search keyword for "Customer buys from a tag" trigger
+  __('woocommerce', 'mailpoet'),
+  // translators: noun, used as a search keyword for "Customer buys from a tag" trigger
+  __('product', 'mailpoet'),
+  // translators: noun, used as a search keyword for "Customer buys from a tag" trigger
+  __('order', 'mailpoet'),
+];
+export const step: StepType = {
+  key: 'woocommerce:buys-from-a-tag',
+  group: 'triggers',
+  title: () => __('Customer buys from a tag', 'mailpoet'),
+  description: () =>
+    __(
+      'Start the automation when a customer buys a product from a tag.',
+      'mailpoet',
+    ),
+
+  subtitle: () => __('Trigger', 'mailpoet'),
+  keywords,
+  foreground: '#2271b1',
+  background: '#f0f6fc',
+  icon: () => <Icon />,
+  edit: () => <Edit />,
+} as const;

mailpoet/assets/js/src/automation/integrations/woocommerce/steps/made-a-review/index.tsx

@@ -4,27 +4,27 @@ import { Icon } from './icon';
 import { PremiumModalForStepEdit } from '../../../../components/premium-modal-steps-edit';
 
 const keywords = [
-  // translators: noun, used as a search keyword for "Customer makes a review" trigger
+  // translators: noun, used as a search keyword for "Customer posts a review" trigger
   __('review', 'mailpoet'),
-  // translators: verb, used as a search keyword for "Customer makes a review" trigger
+  // translators: verb, used as a search keyword for "Customer posts a review" trigger
   __('buy', 'mailpoet'),
-  // translators: noun, used as a search keyword for "Customer makes a review" trigger
+  // translators: noun, used as a search keyword for "Customer posts a review" trigger
   __('comment', 'mailpoet'),
-  // translators: noun, used as a search keyword for "Customer makes a review" trigger
+  // translators: noun, used as a search keyword for "Customer posts a review" trigger
   __('ecommerce', 'mailpoet'),
-  // translators: noun, used as a search keyword for "Customer makes a review" trigger
+  // translators: noun, used as a search keyword for "Customer posts a review" trigger
   __('woocommerce', 'mailpoet'),
-  // translators: noun, used as a search keyword for "Customer makes a review" trigger
+  // translators: noun, used as a search keyword for "Customer posts a review" trigger
   __('product', 'mailpoet'),
-  // translators: noun, used as a search keyword for "Customer makes a review" trigger
+  // translators: noun, used as a search keyword for "Customer posts a review" trigger
   __('order', 'mailpoet'),
 ];
 export const step: StepType = {
   key: 'woocommerce:made-a-review',
   group: 'triggers',
-  title: () => __('Customer makes a review', 'mailpoet'),
+  title: () => __('Customer posts a review', 'mailpoet'),
   description: () =>
-    __('Start the automation when a customer makes a review.', 'mailpoet'),
+    __('Start the automation when a customer posts a review.', 'mailpoet'),
 
   subtitle: () => __('Trigger', 'mailpoet'),
   keywords,

mailpoet/assets/js/src/automation/templates/index.tsx

@@ -3,7 +3,7 @@ import { __ } from '@wordpress/i18n';
 import { registerTranslations } from 'common';
 import { automationTemplateCategories, automationTemplates } from './config';
 import { initializeApi } from '../api';
-import { TopBarWithBeamer } from '../../common/top-bar/top-bar';
+import { TopBarWithBoundary } from '../../common/top-bar/top-bar';
 import { FromScratchButton } from './components/from-scratch';
 import { BackButton, PageHeader } from '../../common/page-header';
 import { MailPoet } from '../../mailpoet';
@@ -50,7 +50,7 @@ function Templates(): JSX.Element {
 
   return (
     <div className="mailpoet-main-container">
-      <TopBarWithBeamer />
+      <TopBarWithBoundary />
       <PageHeader
         heading={__('Start with a template', 'mailpoet')}
         headingPrefix={

mailpoet/assets/js/src/automation/types/filters.ts

@@ -37,8 +37,9 @@ export type RenderStepFooterType = JSX.Element | null;
 
 // mailpoet.automation.render_step_separator
 export type RenderStepSeparatorType = (
-  step: Step,
+  previousStep: Step,
   index: number,
+  nextStep?: Step,
 ) => JSX.Element;
 
 // mailpoet.automation.editor.create_store

mailpoet/assets/js/src/common/listings/newsletter-stats/stats.tsx

@@ -1,4 +1,4 @@
-import { __, _x } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { PlacesType } from 'react-tooltip';
 import { Badge } from './badge';
 
@@ -10,47 +10,59 @@ type StatsBadgeProps = {
   isInverted?: boolean;
 };
 
-const stats = {
+const getStats = () => ({
   opened: {
     badgeRanges: [30, 10, 0],
     badgeTypes: ['excellent', 'good', 'critical'],
     tooltipText: {
-      excellent: _x('above 30%', 'Excellent open rate', 'mailpoet'),
-      good: _x('between 10 and 30%', 'Good open rate', 'mailpoet'),
-      critical: _x('under 10%', 'Critical open rate', 'mailpoet'),
+      // translators: Shows a percentage range, "above 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      excellent: sprintf(__('above %s%%', 'mailpoet'), 30),
+      // translators: Shows a percentage range, "between 10% and 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      good: sprintf(__('between %s%% and %s%%', 'mailpoet'), 10, 30),
+      // translators: Shows a percentage range, "below 10%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      critical: sprintf(__('below %s%%', 'mailpoet'), 10),
     },
   },
   clicked: {
     badgeRanges: [3, 1, 0],
     badgeTypes: ['excellent', 'good', 'critical'],
     tooltipText: {
-      excellent: _x('above 3%', 'Excellent click rate', 'mailpoet'),
-      good: _x('between 1 and 3%', 'Good click rate', 'mailpoet'),
-      critical: _x('under 1%', 'Critical click rate', 'mailpoet'),
+      // translators: Shows a percentage range, "above 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      excellent: sprintf(__('above %s%%', 'mailpoet'), 3),
+      // translators: Shows a percentage range, "between 10% and 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      good: sprintf(__('between %s%% and %s%%', 'mailpoet'), 1, 3),
+      // translators: Shows a percentage range, "below 10%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      critical: sprintf(__('below %s%%', 'mailpoet'), 1),
     },
   },
   bounced: {
     badgeRanges: [1.5, 0.5, 0],
     badgeTypes: ['critical', 'good', 'excellent'],
     tooltipText: {
-      excellent: _x('below 0.5%', 'Excellent bounce rate', 'mailpoet'),
-      good: _x('between 0.5% and 1.5%', 'Good bounce rate', 'mailpoet'),
-      critical: _x('above 1.5%', 'Critical bounce rate', 'mailpoet'),
+      // translators: Shows a percentage range, "below 10%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      excellent: sprintf(__('below %s%%', 'mailpoet'), 0.5),
+      // translators: Shows a percentage range, "between 10% and 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      good: sprintf(__('between %s%% and %s%%', 'mailpoet'), 0.5, 1.5),
+      // translators: Shows a percentage range, "above 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      critical: sprintf(__('above %s%%', 'mailpoet'), 1.5),
     },
   },
   unsubscribed: {
     badgeRanges: [0.7, 0.3, 0],
     badgeTypes: ['critical', 'good', 'excellent'],
     tooltipText: {
-      excellent: _x('Below 0.3%', 'Excellent unsubscribe rate', 'mailpoet'),
-      good: _x('between 0.3% and 0.7%', 'Good unsubscribe rate', 'mailpoet'),
-      critical: _x('above 0.7%', 'Critical unsubscribe rate', 'mailpoet'),
+      // translators: Shows a percentage range, "below 10%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      excellent: sprintf(__('below %s%%', 'mailpoet'), 0.3),
+      // translators: Shows a percentage range, "between 10% and 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      good: sprintf(__('between %s%% and %s%%', 'mailpoet'), 0.3, 0.7),
+      // translators: Shows a percentage range, "above 30%". Used in contexts like open, click, bounce, or unsubscribe rates.
+      critical: sprintf(__('above %s%%', 'mailpoet'), 0.7),
     },
   },
-};
+});
 
 export const getBadgeType = (statName, rate) => {
-  const stat = stats[statName] || null;
+  const stat = getStats()[statName] || null;
   if (!stat) {
     return null;
   }
@@ -91,7 +103,7 @@ function StatsBadge(props: StatsBadgeProps) {
     return null;
   }
 
-  const stat = stats[props.stat] || null;
+  const stat = getStats()[props.stat] || null;
   if (!stat) {
     return null;
   }

mailpoet/assets/js/src/common/premium-key/key-input.tsx

@@ -1,21 +1,40 @@
-import { Input } from 'common/index';
+import { _x } from '@wordpress/i18n';
+import { Button, Input } from 'common/index';
 import { useAction, useSelector } from 'settings/store/hooks';
+import { useState } from 'react';
 
 type KeyInputPropType = {
   placeholder?: string;
   isFullWidth?: boolean;
+  forceRevealed?: boolean;
 };
 
 export function KeyInput({
   placeholder,
   isFullWidth = false,
+  forceRevealed = false,
 }: KeyInputPropType) {
   const state = useSelector('getKeyActivationState')();
   const setState = useAction('updateKeyActivationState');
+  const [isRevealed, setIsRevealed] = useState(false);
+  const inputType = forceRevealed || isRevealed ? 'text' : 'password';
+  const toggleButton = !forceRevealed && (
+    <Button
+      className="mailpoet-premium-key-toggle"
+      variant="tertiary"
+      onClick={() => setIsRevealed(!isRevealed)}
+    >
+      {isRevealed
+        ? // translators: Used as a button to show or hide the premium key
+          _x('Hide', 'verb', 'mailpoet')
+        : // translators: Used as a button to show or hide the premium key
+          _x('Show', 'verb', 'mailpoet')}
+    </Button>
+  );
 
   return (
     <Input
-      type="text"
+      type={inputType}
       id="mailpoet_premium_key"
       name="premium[premium_key]"
       placeholder={placeholder}
@@ -29,6 +48,7 @@ export function KeyInput({
           key: event.target.value.trim() || null,
         })
       }
+      iconEnd={toggleButton}
     />
   );
 }

mailpoet/assets/js/src/common/top-bar/_stories/top-bar-no-children.tsx

@@ -1,4 +1,3 @@
-import { action } from '_storybook/action';
 import { TopBar } from '../top-bar';
 
 export default {
@@ -17,7 +16,7 @@ export function TopBarWithoutChildren() {
         left: '0px',
       }}
     >
-      <TopBar hasNews={false} onBeamerClick={action('beamer click')} />
+      <TopBar />
     </div>
   );
 }
@@ -34,7 +33,7 @@ export function TopBarWithoutChildrenWithNews() {
         left: '0px',
       }}
     >
-      <TopBar hasNews onBeamerClick={action('beamer click')} />
+      <TopBar />
     </div>
   );
 }

mailpoet/assets/js/src/common/top-bar/_stories/top-bar-with-children.tsx

@@ -1,4 +1,3 @@
-import { action } from '_storybook/action';
 import { TopBar } from '../top-bar';
 import { Button } from '../../button/button';
 
@@ -18,7 +17,7 @@ export function TopBarWithChildren() {
         left: '0px',
       }}
     >
-      <TopBar hasNews={false} onBeamerClick={action('beamer click')}>
+      <TopBar>
         <Button>Button</Button>
       </TopBar>
     </div>

mailpoet/assets/js/src/common/top-bar/beamer-icon.tsx

@@ -1,22 +0,0 @@
-export function BeamerIcon() {
-  return (
-    <svg
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M6 17V14.5002L6.00101 14.4997C7.10049 13.9995 7.90003 12.8998 8 11.7002V9.50016C8 7.96615 8.78223 6.62769 10.0309 5.95845C10.3288 5.79879 10.6533 5.67721 11 5.60016C10.9 5.50016 10.8 5.30016 10.8 5.10016C10.8 5.01146 10.8109 4.92493 10.8315 4.84189C10.95 4.36325 11.3887 4.00017 11.9 4.00017C11.9334 4.00017 11.9672 3.99696 12 4C12.0332 3.99688 12.0661 4.00004 12.1 4.00004C12.6113 4.00004 13.05 4.36313 13.1685 4.84177C13.1891 4.92481 13.2 5.01133 13.2 5.10004C13.2 5.30004 13.1 5.50004 13 5.60004C13.3467 5.67709 13.6712 5.79867 13.9691 5.95833C15.2178 6.62757 16 7.96602 16 9.50004V11.7C16.1 12.9 16.9 14.0002 18 14.5002V17.0002L6 17ZM17 16H7V15.148C8.2117 14.4742 8.98499 13.2218 9.09655 11.8831L9.1 9.50004C9.1 8.15301 9.99683 6.94434 11.3676 6.56356L11.7403 6.46006L12.0003 6.40228L12.2553 6.45896L12.6324 6.56368C14.0032 6.94446 14.9 8.15313 14.9 9.50016L14.9035 11.8832C15.015 13.2219 15.7883 14.4743 17 15.1481V16ZM12.0001 5.3601C12.221 5.3601 12.4001 5.18102 12.4001 4.9601C12.4001 4.73919 12.221 4.5601 12.0001 4.5601C11.7792 4.5601 11.6001 4.73919 11.6001 4.9601C11.6001 5.18102 11.7792 5.3601 12.0001 5.3601Z"
-        fill="#2C3338"
-      />
-      <path
-        d="M13.8303 19C14.0017 18.7054 14.1 18.3637 14.1 18L9.9 18.0002C9.9 18.3638 9.99834 18.7055 10.1697 19.0002C10.5169 19.5968 11.1636 20.0002 11.9 20.0002C11.9339 20.0002 11.9677 19.9993 12.0012 19.9976C12.034 19.9992 12.0669 20 12.1 20C12.8364 20 13.4831 19.5967 13.8303 19Z"
-        fill="#2C3338"
-      />
-    </svg>
-  );
-}

mailpoet/assets/js/src/common/top-bar/top-bar.tsx

@@ -1,62 +1,25 @@
 import { ReactNode } from 'react';
-import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
-import { withFeatureAnnouncement } from 'announcements/with-feature-announcement';
 import { HideScreenOptions } from 'common/hide-screen-options/hide-screen-options';
 import { MailPoetLogoResponsive } from './mailpoet-logo-responsive';
-import { BeamerIcon } from './beamer-icon';
 import { ScreenOptionsFix } from './screen-options-fix';
 import { withBoundary } from '../error-boundary';
-import { MailPoet } from '../../mailpoet';
 
 type Props = {
   children?: ReactNode;
-  hasNews?: boolean;
-  onBeamerClick?: () => void;
   logoWithLink?: boolean;
   hideScreenOptions?: boolean;
 };
 
 export function TopBar({
   children,
-  hasNews,
-  onBeamerClick,
   logoWithLink = true,
   hideScreenOptions = false,
 }: Props) {
-  const buttonClasses = classnames(
-    'mailpoet-top-bar-beamer',
-    hasNews ? 'mailpoet-top-bar-beamer-dot' : '',
-  );
   return (
     <div className="mailpoet-top-bar">
       <MailPoetLogoResponsive withLink={logoWithLink} />
       <div className="mailpoet-top-bar-children">{children}</div>
       <div className="mailpoet-flex-grow" />
-      {onBeamerClick && MailPoet.libs3rdPartyEnabled && (
-        <div>
-          <a
-            role="button"
-            onClick={onBeamerClick}
-            className={buttonClasses}
-            title={__('What’s new', 'mailpoet')}
-            tabIndex={0}
-            onKeyDown={(event) => {
-              if (
-                ['keydown', 'keypress'].includes(event.type) &&
-                ['Enter', ' '].includes(event.key)
-              ) {
-                event.preventDefault();
-                onBeamerClick();
-              }
-            }}
-          >
-            <BeamerIcon />
-            <span>{__('Updates', 'mailpoet')}</span>
-          </a>
-          <span id="beamer-empty-element" />
-        </div>
-      )}
       <ScreenOptionsFix />
       {hideScreenOptions && <HideScreenOptions />}
     </div>
@@ -64,4 +27,4 @@ export function TopBar({
 }
 
 TopBar.displayName = 'TopBar';
-export const TopBarWithBeamer = withFeatureAnnouncement(withBoundary(TopBar));
+export const TopBarWithBoundary = withBoundary(TopBar);

mailpoet/assets/js/src/email-editor/engine/blocks/core/button.ts

@@ -1,21 +0,0 @@
-import { addFilter } from '@wordpress/hooks';
-import { Block } from '@wordpress/blocks';
-
-/**
- * Disables Styles for button
- * Currently we are not able to read these styles in renderer
- */
-function enhanceButtonBlock() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/change-button',
-    (settings: Block, name) => {
-      if (name === 'core/button') {
-        return { ...settings, styles: [] };
-      }
-      return settings;
-    },
-  );
-}
-
-export { enhanceButtonBlock };

mailpoet/assets/js/src/email-editor/engine/blocks/core/buttons.ts

@@ -1,28 +0,0 @@
-import { addFilter } from '@wordpress/hooks';
-import { Block } from '@wordpress/blocks';
-
-/**
- * Switch layout to reduced flex email layout
- * Email render engine can't handle full flex layout se we need to switch to reduced flex layout
- */
-function enhanceButtonsBlock() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/change-buttons',
-    (settings: Block, name) => {
-      if (name === 'core/buttons') {
-        return {
-          ...settings,
-          supports: {
-            ...settings.supports,
-            layout: false, // disable block editor's layouts
-            __experimentalEmailFlexLayout: true, // enable MailPoet's reduced flex email layout
-          },
-        };
-      }
-      return settings;
-    },
-  );
-}
-
-export { enhanceButtonsBlock };

mailpoet/assets/js/src/email-editor/engine/blocks/core/column.ts

@@ -1,25 +0,0 @@
-import { addFilter } from '@wordpress/hooks';
-import { Block } from '@wordpress/blocks';
-
-function enhanceColumnBlock() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/change-column',
-    (settings: Block, name) => {
-      if (name === 'core/column') {
-        return {
-          ...settings,
-          supports: {
-            ...settings.supports,
-            background: {
-              backgroundImage: true,
-            },
-          },
-        };
-      }
-      return settings;
-    },
-  );
-}
-
-export { enhanceColumnBlock };

mailpoet/assets/js/src/email-editor/engine/blocks/core/columns.tsx

@@ -1,87 +0,0 @@
-import { InspectorControls } from '@wordpress/block-editor';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { Block } from '@wordpress/blocks';
-import { addFilter } from '@wordpress/hooks';
-
-const columnsEditCallback = createHigherOrderComponent(
-  (BlockEdit) =>
-    function alterBlocksEdits(props) {
-      if (props.name !== 'core/columns') {
-        return <BlockEdit {...props} />;
-      }
-      // CSS sets opacity by the class is-disabled by the toggle component from the Gutenberg package
-      // To deactivating the input we use CSS pointer-events because we want to avoid JavaScript hacks
-      const deactivateToggleCss = `
-      .components-panel__body .components-toggle-control .components-form-toggle { opacity: 0.3; }
-      .components-panel__body .components-toggle-control .components-form-toggle__input { pointer-events: none; }
-      .components-panel__body .components-toggle-control label { pointer-events: none; }
-    `;
-
-      return (
-        <>
-          <BlockEdit {...props} />
-          <InspectorControls>
-            <style>{deactivateToggleCss}</style>
-          </InspectorControls>
-        </>
-      );
-    },
-  'columnsEditCallback',
-);
-
-function deactivateStackOnMobile() {
-  addFilter(
-    'editor.BlockEdit',
-    'mailpoet-email-editor/deactivate-stack-on-mobile',
-    columnsEditCallback,
-  );
-}
-
-/**
- * Disables layout support for columns and column blocks because
- * the default layout `flex` add gaps between columns that it is not possible to support in emails.
- */
-function disableColumnsLayout() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/disable-columns-layout',
-    (settings, name) => {
-      if (name === 'core/columns' || name === 'core/column') {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return {
-          ...settings,
-          supports: {
-            ...settings.supports,
-            layout: false,
-          },
-        };
-      }
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      return settings;
-    },
-  );
-}
-
-function enhanceColumnsBlock() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/change-columns',
-    (settings: Block, name) => {
-      if (name === 'core/columns') {
-        return {
-          ...settings,
-          supports: {
-            ...settings.supports,
-            background: {
-              backgroundImage: true,
-            },
-          },
-        };
-      }
-      return settings;
-    },
-  );
-}
-
-export { deactivateStackOnMobile, disableColumnsLayout, enhanceColumnsBlock };

mailpoet/assets/js/src/email-editor/engine/blocks/core/group.tsx

@@ -1,26 +0,0 @@
-import { addFilter } from '@wordpress/hooks';
-
-/**
- * Disables layout support for group blocks because the default layout `flex` add gaps between columns that it is not possible to support in emails.
- */
-function disableGroupVariations() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/disable-group-variations',
-    (settings, name) => {
-      if (name === 'core/group') {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        return {
-          ...settings,
-          variations: settings.variations.filter(
-            (variation) => variation.name === 'group',
-          ),
-        };
-      }
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-      return settings;
-    },
-  );
-}
-
-export { disableGroupVariations };

mailpoet/assets/js/src/email-editor/engine/blocks/core/image.tsx

@@ -1,61 +0,0 @@
-import { InspectorControls } from '@wordpress/block-editor';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import { addFilter } from '@wordpress/hooks';
-import { Block } from '@wordpress/blocks';
-
-const imageEditCallback = createHigherOrderComponent(
-  (BlockEdit) =>
-    function alterBlocksEdits(props) {
-      if (props.name !== 'core/image') {
-        return <BlockEdit {...props} />;
-      }
-      // Because we cannot support displaying the modal with image after clicking in the email we have to hide the toggle
-      const deactivateToggleCss = `
-        .components-tools-panel .components-toggle-control { display: none; }
-      `;
-
-      return (
-        <>
-          <BlockEdit {...props} />
-          <InspectorControls>
-            <style>{deactivateToggleCss}</style>
-          </InspectorControls>
-        </>
-      );
-    },
-  'imageEditCallback',
-);
-
-/**
- * Because CSS property filter is not supported in almost 50% of email clients we have to disable it
- */
-function disableImageFilter() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/deactivate-image-filter',
-    (settings: Block, name) => {
-      if (name === 'core/image') {
-        return {
-          ...settings,
-          supports: {
-            ...settings.supports,
-            filter: {
-              duetone: false,
-            },
-          },
-        };
-      }
-      return settings;
-    },
-  );
-}
-
-function hideExpandOnClick() {
-  addFilter(
-    'editor.BlockEdit',
-    'mailpoet-email-editor/hide-expand-on-click',
-    imageEditCallback,
-  );
-}
-
-export { hideExpandOnClick, disableImageFilter };

mailpoet/assets/js/src/email-editor/engine/blocks/core/post-content.tsx

@@ -1,58 +0,0 @@
-import { addFilter } from '@wordpress/hooks';
-import { Block } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { useBlockProps } from '@wordpress/block-editor';
-
-function Placeholder({ layoutClassNames }) {
-  const blockProps = useBlockProps({ className: layoutClassNames });
-  return (
-    <div {...blockProps}>
-      <p>{__('This is the Content block.', 'mailpoet')}</p>
-      <p>
-        {__(
-          'It will display all the blocks in the email content, which might be only simple text paragraphs. You can enrich your message with images, incorporate data through tables, explore different layout designs with columns, or use any other block type.',
-          'mailpoet',
-        )}
-      </p>
-    </div>
-  );
-}
-
-// Curried function to add a custom placeholder to the post content block, or just use the original Edit component.
-function PostContentEdit(OriginalEditComponent) {
-  return function Edit({
-    context,
-    __unstableLayoutClassNames: layoutClassNames,
-  }) {
-    const { postId: contextPostId, postType: contextPostType } = context;
-    const hasContent = contextPostId && contextPostType;
-
-    if (hasContent) {
-      return (
-        <OriginalEditComponent
-          {...{ context, __unstableLayoutClassNames: layoutClassNames }}
-        />
-      );
-    }
-
-    return <Placeholder layoutClassNames={layoutClassNames} />;
-  };
-}
-
-function enhancePostContentBlock() {
-  addFilter(
-    'blocks.registerBlockType',
-    'mailpoet-email-editor/change-post-content',
-    (settings: Block, name) => {
-      if (name === 'core/post-content') {
-        return {
-          ...settings,
-          edit: PostContentEdit(settings.edit),
-        };
-      }
-      return settings;
-    },
-  );
-}
-
-export { enhancePostContentBlock };

mailpoet/assets/js/src/email-editor/engine/blocks/core/rich-text.ts

@@ -1,18 +0,0 @@
-import { unregisterFormatType } from '@wordpress/rich-text';
-
-/**
- * Disable Rich text formats we currently cannot support
- * Note: This will remove its support for all blocks in the email editor e.g., p, h1,h2, etc
- */
-function disableCertainRichTextFormats() {
-  // remove support for inline image - We can't use it
-  unregisterFormatType('core/image');
-
-  // remove support for Inline code - Not well formatted
-  unregisterFormatType('core/code');
-
-  // remove support for Language - Not supported for now
-  unregisterFormatType('core/language');
-}
-
-export { disableCertainRichTextFormats };

mailpoet/assets/js/src/email-editor/engine/blocks/index.ts

@@ -1,30 +0,0 @@
-import { registerCoreBlocks } from '@wordpress/block-library';
-import { enhanceColumnBlock } from './core/column';
-import {
-  disableColumnsLayout,
-  deactivateStackOnMobile,
-  enhanceColumnsBlock,
-} from './core/columns';
-import { enhancePostContentBlock } from './core/post-content';
-import { disableGroupVariations } from './core/group';
-import { disableImageFilter, hideExpandOnClick } from './core/image';
-import { disableCertainRichTextFormats } from './core/rich-text';
-import { enhanceButtonBlock } from './core/button';
-import { enhanceButtonsBlock } from './core/buttons';
-import { alterSupportConfiguration } from './core/general-block-support';
-
-export function initBlocks() {
-  deactivateStackOnMobile();
-  hideExpandOnClick();
-  disableImageFilter();
-  disableCertainRichTextFormats();
-  disableColumnsLayout();
-  disableGroupVariations();
-  enhanceButtonBlock();
-  enhanceButtonsBlock();
-  enhanceColumnBlock();
-  enhanceColumnsBlock();
-  enhancePostContentBlock();
-  alterSupportConfiguration();
-  registerCoreBlocks();
-}

mailpoet/assets/js/src/email-editor/engine/components/autosave/autosave-monitor.tsx

@@ -1,39 +0,0 @@
-import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { storeName } from '../../store';
-
-/**
- * This component is simplified version of the original one from @wordpress/editor package.
- * The original component can be found here: https://github.com/WordPress/gutenberg/blob/46446b853d740c309c0675c7bf2ca4170a618c42/packages/editor/src/components/autosave-monitor/index.js
- * The main reason for the own solution is that the original component needs to initialize the @wordpress/editor store.
- * We could use the action `setEditedPost` from the editor package, but it is only in a newer version of the editor package.
- */
-export function AutosaveMonitor() {
-  const { hasEdits, autosaveInterval } = useSelect(
-    (select) => ({
-      hasEdits: select(storeName).hasEdits(),
-      autosaveInterval: select(storeName).getAutosaveInterval(),
-    }),
-    [],
-  );
-
-  const { saveEditedEmail } = useDispatch(storeName);
-
-  useEffect(() => {
-    let autosaveTimer: NodeJS.Timeout | undefined;
-
-    if (hasEdits && autosaveInterval > 0) {
-      autosaveTimer = setTimeout(() => {
-        void saveEditedEmail();
-      }, autosaveInterval * 1000);
-    }
-
-    return () => {
-      if (autosaveTimer) {
-        clearTimeout(autosaveTimer);
-      }
-    };
-  }, [hasEdits, autosaveInterval, saveEditedEmail]);
-
-  return null;
-}

mailpoet/assets/js/src/email-editor/engine/components/block-editor/editor.tsx

@@ -1,105 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-
-import {
-  ErrorBoundary,
-  PostLockedModal,
-  // @ts-expect-error No types for this exist yet.
-  privateApis as editorPrivateApis,
-} from '@wordpress/editor';
-import { useMemo } from '@wordpress/element';
-import { SlotFillProvider, Spinner } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { storeName } from '../../store';
-
-/**
- * Internal dependencies
- */
-import { Layout } from './layout';
-import { unlock } from '../../../lock-unlock';
-import { useNavigateToEntityRecord } from '../../hooks/use-navigate-to-entity-record';
-
-const { ExperimentalEditorProvider } = unlock(editorPrivateApis);
-
-export function InnerEditor({
-  postId: initialPostId,
-  postType: initialPostType,
-  settings,
-  initialEdits,
-  ...props
-}) {
-  const {
-    currentPost,
-    onNavigateToEntityRecord,
-    onNavigateToPreviousEntityRecord,
-  } = useNavigateToEntityRecord(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    initialPostId,
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    initialPostType,
-    'post-only',
-  );
-
-  const { post, template } = useSelect(
-    (select) => {
-      const { getEntityRecord } = select(coreStore);
-      const { getEditedPostTemplate } = select(storeName);
-      const postObject = getEntityRecord(
-        'postType',
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        currentPost.postType,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        currentPost.postId,
-      );
-      return {
-        template:
-          currentPost.postType !== 'wp_template'
-            ? getEditedPostTemplate()
-            : null,
-        post: postObject,
-      };
-    },
-    [currentPost.postType, currentPost.postId],
-  );
-
-  const editorSettings = useMemo(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-    () => ({
-      ...settings,
-      onNavigateToEntityRecord,
-      onNavigateToPreviousEntityRecord,
-      defaultRenderingMode: 'template-locked',
-      supportsTemplateMode: true,
-    }),
-    [settings, onNavigateToEntityRecord, onNavigateToPreviousEntityRecord],
-  );
-
-  if (!post || (currentPost.postType !== 'wp_template' && !template)) {
-    return (
-      <div className="spinner-container">
-        <Spinner style={{ width: '80px', height: '80px' }} />
-      </div>
-    );
-  }
-
-  return (
-    <SlotFillProvider>
-      <ExperimentalEditorProvider
-        settings={editorSettings}
-        post={post}
-        initialEdits={initialEdits}
-        useSubRegistry={false}
-        __unstableTemplate={template}
-        {...props}
-      >
-        {/* @ts-expect-error ErrorBoundary type is incorrect there is no onError */}
-        <ErrorBoundary>
-          <Layout />
-          <PostLockedModal />
-        </ErrorBoundary>
-      </ExperimentalEditorProvider>
-    </SlotFillProvider>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/block-editor/index.scss

@@ -1,185 +0,0 @@
-@import '~@wordpress/base-styles/colors';
-
-#mailpoet-email-editor {
-  .editor-header__toolbar {
-    flex-grow: 1;
-  }
-  .editor-header__center {
-    flex-grow: 3;
-  }
-}
-
-// Specific styles for the component EmailTypeInfo
-// Styles are based on the Block Card component from Gutenberg block editor
-.mailpoet-email-sidebar__email-type-info {
-  .components-panel__row {
-    align-items: flex-start;
-  }
-
-  .mailpoet-email-type-info__icon {
-    flex: 0 0 24px;
-    margin-left: 0;
-    margin-right: 12px;
-  }
-
-  .mailpoet-email-type-info__content {
-    flex-grow: 1;
-    margin-bottom: 4px;
-
-    h2 {
-      font-size: 13px;
-      line-height: 24px;
-      margin: 0 0 4px;
-    }
-
-    span {
-      font-size: 13px;
-    }
-  }
-}
-
-.mailpoet-email-editor__settings-panel {
-  .mailpoet-settings-panel__subject .components-base-control__label {
-    width: 100%;
-
-    .components-external-link {
-      float: right;
-    }
-  }
-
-  .mailpoet-settings-panel__help {
-    margin-bottom: 20px;
-
-    .components-text {
-      color: #757575;
-    }
-  }
-
-  .mailpoet-settings-panel__preview-text .components-base-control__label {
-    width: 100%;
-  }
-
-  .mailpoet-settings-panel__preview-text-length {
-    color: $black;
-    display: inline-block;
-    float: right;
-    padding: 3px;
-  }
-
-  .mailpoet-settings-panel__preview-text-length-warning {
-    color: $alert-yellow;
-  }
-
-  .mailpoet-settings-panel__preview-text-length-error {
-    color: $alert-red;
-  }
-}
-
-.edit-post-visual-editor {
-  line-height: 1.4; /* Recommended line-height that is also used in the email editor */
-  margin: 0;
-  min-height: 100%;
-  padding: 0;
-  -webkit-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
-  -ms-text-size-adjust: 100%; /* From MJMJ - Automatic test adjustment on mobile max to 100% */
-  word-spacing: normal;
-}
-
-.visual-editor__email_layout_wrapper {
-  height: 100%;
-  margin: 0 auto;
-  padding: 0;
-  width: 100%;
-}
-
-.visual-editor__email_content_wrapper {
-  display: flex;
-  height: 100%;
-  width: 100%;
-
-  > div {
-    width: 100%;
-  }
-
-  // Set default padding-left to have consistent default look in editor and in email
-  // This also overrides the default values in browsers for padding-inline-start
-  ul,
-  ol,
-  ul.has-background,
-  ol.has-background {
-    padding-left: 40px;
-  }
-
-  // Override default button border radius which is set in core to 9999px
-  .wp-block-button__link {
-    border-radius: 0;
-  }
-
-  .is-mobile-preview {
-    .wp-block-columns {
-      display: flex;
-      flex-direction: column;
-
-      .wp-block-column {
-        box-sizing: border-box;
-        // override flex-basis set in style attribute to fix the height of the column in mobile preview. Blocks overriding is as a part of style.css in blocks-library
-        flex-basis: auto !important;
-      }
-    }
-  }
-
-  // Fix for mobile preview height
-  &.is-mobile-preview {
-    > div {
-      display: block !important;
-    }
-    .editor-styles-wrapper {
-      height: auto !important;
-    }
-  }
-}
-
-.has-global-padding .wp-block-post-content > .alignfull {
-  margin-left: -20px;
-  margin-right: -20px;
-}
-
-// For the WYSIWYG experience we don't want to display any margins between blocks in the editor
-.wp-block {
-  clear: both; // for ensuring that floated elements (images) are cleared
-}
-
-// Resetting the margin for images in the editor to avoid unexpected spacing
-.editor-styles-wrapper .is-layout-constrained .wp-block-image {
-  figcaption {
-    margin: 0;
-  }
-
-  &.alignleft,
-  &.alignright {
-    margin-inline-end: 0;
-    margin-inline-start: 0;
-    text-align: center;
-  }
-  &.aligncenter {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-.editor-styles-wrapper {
-  .wp-block-columns:not(.is-not-stacked-on-mobile)
-    > .wp-block-column[style*='flex-basis'] {
-    box-sizing: border-box;
-  }
-}
-
-// Content does not need margin. The rendered template does not add margins to match.
-.editor-styles-wrapper .wp-block-post-content {
-  margin: 0;
-}
-
-// Hide the advanced settings in the sidebar. This panel is not used in the email editor at this moment.
-.block-editor-block-inspector__advanced {
-  display: none;
-}

mailpoet/assets/js/src/email-editor/engine/components/block-editor/layout.tsx

@@ -1,151 +0,0 @@
-import {
-  // @ts-expect-error No types for this exist yet.
-  __experimentalUseResizeCanvas as useResizeCanvas,
-  BlockSelectionClearer,
-} from '@wordpress/block-editor';
-
-import {
-  UnsavedChangesWarning,
-  // @ts-expect-error No types for this exist yet.
-  privateApis as editorPrivateApis,
-  store as editorStore,
-} from '@wordpress/editor';
-import { uploadMedia } from '@wordpress/media-utils';
-import classnames from 'classnames';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-  ComplementaryArea,
-  FullscreenMode,
-  InterfaceSkeleton,
-} from '@wordpress/interface';
-
-import './index.scss';
-import { store as coreStore } from '@wordpress/core-data';
-import { storeName } from '../../store';
-import { useEmailCss } from '../../hooks';
-import { AutosaveMonitor } from '../autosave';
-import { BlockCompatibilityWarnings, Sidebar } from '../sidebar';
-import { Header } from '../header';
-import { ListviewSidebar } from '../listview-sidebar/listview-sidebar';
-import { InserterSidebar } from '../inserter-sidebar/inserter-sidebar';
-import { EditorNotices, SentEmailNotice } from '../notices';
-import { StylesSidebar } from '../styles-sidebar';
-import { unlock } from '../../../lock-unlock';
-import { TemplateSelection } from '../template-select';
-
-const { EditorCanvas } = unlock(editorPrivateApis);
-
-export function Layout() {
-  const {
-    isFullscreenActive,
-    isSidebarOpened,
-    initialSettings,
-    previewDeviceType,
-    isInserterSidebarOpened,
-    isListviewSidebarOpened,
-    canUserEditMedia,
-    hasFixedToolbar,
-    focusMode,
-    styles,
-    isEditingTemplate,
-  } = useSelect(
-    (select) => ({
-      isFullscreenActive: select(storeName).isFeatureActive('fullscreenMode'),
-      isSidebarOpened: select(storeName).isSidebarOpened(),
-      isInserterSidebarOpened: select(storeName).isInserterSidebarOpened(),
-      isListviewSidebarOpened: select(storeName).isListviewSidebarOpened(),
-      initialSettings: select(storeName).getInitialEditorSettings(),
-      previewDeviceType: select(storeName).getPreviewState().deviceType,
-      canUserEditMedia: select(coreStore).canUser('create', 'media'),
-      hasFixedToolbar: select(storeName).isFeatureActive('fixedToolbar'),
-      focusMode: select(storeName).isFeatureActive('focusMode'),
-      styles: select(storeName).getStyles(),
-      isEditingTemplate:
-        select(editorStore).getCurrentPostType() === 'wp_template',
-    }),
-    [],
-  );
-
-  const { toggleInserterSidebar } = useDispatch(storeName);
-
-  const [emailCss] = useEmailCss();
-  const className = classnames('edit-post-layout', {
-    'is-sidebar-opened': isSidebarOpened,
-  });
-
-  const contentWrapperStyles = useResizeCanvas(previewDeviceType);
-
-  if (isEditingTemplate) {
-    contentWrapperStyles.height = '100%';
-  }
-
-  // Styles for the canvas. Based on template-canvas.php, this equates to the body element.
-  const canvasStyles = {
-    background:
-      previewDeviceType === 'Desktop' ? styles.color.background : 'transparent',
-    fontFamily: styles.typography.fontFamily,
-    transition: 'all 0.3s ease 0s',
-  };
-
-  const settings = {
-    ...initialSettings,
-    mediaUpload: canUserEditMedia ? uploadMedia : null,
-    hasFixedToolbar,
-    focusMode,
-  };
-
-  return (
-    <>
-      <FullscreenMode isActive={isFullscreenActive} />
-      <UnsavedChangesWarning />
-      <AutosaveMonitor />
-      <SentEmailNotice />
-      <Sidebar />
-      <StylesSidebar />
-      <TemplateSelection />
-      <InterfaceSkeleton
-        className={className}
-        header={<Header />}
-        editorNotices={<EditorNotices />}
-        content={
-          <>
-            <EditorNotices />
-            <BlockSelectionClearer
-              className="edit-post-visual-editor"
-              style={canvasStyles}
-              onClick={() => {
-                // Clear inserter sidebar when canvas is clicked.
-                if (isInserterSidebarOpened) {
-                  void toggleInserterSidebar();
-                }
-              }}
-            >
-              <div
-                className={classnames('visual-editor__email_content_wrapper', {
-                  'is-mobile-preview': previewDeviceType === 'Mobile',
-                  'is-desktop-preview': previewDeviceType === 'Desktop',
-                })}
-                style={contentWrapperStyles}
-              >
-                <EditorCanvas
-                  disableIframe={false}
-                  styles={[...settings.styles, ...emailCss]}
-                  autoFocus
-                  className="has-global-padding"
-                  renderAppender={false} // With false the appender is rendered in the template mode
-                />
-              </div>
-            </BlockSelectionClearer>
-          </>
-        }
-        sidebar={<ComplementaryArea.Slot scope={storeName} />}
-        secondarySidebar={
-          (isInserterSidebarOpened && <InserterSidebar />) ||
-          (isListviewSidebarOpened && <ListviewSidebar />)
-        }
-      />
-      {/* Rendering Warning component here ensures that the warning is displayed under the border configuration. */}
-      <BlockCompatibilityWarnings />
-    </>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/header/campaign-name.tsx

@@ -1,85 +0,0 @@
-import { useRef } from '@wordpress/element';
-import {
-  Button,
-  Dropdown,
-  VisuallyHidden,
-  __experimentalText as Text,
-  TextControl,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { chevronDown } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
-import { storeName } from '../../store';
-
-// @see https://github.com/WordPress/gutenberg/blob/5e0ffdbc36cb2e967dfa6a6b812a10a2e56a598f/packages/edit-post/src/components/header/document-actions/index.js
-
-export function CampaignName() {
-  const { showIconLabels } = useSelect(
-    (select) => ({
-      showIconLabels: select(storeName).isFeatureActive('showIconLabels'),
-      postId: select(storeName).getEmailPostId(),
-    }),
-    [],
-  );
-
-  const [emailTitle = '', setTitle] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'title',
-  );
-
-  const titleRef = useRef(null);
-  return (
-    <div ref={titleRef} className="mailpoet-email-editor-campaign-name">
-      <Dropdown
-        popoverProps={{
-          placement: 'bottom',
-          anchor: titleRef.current,
-        }}
-        contentClassName="mailpoet-email-editor-campaign-name__dropdown"
-        renderToggle={({ isOpen, onToggle }) => (
-          <>
-            <Button
-              onClick={onToggle}
-              className="mailpoet-email-campaign-name__link"
-            >
-              <Text size="body" as="h1">
-                <VisuallyHidden as="span">
-                  {__('Editing email:', 'mailpoet')}
-                </VisuallyHidden>
-                {emailTitle}
-              </Text>
-            </Button>
-            <Button
-              className="mailpoet-email-campaign-name__toggle"
-              icon={chevronDown}
-              aria-expanded={isOpen}
-              aria-haspopup="true"
-              onClick={onToggle}
-              label={__('Change campaign name', 'mailpoet')}
-            >
-              {showIconLabels && __('Rename', 'mailpoet')}
-            </Button>
-          </>
-        )}
-        renderContent={() => (
-          <div className="mailpoet-email-editor-email-title-edit">
-            <TextControl
-              label={__('Campaign name', 'mailpoet')}
-              value={emailTitle}
-              onChange={(newTitle) => {
-                setTitle(newTitle);
-              }}
-              name="campaign_name"
-              help={__(
-                `Name your email campaign to indicate its purpose. This would only be visible to you and not shown to your subscribers.`,
-                'mailpoet',
-              )}
-            />
-          </div>
-        )}
-      />
-    </div>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/header/header.tsx

@@ -1,192 +0,0 @@
-import { useRef, useState } from '@wordpress/element';
-import { PinnedItems } from '@wordpress/interface';
-import { Button, ToolbarItem as WpToolbarItem } from '@wordpress/components';
-import {
-  NavigableToolbar,
-  BlockToolbar as WPBlockToolbar,
-  store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreDataStore } from '@wordpress/core-data';
-// @ts-expect-error DocumentBar types are not available
-import { DocumentBar, store as editorStore } from '@wordpress/editor';
-import { store as preferencesStore } from '@wordpress/preferences';
-import { __ } from '@wordpress/i18n';
-import { plus, listView, undo, redo, next, previous } from '@wordpress/icons';
-import classnames from 'classnames';
-import { storeName } from '../../store';
-import { MoreMenu } from './more-menu';
-import { PreviewDropdown } from '../preview';
-import { SaveButton } from './save-button';
-import { CampaignName } from './campaign-name';
-import { SendButton } from './send-button';
-
-import { unlock } from '../../../lock-unlock';
-
-// Build type for ToolbarItem contains only "as" and "children" properties but it takes all props from
-// component passed to "as" property (in this case Button). So as fix for TS errors we need to pass all props from Button to ToolbarItem.
-// We should be able to remove this fix when ToolbarItem will be fixed in Gutenberg.
-const ToolbarItem = WpToolbarItem as React.ForwardRefExoticComponent<
-  React.ComponentProps<typeof WpToolbarItem> &
-    React.ComponentProps<typeof Button>
->;
-
-// Definition of BlockToolbar in currently installed Gutenberg packages (wp-6.4) is missing hideDragHandle prop
-// After updating to newer version of Gutenberg we should be able to remove this fix
-const BlockToolbar = WPBlockToolbar as React.FC<
-  React.ComponentProps<typeof WPBlockToolbar> & {
-    hideDragHandle?: boolean;
-  }
->;
-
-export function Header() {
-  const inserterButton = useRef();
-  const listviewButton = useRef();
-  const undoButton = useRef();
-  const redoButton = useRef();
-
-  const [isBlockToolsCollapsed, setIsBlockToolsCollapsed] = useState(false);
-
-  const { toggleInserterSidebar, toggleListviewSidebar } =
-    useDispatch(storeName);
-  const { undo: undoAction, redo: redoAction } = useDispatch(coreDataStore);
-  const {
-    isInserterSidebarOpened,
-    isListviewSidebarOpened,
-    isFixedToolbarActive,
-    isBlockSelected,
-    hasUndo,
-    hasRedo,
-    hasDocumentNavigationHistory,
-  } = useSelect((select) => {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { getEditorSettings: _getEditorSettings } = unlock(
-      select(editorStore),
-    );
-    const editorSettings = _getEditorSettings();
-
-    return {
-      isInserterSidebarOpened: select(storeName).isInserterSidebarOpened(),
-      isListviewSidebarOpened: select(storeName).isListviewSidebarOpened(),
-      isFixedToolbarActive: select(preferencesStore).get(
-        'core',
-        'fixedToolbar',
-      ),
-      isBlockSelected: !!select(blockEditorStore).getBlockSelectionStart(),
-      hasUndo: select(coreDataStore).hasUndo(),
-      hasRedo: select(coreDataStore).hasRedo(),
-      hasDocumentNavigationHistory:
-        !!editorSettings.onNavigateToPreviousEntityRecord,
-    };
-  }, []);
-
-  const preventDefault = (event) => {
-    event.preventDefault();
-  };
-
-  const shortLabelInserter = !isInserterSidebarOpened
-    ? __('Add', 'mailpoet')
-    : __('Close', 'mailpoet');
-
-  return (
-    <div className="editor-header edit-post-header">
-      <div className="editor-header__toolbar edit-post-header__toolbar">
-        <NavigableToolbar
-          className="editor-header__toolbar edit-post-header-toolbar is-unstyled editor-document-tools"
-          aria-label={__('Email document tools', 'mailpoet')}
-        >
-          <div className="editor-document-tools__left">
-            <ToolbarItem
-              ref={inserterButton}
-              as={Button}
-              className="editor-header-toolbar__inserter-toggle edit-post-header-toolbar__inserter-toggle"
-              variant="primary"
-              isPressed={isInserterSidebarOpened}
-              onMouseDown={preventDefault}
-              onClick={toggleInserterSidebar}
-              disabled={false}
-              icon={plus}
-              label={shortLabelInserter}
-              showTooltip
-              aria-expanded={isInserterSidebarOpened}
-            />
-            <ToolbarItem
-              ref={undoButton}
-              as={Button}
-              className="editor-history__undo"
-              isPressed={false}
-              onMouseDown={preventDefault}
-              onClick={undoAction}
-              disabled={!hasUndo}
-              icon={undo}
-              label={__('Undo', 'mailpoet')}
-              showTooltip
-            />
-            <ToolbarItem
-              ref={redoButton}
-              as={Button}
-              className="editor-history__redo"
-              isPressed={false}
-              onMouseDown={preventDefault}
-              onClick={redoAction}
-              disabled={!hasRedo}
-              icon={redo}
-              label={__('Redo', 'mailpoet')}
-              showTooltip
-            />
-            <ToolbarItem
-              ref={listviewButton}
-              as={Button}
-              className="editor-header-toolbar__document-overview-toggle edit-post-header-toolbar__document-overview-toggle"
-              isPressed={isListviewSidebarOpened}
-              onMouseDown={preventDefault}
-              onClick={toggleListviewSidebar}
-              disabled={false}
-              icon={listView}
-              label={__('List view', 'mailpoet')}
-              showTooltip
-              aria-expanded={isInserterSidebarOpened}
-            />
-          </div>
-        </NavigableToolbar>
-        {isFixedToolbarActive && isBlockSelected && (
-          <>
-            <div
-              className={classnames('selected-block-tools-wrapper', {
-                'is-collapsed': isBlockToolsCollapsed,
-              })}
-            >
-              <BlockToolbar hideDragHandle />
-            </div>
-            <Button
-              className="editor-header__block-tools-toggle edit-post-header__block-tools-toggle"
-              icon={isBlockToolsCollapsed ? next : previous}
-              onClick={() => {
-                setIsBlockToolsCollapsed((collapsed) => !collapsed);
-              }}
-              label={
-                isBlockToolsCollapsed
-                  ? __('Show block tools', 'mailpoet')
-                  : __('Hide block tools', 'mailpoet')
-              }
-            />
-          </>
-        )}
-        {(!isFixedToolbarActive ||
-          !isBlockSelected ||
-          isBlockToolsCollapsed) && (
-          <div className="editor-header__center edit-post-header__center">
-            {hasDocumentNavigationHistory ? <DocumentBar /> : <CampaignName />}
-          </div>
-        )}
-      </div>
-      <div className="editor-header__settings edit-post-header__settings">
-        <SaveButton />
-        <PreviewDropdown />
-        <SendButton />
-        <PinnedItems.Slot scope={storeName} />
-        <MoreMenu />
-      </div>
-    </div>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/header/index.scss

@@ -1,41 +0,0 @@
-// Document actions - Component in header for displaying email/campaign title edit popup
-.mailpoet-email-editor-campaign-name {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  min-width: 0;
-
-  .components-dropdown {
-    display: inline-flex;
-  }
-
-  .components-button {
-    min-width: 0;
-    padding: 0;
-  }
-
-  .mailpoet-email-campaign-name__link {
-    display: inline-flex;
-    height: fit-content;
-    margin-right: 10px;
-    margin-top: 10px;
-  }
-}
-
-// Document actions - Popup for editing email/campaign title
-.mailpoet-email-editor-campaign-name__dropdown {
-  .components-popover__content {
-    min-width: 280px;
-    padding: 0;
-  }
-
-  .mailpoet-email-editor-email-title-edit {
-    padding: 16px;
-  }
-}
-.mailpoet-email-editor-save-button__dropdown {
-  .components-popover__content {
-    min-width: 280px;
-  }
-}

mailpoet/assets/js/src/email-editor/engine/components/header/more-menu.tsx

@@ -1,113 +0,0 @@
-import { MenuGroup, MenuItem, DropdownMenu } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-import { displayShortcut } from '@wordpress/keycodes';
-import { moreVertical } from '@wordpress/icons';
-import { useEntityProp } from '@wordpress/core-data';
-import { __, _x } from '@wordpress/i18n';
-import { PreferenceToggleMenuItem } from '@wordpress/preferences';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { storeName } from '../../store';
-import { TrashModal } from './trash-modal';
-
-// See:
-//   https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/header/more-menu/index.js
-//   https://github.com/WordPress/gutenberg/blob/0ee78b1bbe9c6f3e6df99f3b967132fa12bef77d/packages/edit-site/src/components/header/more-menu/index.js
-
-export function MoreMenu(): JSX.Element {
-  const [showTrashModal, setShowTrashModal] = useState(false);
-  const { urls, postId } = useSelect(
-    (select) => ({
-      urls: select(storeName).getUrls(),
-      postId: select(storeName).getEmailPostId(),
-    }),
-    [],
-  );
-  const [status, setStatus] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'status',
-  );
-  const { saveEditedEmail, updateEmailMailPoetProperty } =
-    useDispatch(storeName);
-  const goToListings = () => {
-    window.location.href = urls.listings;
-  };
-
-  return (
-    <>
-      <DropdownMenu
-        className="edit-site-more-menu"
-        popoverProps={{
-          className: 'edit-site-more-menu__content',
-        }}
-        icon={moreVertical}
-        label={__('More', 'mailpoet')}
-      >
-        {() => (
-          <>
-            <MenuGroup label={_x('View', 'noun', 'mailpoet')}>
-              <PreferenceToggleMenuItem
-                scope={storeName}
-                name="fixedToolbar"
-                label={__('Top toolbar', 'mailpoet')}
-                info={__(
-                  'Access all block and document tools in a single place',
-                  'mailpoet',
-                )}
-                messageActivated={__('Top toolbar activated', 'mailpoet')}
-                messageDeactivated={__('Top toolbar deactivated', 'mailpoet')}
-              />
-              <PreferenceToggleMenuItem
-                scope={storeName}
-                name="focusMode"
-                label={__('Spotlight mode', 'mailpoet')}
-                info={__('Focus at one block at a time', 'mailpoet')}
-                messageActivated={__('Spotlight mode activated', 'mailpoet')}
-                messageDeactivated={__(
-                  'Spotlight mode deactivated',
-                  'mailpoet',
-                )}
-              />
-              <PreferenceToggleMenuItem
-                scope={storeName}
-                name="fullscreenMode"
-                label={__('Fullscreen mode', 'mailpoet')}
-                info={__('Work without distraction', 'mailpoet')}
-                messageActivated={__('Fullscreen mode activated', 'mailpoet')}
-                messageDeactivated={__(
-                  'Fullscreen mode deactivated',
-                  'mailpoet',
-                )}
-                shortcut={displayShortcut.secondary('f')}
-              />
-            </MenuGroup>
-            <MenuGroup>
-              {status === 'trash' ? (
-                <MenuItem
-                  onClick={async () => {
-                    await setStatus('draft');
-                    await updateEmailMailPoetProperty('deleted_at', '');
-                    await saveEditedEmail();
-                  }}
-                >
-                  {__('Restore from trash', 'mailpoet')}
-                </MenuItem>
-              ) : (
-                <MenuItem onClick={() => setShowTrashModal(true)} isDestructive>
-                  {__('Move to trash', 'mailpoet')}
-                </MenuItem>
-              )}
-            </MenuGroup>
-          </>
-        )}
-      </DropdownMenu>
-      {showTrashModal && (
-        <TrashModal
-          onClose={() => setShowTrashModal(false)}
-          onRemove={goToListings}
-          postId={postId}
-        />
-      )}
-    </>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/header/save-button.tsx

@@ -1,71 +0,0 @@
-import { useRef } from '@wordpress/element';
-import { Button, Dropdown } from '@wordpress/components';
-import {
-  // @ts-expect-error No types available for useEntitiesSavedStatesIsDirty
-  useEntitiesSavedStatesIsDirty,
-  // @ts-expect-error Our current version of packages doesn't have EntitiesSavedStates export
-  EntitiesSavedStates,
-} from '@wordpress/editor';
-import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { check, cloud, Icon } from '@wordpress/icons';
-import { storeName } from '../../store';
-
-export function SaveButton() {
-  const { saveEditedEmail } = useDispatch(storeName);
-
-  const { dirtyEntityRecords } = useEntitiesSavedStatesIsDirty();
-
-  const { hasEdits, isEmpty, isSaving } = useSelect(
-    (select) => ({
-      hasEdits: select(storeName).hasEdits(),
-      isEmpty: select(storeName).isEmpty(),
-      isSaving: select(storeName).isSaving(),
-    }),
-    [],
-  );
-
-  const buttonRef = useRef(null);
-
-  const hasNonEmailEdits = dirtyEntityRecords.some(
-    (entity) => entity.name !== 'mailpoet_email',
-  );
-
-  const isSaved = !isEmpty && !isSaving && !hasEdits;
-  const isDisabled = isEmpty || isSaving || isSaved;
-
-  let label = __('Save Draft', 'mailpoet');
-  if (isSaved) {
-    label = __('Saved', 'mailpoet');
-  } else if (isSaving) {
-    label = __('Saving', 'mailpoet');
-  }
-
-  return hasNonEmailEdits ? (
-    <div ref={buttonRef}>
-      <Dropdown
-        popoverProps={{
-          placement: 'bottom',
-          anchor: buttonRef.current,
-        }}
-        contentClassName="mailpoet-email-editor-save-button__dropdown"
-        renderToggle={({ onToggle }) => (
-          <Button onClick={onToggle} variant="tertiary">
-            {hasEdits
-              ? __('Save email & template', 'mailpoet')
-              : __('Save template', 'mailpoet')}
-          </Button>
-        )}
-        renderContent={({ onToggle }) => (
-          <EntitiesSavedStates close={onToggle} />
-        )}
-      />
-    </div>
-  ) : (
-    <Button variant="tertiary" disabled={isDisabled} onClick={saveEditedEmail}>
-      {isSaving && <Icon icon={cloud} />}
-      {isSaved && <Icon icon={check} />}
-      {label}
-    </Button>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/header/send-button.tsx

@@ -1,50 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
-import {
-  store as editorStore,
-  // @ts-expect-error No types available for useEntitiesSavedStatesIsDirty
-  useEntitiesSavedStatesIsDirty,
-} from '@wordpress/editor';
-import { useEntityProp } from '@wordpress/core-data';
-import { MailPoetEmailData, storeName } from 'email-editor/engine/store';
-import { useSelect } from '@wordpress/data';
-import { useContentValidation } from 'email-editor/engine/hooks';
-
-export function SendButton() {
-  const [mailpoetEmail] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'mailpoet_data',
-  );
-
-  const { isDirty } = useEntitiesSavedStatesIsDirty();
-
-  const { validateContent, isValid } = useContentValidation();
-  const { hasEmptyContent, isEmailSent, isEditingTemplate } = useSelect(
-    (select) => ({
-      hasEmptyContent: select(storeName).hasEmptyContent(),
-      isEmailSent: select(storeName).isEmailSent(),
-      isEditingTemplate:
-        select(editorStore).getCurrentPostType() === 'wp_template',
-    }),
-    [],
-  );
-
-  const isDisabled =
-    isEditingTemplate || hasEmptyContent || isEmailSent || isValid || isDirty;
-
-  const mailpoetEmailData: MailPoetEmailData = mailpoetEmail;
-  return (
-    <Button
-      variant="primary"
-      onClick={() => {
-        if (validateContent()) {
-          window.location.href = `admin.php?page=mailpoet-newsletters#/send/${mailpoetEmailData.id}`;
-        }
-      }}
-      disabled={isDisabled}
-    >
-      {__('Send', 'mailpoet')}
-    </Button>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/header/trash-modal.tsx

@@ -1,78 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Button, Modal } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-
-export function TrashModal({
-  onClose,
-  onRemove,
-  postId,
-}: {
-  onClose: () => void;
-  onRemove: () => void;
-  postId: number;
-}) {
-  const { getLastEntityDeleteError } = useSelect(coreStore);
-  const { deleteEntityRecord } = useDispatch(coreStore);
-  const { createErrorNotice } = useDispatch(noticesStore);
-  const closeCallback = () => {
-    onClose();
-  };
-  const trashCallback = async () => {
-    const success = await deleteEntityRecord(
-      'postType',
-      'mailpoet_email',
-      postId as unknown as string,
-      {},
-      { throwOnError: false },
-    );
-    if (success) {
-      onRemove();
-    } else {
-      const lastError = getLastEntityDeleteError(
-        'postType',
-        'mailpoet_email',
-        postId,
-      );
-      // Already deleted.
-      if (lastError?.code === 410) {
-        onRemove();
-      } else {
-        const errorMessage = lastError?.message
-          ? (lastError.message as string)
-          : __(
-              'An error occurred while moving the email to the trash.',
-              'mailpoet',
-            );
-        await createErrorNotice(errorMessage, {
-          type: 'snackbar',
-          isDismissible: true,
-          context: 'email-editor',
-        });
-      }
-    }
-  };
-  return (
-    <Modal
-      className="mailpoet-move-to-trash-modal"
-      title={__('Move to trash', 'mailpoet')}
-      onRequestClose={closeCallback}
-      focusOnMount="firstContentElement"
-    >
-      <p>
-        {__('Are you sure you want to move this email to trash?', 'mailpoet')}
-      </p>
-      <div className="mailpoet-send-preview-modal-footer">
-        <Button variant="tertiary" onClick={closeCallback}>
-          {__('Cancel', 'mailpoet')}
-        </Button>
-        <Button variant="primary" onClick={trashCallback}>
-          {__('Move to trash', 'mailpoet')}
-        </Button>
-      </div>
-    </Modal>
-  );
-}
-
-export default TrashModal;

mailpoet/assets/js/src/email-editor/engine/components/inserter-sidebar/inserter-sidebar.tsx

@@ -1,31 +0,0 @@
-import {
-  __experimentalLibrary as Library,
-  store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { store as editorStore } from '@wordpress/editor';
-
-export function InserterSidebar() {
-  const { postContentId, isEditingEmailContent } = useSelect((select) => {
-    const blocks = select(blockEditorStore).getBlocks();
-    return {
-      postContentId: blocks.find((block) => block.name === 'core/post-content')
-        ?.clientId,
-      isEditingEmailContent:
-        select(editorStore).getCurrentPostType() !== 'wp_template',
-    };
-  });
-
-  return (
-    <div className="edit-post-editor__inserter-panel">
-      <div className="edit-post-editor__inserter-panel-content">
-        <Library
-          showMostUsedBlocks
-          showInserterHelpPanel={false}
-          // In the email content mode we insert primarily into the post content block.
-          rootClientId={isEditingEmailContent ? postContentId : null}
-        />
-      </div>
-    </div>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/keybord-shortcuts/index.tsx

@@ -1,81 +0,0 @@
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import {
-  useShortcut,
-  store as keyboardShortcutsStore,
-} from '@wordpress/keyboard-shortcuts';
-import { __ } from '@wordpress/i18n';
-import { storeName } from '../../store';
-
-// See:
-//    https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/keyboard-shortcuts/index.js
-//    https://github.com/WordPress/gutenberg/blob/0ee78b1bbe9c6f3e6df99f3b967132fa12bef77d/packages/edit-site/src/components/keyboard-shortcuts/index.js
-
-export function KeyboardShortcuts(): null {
-  const { isSidebarOpened, hasEdits, isSaving } = useSelect((select) => ({
-    isSidebarOpened: select(storeName).isSidebarOpened(),
-    isSaving: select(storeName).isSaving(),
-    hasEdits: select(storeName).hasEdits(),
-  }));
-
-  const { openSidebar, closeSidebar, saveEditedEmail, toggleFeature } =
-    useDispatch(storeName);
-
-  const { registerShortcut } = useDispatch(keyboardShortcutsStore);
-
-  useEffect(() => {
-    void registerShortcut({
-      name: 'mailpoet/email-editor/toggle-fullscreen',
-      category: 'global',
-      description: __('Toggle fullscreen mode.', 'mailpoet'),
-      keyCombination: {
-        modifier: 'secondary',
-        character: 'f',
-      },
-    });
-
-    void registerShortcut({
-      name: 'mailpoet/email-editor/toggle-sidebar',
-      category: 'global',
-      description: __('Show or hide the settings sidebar.', 'mailpoet'),
-      keyCombination: {
-        modifier: 'primaryShift',
-        character: ',',
-      },
-    });
-
-    void registerShortcut({
-      name: 'mailpoet/email-editor/save',
-      category: 'global',
-      description: __('Save your changes.', 'mailpoet'),
-      keyCombination: {
-        modifier: 'primary',
-        character: 's',
-      },
-    });
-  }, [registerShortcut]);
-
-  useShortcut('mailpoet/email-editor/toggle-fullscreen', () => {
-    void toggleFeature('fullscreenMode');
-  });
-
-  useShortcut('mailpoet/email-editor/toggle-sidebar', (event) => {
-    event.preventDefault();
-
-    if (isSidebarOpened) {
-      void closeSidebar();
-    } else {
-      void openSidebar();
-    }
-  });
-
-  useShortcut('mailpoet/email-editor/save', (event) => {
-    event.preventDefault();
-    if (!hasEdits || isSaving) {
-      return;
-    }
-    void saveEditedEmail();
-  });
-
-  return null;
-}

mailpoet/assets/js/src/email-editor/engine/components/listview-sidebar/listview-sidebar.tsx

@@ -1,13 +0,0 @@
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
-
-export function ListviewSidebar() {
-  return (
-    <div className="edit-post-editor__inserter-panel edit-post-editor__document-overview-panel">
-      <div className="edit-post-editor__list-view-panel-content">
-        <div className="edit-post-editor__list-view-container">
-          <ListView />
-        </div>
-      </div>
-    </div>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/notices/index.scss

@@ -1,19 +0,0 @@
-.components-notice.mailpoet-email-editor-validation-errors {
-  margin: 0;
-
-  ul {
-    list-style: disc outside;
-    margin: 0 0 0 20px;
-  }
-  li {
-    margin: 8px 0;
-    padding: 0;
-  }
-  li:last-child {
-    margin-bottom: 0;
-  }
-  button.components-button.is-link {
-    color: #1e1e1e;
-    margin: 0 4px;
-  }
-}

mailpoet/assets/js/src/email-editor/engine/components/notices/notices.tsx

@@ -1,43 +0,0 @@
-import { NoticeList } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-import { ValidationNotices } from './validation-notices';
-import { EditorSnackbars } from './snackbars';
-
-// See: https://github.com/WordPress/gutenberg/blob/5be0ec4153c3adf9f0f2513239f4f7a358ba7948/packages/editor/src/components/editor-notices/index.js
-
-export function EditorNotices() {
-  const { notices } = useSelect(
-    (select) => ({
-      notices: select(noticesStore).getNotices('email-editor'),
-    }),
-    [],
-  );
-
-  const { removeNotice } = useDispatch(noticesStore);
-
-  const dismissibleNotices = notices.filter(
-    ({ isDismissible, type }) => isDismissible && type === 'default',
-  );
-
-  const nonDismissibleNotices = notices.filter(
-    ({ isDismissible, type }) => !isDismissible && type === 'default',
-  );
-
-  return (
-    <>
-      <NoticeList
-        notices={nonDismissibleNotices}
-        className="components-editor-notices__pinned"
-      />
-      <NoticeList
-        notices={dismissibleNotices}
-        className="components-editor-notices__dismissible"
-        onRemove={(id) => removeNotice(id, 'email-editor')}
-      />
-      <ValidationNotices />
-      <EditorSnackbars context="global" />
-      <EditorSnackbars context="email-editor" />
-    </>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/notices/sent-email-notice.tsx

@@ -1,34 +0,0 @@
-import { dispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
-
-import { storeName } from '../../store';
-
-export function SentEmailNotice() {
-  const { isEmailSent } = useSelect(
-    (select) => ({
-      isEmailSent: select(storeName).isEmailSent(),
-    }),
-    [],
-  );
-
-  useEffect(() => {
-    if (isEmailSent) {
-      void dispatch(noticesStore).createNotice(
-        'warning',
-        __(
-          'This email has already been sent. It can be edited, but not sent again. Duplicate this email if you want to send it again.',
-          'mailpoet',
-        ),
-        {
-          id: 'email-sent',
-          isDismissible: false,
-          context: 'email-editor',
-        },
-      );
-    }
-  }, [isEmailSent]);
-
-  return null;
-}

mailpoet/assets/js/src/email-editor/engine/components/notices/snackbars.tsx

@@ -1,26 +0,0 @@
-import { SnackbarList } from '@wordpress/components';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as noticesStore } from '@wordpress/notices';
-
-// See: https://github.com/WordPress/gutenberg/blob/2788a9cf8b8149be3ee52dd15ce91fa55815f36a/packages/editor/src/components/editor-snackbars/index.js
-
-export function EditorSnackbars({ context = 'email-editor' }) {
-  const { notices } = useSelect(
-    (select) => ({
-      notices: select(noticesStore).getNotices(context),
-    }),
-    [],
-  );
-
-  const { removeNotice } = useDispatch(noticesStore);
-
-  const snackbarNotices = notices.filter(({ type }) => type === 'snackbar');
-
-  return (
-    <SnackbarList
-      notices={snackbarNotices}
-      className="components-editor-notices__snackbar"
-      onRemove={(id) => removeNotice(id, context)}
-    />
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/notices/validation-notices.tsx

@@ -1,37 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Notice, Button } from '@wordpress/components';
-import { useValidationNotices } from 'email-editor/engine/hooks';
-
-export function ValidationNotices() {
-  const { notices } = useValidationNotices();
-
-  if (notices.length === 0) {
-    return null;
-  }
-
-  return (
-    <Notice
-      status="error"
-      className="mailpoet-email-editor-validation-errors components-editor-notices__pinned"
-      isDismissible={false}
-    >
-      <>
-        <strong>{__('Fix errors to continue:', 'mailpoet')}</strong>
-        <ul>
-          {notices.map(({ id, content, actions }) => (
-            <li key={id}>
-              {content}
-              {actions.length > 0
-                ? actions.map(({ label, onClick }) => (
-                    <Button key={label} onClick={onClick} variant="link">
-                      {label}
-                    </Button>
-                  ))
-                : null}
-            </li>
-          ))}
-        </ul>
-      </>
-    </Notice>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/preview/index.scss

@@ -1,28 +0,0 @@
-.components-modal__frame.mailpoet-send-preview-email {
-  max-width: 456px;
-}
-
-.mailpoet-send-preview-modal-footer {
-  display: flex;
-  gap: 12px;
-  justify-content: flex-end;
-  padding-top: 16px;
-}
-
-.mailpoet-send-preview-modal-notice-error {
-  background-color: #fcf0f1;
-  gap: 12px;
-  padding: 12px 16px;
-
-  ul {
-    list-style: disc;
-    margin: 0;
-    padding: 5px 0 0 20px;
-  }
-}
-
-.mailpoet-send-preview-modal-notice-success {
-  align-items: center;
-  display: flex;
-  padding-top: 2px;
-}

mailpoet/assets/js/src/email-editor/engine/components/preview/preview-dropdown.tsx

@@ -1,100 +0,0 @@
-import {
-  MenuGroup,
-  MenuItem,
-  Button,
-  DropdownMenu,
-} from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-import { Icon, external, check, mobile, desktop } from '@wordpress/icons';
-import { SendPreviewEmail } from './send-preview-email';
-import { storeName } from '../../store';
-
-export function PreviewDropdown() {
-  const [mailpoetEmailData] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'mailpoet_data',
-  );
-
-  const previewDeviceType = useSelect((select) => {
-    const { deviceType } = select(storeName).getPreviewState();
-    return deviceType;
-  }, []);
-
-  const { changePreviewDeviceType, togglePreviewModal } =
-    useDispatch(storeName);
-  const newsletterPreviewUrl: string = mailpoetEmailData?.preview_url || '';
-
-  const changeDeviceType = (newDeviceType: string) => {
-    void changePreviewDeviceType(newDeviceType);
-  };
-
-  const openInNewTab = (url: string) => {
-    window.open(url, '_blank', 'noreferrer');
-  };
-
-  const deviceIcons = {
-    mobile,
-    desktop,
-  };
-
-  return (
-    <>
-      <DropdownMenu
-        className="mailpoet-preview-dropdown"
-        label={__('Preview', 'mailpoet')}
-        icon={deviceIcons[previewDeviceType.toLowerCase()]}
-      >
-        {({ onClose }) => (
-          <>
-            <MenuGroup>
-              <MenuItem
-                className="block-editor-post-preview__button-resize"
-                onClick={() => changeDeviceType('Desktop')}
-                icon={previewDeviceType === 'Desktop' && check}
-              >
-                {__('Desktop', 'mailpoet')}
-              </MenuItem>
-              <MenuItem
-                className="block-editor-post-preview__button-resize"
-                onClick={() => changeDeviceType('Mobile')}
-                icon={previewDeviceType === 'Mobile' && check}
-              >
-                {__('Mobile', 'mailpoet')}
-              </MenuItem>
-            </MenuGroup>
-            <MenuGroup>
-              <MenuItem
-                className="block-editor-post-preview__button-resize"
-                onClick={() => {
-                  void togglePreviewModal(true);
-                  onClose();
-                }}
-              >
-                {__('Send a test email', 'mailpoet')}
-              </MenuItem>
-            </MenuGroup>
-            {newsletterPreviewUrl ? (
-              <MenuGroup>
-                <div className="edit-post-header-preview__grouping-external">
-                  <Button
-                    className="edit-post-header-preview__button-external components-menu-item__button"
-                    onClick={() => {
-                      openInNewTab(newsletterPreviewUrl);
-                    }}
-                  >
-                    {__('Preview in new tab', 'mailpoet')}
-                    <Icon icon={external} />
-                  </Button>
-                </div>
-              </MenuGroup>
-            ) : null}
-          </>
-        )}
-      </DropdownMenu>
-      <SendPreviewEmail />
-    </>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/preview/send-preview-email.tsx

@@ -1,177 +0,0 @@
-import { Button, Modal, TextControl } from '@wordpress/components';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { check, Icon } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-import {
-  useEffect,
-  useRef,
-  createInterpolateElement,
-} from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
-import { isEmail } from '@wordpress/url';
-import { useEntityProp } from '@wordpress/core-data';
-import {
-  MailPoetEmailData,
-  SendingPreviewStatus,
-  storeName,
-} from '../../store';
-
-export function SendPreviewEmail() {
-  const sendToRef = useRef(null);
-
-  const {
-    requestSendingNewsletterPreview,
-    togglePreviewModal,
-    updateSendPreviewEmail,
-  } = useDispatch(storeName);
-
-  const {
-    toEmail: previewToEmail,
-    isSendingPreviewEmail,
-    sendingPreviewStatus,
-    isModalOpened,
-  } = useSelect((select) => select(storeName).getPreviewState(), []);
-
-  const [mailpoetEmailData] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'mailpoet_data',
-  ) as [MailPoetEmailData, unknown, unknown];
-
-  const handleSendPreviewEmail = () => {
-    void requestSendingNewsletterPreview(mailpoetEmailData.id, previewToEmail);
-  };
-
-  const closeCallback = () => togglePreviewModal(false);
-
-  // We use this effect to focus on the input field when the modal is opened
-  useEffect(() => {
-    if (isModalOpened) {
-      sendToRef.current?.focus();
-    }
-  }, [isModalOpened]);
-
-  if (!isModalOpened) {
-    return null;
-  }
-
-  return (
-    <Modal
-      className="mailpoet-send-preview-email"
-      title={__('Send a test email', 'mailpoet')}
-      onRequestClose={closeCallback}
-      focusOnMount={false}
-    >
-      {sendingPreviewStatus === SendingPreviewStatus.ERROR ? (
-        <div className="mailpoet-send-preview-modal-notice-error">
-          {__('Sorry, we were unable to send this email.', 'mailpoet')}
-          <ul>
-            <li>
-              {createInterpolateElement(
-                __(
-                  'Please check your <link>sending method configuration</link> with your hosting provider.',
-                  'mailpoet',
-                ),
-                {
-                  link: (
-                    // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-                    <a
-                      href="admin.php?page=mailpoet-settings#mta"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    />
-                  ),
-                },
-              )}
-            </li>
-            <li>
-              {createInterpolateElement(
-                __(
-                  'Or, sign up for MailPoet Sending Service to easily send emails. <link>Sign up for free</link>',
-                  'mailpoet',
-                ),
-                {
-                  link: (
-                    // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-                    <a
-                      href={new URL(
-                        'free-plan',
-                        'https://www.mailpoet.com/',
-                      ).toString()}
-                      key="sign-up-for-free"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    />
-                  ),
-                },
-              )}
-            </li>
-          </ul>
-        </div>
-      ) : null}
-      <p>
-        {createInterpolateElement(
-          __(
-            'Send yourself a test email to test how your email would look like in different email apps. You can also test your spam score by sending a test email to <link1>{$serviceName}</link1>. <link2>Learn more</link2>.',
-            'mailpoet',
-          ).replace('{$serviceName}', 'Mail Tester'),
-          {
-            link1: (
-              // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-              <a
-                href="https://www.mail-tester.com/"
-                target="_blank"
-                rel="noopener noreferrer"
-              />
-            ),
-            link2: (
-              // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-              <a
-                href="https://kb.mailpoet.com/article/147-test-your-spam-score-with-mail-tester"
-                target="_blank"
-                rel="noopener noreferrer"
-              />
-            ),
-          },
-        )}
-      </p>
-      <TextControl
-        label={__('Send to', 'mailpoet')}
-        onChange={(email) => {
-          void updateSendPreviewEmail(email);
-        }}
-        onKeyDown={(event) => {
-          const { keyCode } = event;
-          if (keyCode === ENTER) {
-            event.preventDefault();
-            handleSendPreviewEmail();
-          }
-        }}
-        value={previewToEmail}
-        type="email"
-        ref={sendToRef}
-        required
-      />
-      {sendingPreviewStatus === SendingPreviewStatus.SUCCESS ? (
-        <p className="mailpoet-send-preview-modal-notice-success">
-          <Icon icon={check} style={{ fill: '#4AB866' }} />
-          {__('Test email sent successfully!', 'mailpoet')}
-        </p>
-      ) : null}
-      <div className="mailpoet-send-preview-modal-footer">
-        <Button variant="tertiary" onClick={closeCallback}>
-          {__('Close', 'mailpoet')}
-        </Button>
-        <Button
-          variant="primary"
-          onClick={handleSendPreviewEmail}
-          disabled={isSendingPreviewEmail || !isEmail(previewToEmail)}
-        >
-          {isSendingPreviewEmail
-            ? __('Sending...', 'mailpoet')
-            : __('Send test email', 'mailpoet')}
-        </Button>
-      </div>
-    </Modal>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/sidebar/block-compatibility-warnings.tsx

@@ -1,63 +0,0 @@
-import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
-import { Fill, Notice } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
-
-export const hasBackgroundImageSupport = (nameOrType: string) => {
-  // @ts-expect-error not yet supported in the types
-  const backgroundSupport = getBlockSupport(nameOrType, 'background') as Record<
-    string,
-    boolean
-  >;
-
-  return backgroundSupport && backgroundSupport?.backgroundImage !== false;
-};
-
-export function BlockCompatibilityWarnings(): JSX.Element {
-  // Select the currently selected block
-  const selectedBlock = useSelect(
-    (sel) => sel('core/block-editor').getSelectedBlock(),
-    [],
-  );
-
-  // Check if the selected block has enabled border configuration
-  const hasBorderSupport = hasBlockSupport(
-    selectedBlock?.name,
-    // @ts-expect-error Border is not yet supported in the types
-    '__experimentalBorder',
-    false,
-  );
-
-  return (
-    <>
-      {hasBorderSupport && (
-        <Fill name="InspectorControlsBorder">
-          <Notice
-            className="mailpoet__grid-full-width"
-            status="warning"
-            isDismissible={false}
-          >
-            {__(
-              'Border display may vary or be unsupported in some email clients.',
-              'mailpoet',
-            )}
-          </Notice>
-        </Fill>
-      )}
-      {hasBackgroundImageSupport(selectedBlock?.name) && (
-        <Fill name="InspectorControlsBackground">
-          <Notice
-            className="mailpoet__grid-full-width"
-            status="warning"
-            isDismissible={false}
-          >
-            {__(
-              'Select a background color for email clients that do not support background images.',
-              'mailpoet',
-            )}
-          </Notice>
-        </Fill>
-      )}
-    </>
-  );
-}

mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx

@@ -1,131 +0,0 @@
-import {
-  __experimentalText as Text,
-  ExternalLink,
-  PanelBody,
-  TextareaControl,
-} from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
-import { useEntityProp } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
-import { createInterpolateElement } from '@wordpress/element';
-import classnames from 'classnames';
-import { storeName } from '../../store';
-
-const previewTextMaxLength = 150;
-const previewTextRecommendedLength = 80;
-
-export function DetailsPanel() {
-  const [mailpoetEmailData] = useEntityProp(
-    'postType',
-    'mailpoet_email',
-    'mailpoet_data',
-  );
-
-  const { updateEmailMailPoetProperty } = useDispatch(storeName);
-  const subjectHelp = createInterpolateElement(
-    __(
-      'Use shortcodes to personalize your email, or learn more about <bestPracticeLink>best practices</bestPracticeLink> and using <emojiLink>emoji in subject lines</emojiLink>.',
-      'mailpoet',
-    ),
-    {
-      bestPracticeLink: (
-        // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-        <a
-          href="https://www.mailpoet.com/blog/17-email-subject-line-best-practices-to-boost-engagement/"
-          target="_blank"
-          rel="noopener noreferrer"
-        />
-      ),
-      emojiLink: (
-        // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-        <a
-          href="https://www.mailpoet.com/blog/tips-using-emojis-in-subject-lines/"
-          target="_blank"
-          rel="noopener noreferrer"
-        />
-      ),
-    },
-  );
-
-  const subjectLabel = (
-    <>
-      <span>{__('Subject', 'mailpoet')}</span>
-      <ExternalLink href="https://kb.mailpoet.com/article/215-personalize-newsletter-with-shortcodes#list">
-        {__('Shortcode guide', 'mailpoet')}
-      </ExternalLink>
-    </>
-  );
-
-  const previewTextLength = mailpoetEmailData?.preheader?.length ?? 0;
-
-  const preheaderLabel = (
-    <>
-      <span>{__('Preview text', 'mailpoet')}</span>
-      <span
-        className={classnames('mailpoet-settings-panel__preview-text-length', {
-          'mailpoet-settings-panel__preview-text-length-warning':
-            previewTextLength > previewTextRecommendedLength,
-          'mailpoet-settings-panel__preview-text-length-error':
-            previewTextLength > previewTextMaxLength,
-        })}
-      >
-        {previewTextLength}/{previewTextMaxLength}
-      </span>
-    </>
-  );
-
-  return (
-    <PanelBody
-      title={__('Details', 'mailpoet')}
-      className="mailpoet-email-editor__settings-panel"
-    >
-      <TextareaControl
-        className="mailpoet-settings-panel__subject"
-        label={subjectLabel}
-        placeholder={__('Eg. The summer sale is here!', 'mailpoet')}
-        value={mailpoetEmailData?.subject ?? ''}
-        onChange={(value) => updateEmailMailPoetProperty('subject', value)}
-        data-automation-id="email_subject"
-      />
-      <div className="mailpoet-settings-panel__help">
-        <Text>{subjectHelp}</Text>
-      </div>
-
-      <TextareaControl
-        className="mailpoet-settings-panel__preview-text"
-        label={preheaderLabel}
-        placeholder={__(
-          "Add a preview text to capture subscribers' attention and increase open rates.",
-          'mailpoet',
-        )}
-        value={mailpoetEmailData?.preheader ?? ''}
-        onChange={(value) => updateEmailMailPoetProperty('preheader', value)}
-        data-automation-id="email_preview_text"
-      />
-      <div className="mailpoet-settings-panel__help">
-        <Text>
-          {createInterpolateElement(
-            __(
-              '<link>This text</link> will appear in the inbox, underneath the subject line.',
-              'mailpoet',
-            ),
-            {
-              link: (
-                // eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/control-has-associated-label
-                <a
-                  href={new URL(
-                    'article/418-preview-text',
-                    'https://kb.mailpoet.com/',
-                  ).toString()}
-                  key="preview-text-kb"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                />
-              ),
-            },
-          )}
-        </Text>
-      </div>
-    </PanelBody>
-  );
-}