Merge branch 'develop' into trunk

.github/CODEOWNERS

@@ -1,5 +1,5 @@
-# These owners will be the default owners for everything in the repo. Unless a later match takes precedence, @faisal-alvi, as primary maintainer will be requested for review when someone opens a Pull Request.
-*                   @faisal-alvi
+# These owners will be the default owners for everything in the repo. Unless a later match takes precedence, @jeffpaul @dkotter, as primary maintainers will be requested for review when someone opens a Pull Request.
+*                   @jeffpaul @dkotter
 
 # GitHub and WordPress.org specifics
 /.github/           @jeffpaul

.github/workflows/cypress.yml

@@ -20,15 +20,15 @@ jobs:
       matrix:
         core:
           - {name: 'WP latest', version: 'latest'}
-          - {name: 'WP minimum', version: 'WordPress/WordPress#5.7'}
+          - {name: 'WP minimum', version: 'WordPress/WordPress#6.3'}
           - {name: 'WP trunk', version: 'WordPress/WordPress#master'}
 
     steps:
     - name: Checkout
       uses: actions/checkout@v3
 
     - name: Download build zip
-      uses: actions/download-artifact@v3
+      uses: actions/download-artifact@v4
       with:
         name: ${{ github.event.repository.name }}
         path: ${{ github.event.repository.name }}
@@ -37,20 +37,14 @@ jobs:
       run: ls -R
       working-directory: ${{ github.event.repository.name }}
 
-    - name: Cache node_modules
-      id: cache-node-modules
-      uses: actions/cache@v3
-      env:
-        cache-name: cache-node-modules
+    - name: Setup node and npm cache
+      uses: actions/setup-node@v4
       with:
-        path: |
-          node_modules
-          ~/.cache
-          ~/.npm
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+        node-version-file: .nvmrc
+        cache: npm
 
-    - name: Install dependencies
-      run: npm install
+    - name: Install Node dependencies
+      run: npm ci --no-optional
 
     - name: Set the core version and plugins config 
       run: ./tests/bin/set-wp-config.js --core=${{ matrix.core.version }} --plugins=./${{ github.event.repository.name }}
@@ -67,3 +61,13 @@ jobs:
         npx mochawesome-json-to-md -p ./tests/cypress/reports/mochawesome.json -o ./tests/cypress/reports/mochawesome.md
         npx mochawesome-report-generator tests/cypress/reports/mochawesome.json -o tests/cypress/reports/
         cat ./tests/cypress/reports/mochawesome.md >> $GITHUB_STEP_SUMMARY
+    - name: Upload artifacts
+      uses: actions/upload-artifact@v4
+      if: failure()
+      with:
+        name: cypress-artifact-publisher-media-kit
+        retention-days: 2
+        path: |
+          ${{ github.workspace }}/tests/cypress/screenshots/
+          ${{ github.workspace }}/tests/cypress/videos/
+          ${{ github.workspace }}/tests/cypress/logs/

.github/workflows/lint.yml

@@ -1,9 +1,5 @@
 name: Linting
 
-env:
-  COMPOSER_VERSION: "2"
-  COMPOSER_CACHE: "${{ github.workspace }}/.composer-cache"
-
 on:
   push:
     branches:
@@ -17,49 +13,35 @@ jobs:
   eslint:
     name: eslint
     runs-on: ubuntu-latest
+
     steps:
-    - uses: actions/checkout@v3
-    - name: install node v12
-      uses: actions/setup-node@v1
-      with:
-        node-version: 12
-    - name: npm install
-      run: npm install
-    - name: eslint
-      uses: icrawl/action-eslint@v1
-      with:
-        custom-glob: assets
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  phpcs:
-    name: phpcs
-    runs-on: ubuntu-latest
-    steps:
-    - name: Checkout
-      uses: actions/checkout@v3
-    - name: Set standard 10up cache directories
-      run: |
-        composer config -g cache-dir "${{ env.COMPOSER_CACHE }}"
-    - name: Prepare composer cache
-      uses: actions/cache@v2
+    - uses: actions/checkout@v4
+
+    - name: Setup node and npm cache
+      uses: actions/setup-node@v4
       with:
-        path: ${{ env.COMPOSER_CACHE }}
-        key: composer-${{ env.COMPOSER_VERSION }}-${{ hashFiles('**/composer.lock') }}
-        restore-keys: |
-          composer-${{ env.COMPOSER_VERSION }}-
-    - name: Set PHP version
-      uses: shivammathur/setup-php@v2
+        node-version-file: .nvmrc
+        cache: npm
+
+    - name: Install Node dependencies
+      run: npm ci --no-optional
+
+    - name: Get updated JS files
+      id: changed-files
+      uses: tj-actions/changed-files@v42
       with:
-        php-version: '7.4'
-        coverage: none
-        tools: composer:v2, cs2pr
+        files: |
+          **/*.js
+
     - name: composer install
       run: composer install --ignore-platform-reqs
     - name: Check PHPCS standard
       run: ./vendor/bin/phpcs -i
+
     - name: PHPCS check
       id: phpcs
       run: ./vendor/bin/phpcs . --runtime-set testVersion 7.4- --report-checkstyle=${RUNNER_TEMP}/phpcs-report.xml
-    - name: Show PHPCS results in PR
-      if: ${{ always() && steps.phpcs.outcome == 'failure' }}
-      run: cs2pr --graceful-warnings ${RUNNER_TEMP}/phpcs-report.xml
+
+    - name: Run JS linting
+      if: ${{ steps.changed-files.outputs.any_changed == 'true' }}
+      run: ./node_modules/.bin/10up-toolkit lint-js ${{ steps.changed-files.outputs.all_changed_files }}

.github/workflows/repo-automator.yml

@@ -25,7 +25,6 @@ jobs:
           fail-label: needs:feedback
           pass-label: needs:code-review
           conflict-label: needs:refresh
-          sync-pr-branch: true
           reviewers: |
             faisal-alvi
             team:open-source-practice

.nvmrc

@@ -0,0 +1 @@
+v14.21.1

CONTRIBUTING.md

@@ -47,6 +47,10 @@ Pull requests represent a proposed solution to a specified problem.  They should
 
 For more on how 10up writes and manages code, check out our [10up Engineering Best Practices](https://10up.github.io/Engineering-Best-Practices/).
 
+### Testing
+
+Helping to test an open source project and provide feedback on success or failure of those tests is also a helpful contribution.  You can find details on the Critical Flows and Test Cases in [this project's GitHub Wiki](https://github.com/10up/publisher-media-kit/wiki) as well as details on our overall approach to [Critical Flows and Test Cases in our Open Source Best Practices](https://10up.github.io/Open-Source-Best-Practices/testing/#critial-flows).  Submitting the results of testing via our Critical Flows as a comment on a Pull Request of a specific feature or as an Issue when testing the entire project is the best approach for providing testing results.
+
 ## Workflow
 
 The `develop` branch is the development branch which means it contains the next version to be released.  `trunk` contains the latest released version as reflected in the WordPress.org plugin repository.  Always work on the `develop` branch and open up PRs against `develop`.

assets/css/frontend/components/tabs.css

@@ -176,6 +176,11 @@ div.wp-block-group.pmk-tabs-table {
 			text-align: left;
 		}
 
+		& tbody tr:nth-child(even) {
+			background-color: var(--wp--preset--color--base);
+			color: var(--wp--preset--color--contrast);
+		}
+
 		& tbody tr:nth-child(odd) {
 			background-color: var(--pmk-global-color-background-focus);
 			color: var(--pmk-global-color-text-on-background);

assets/css/frontend/components/why-digital.css

@@ -1,14 +1,13 @@
 div.wp-block-group.pmk-why-digital {
 	background-color: var(--pmk-global-color-background-focus);
 	color: var(--pmk-global-color-text-on-background);
-	margin-bottom: var(--pmk-spacing-components);
-	margin-top: 0;
+	margin: var(--pmk-spacing-components) 0;
+	padding: var(--pmk-spacing-related);
 
 	& .wp-block-group__inner-container {
 
 		@mixin has-full-width-background;
 
-		padding: var(--pmk-spacing-components) 0 var(--pmk-spacing-internal-xlarge);
 	}
 
 	& h2 {

includes/block-patterns/audience-profiles.php

@@ -1,4 +1,30 @@
 <?php
 // phpcs:ignoreFile
 ?>
-<!-- wp:group {"align":"wide","className":"pmk-audience-profiles"} --><div class="wp-block-group alignwide pmk-audience-profiles"><!-- wp:heading {"textAlign":"center","level":2} --><h2 class="has-text-align-center">Audience Profiles</h2><!-- /wp:heading --><!-- wp:columns {"align":"wide"} --><div class="wp-block-columns alignwide"><!-- wp:column --><div class="wp-block-column"><!-- wp:image {"align":"center","width":60,"height":137} --><div id="block-ad47cc21-f741-4805-a4d7-85e15762d9d9" class="wp-block-image"><figure class="aligncenter is-resized"><img src="<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/icon-woman.png" alt="Female visitors" width="60" height="137"/></figure></div><!-- /wp:image --><!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center" id="block-80c8c75b-6f07-4ca5-a041-fe48703c3e56">The average female visitor is<br><strong>38 years old</strong></p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column --><div class="wp-block-column"><!-- wp:image {"align":"center","width":60,"height":137} --><div id="block-7db2072f-dbec-47c8-afdb-8e3c78404377" class="wp-block-image"><figure class="aligncenter is-resized"><img src="<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/icon-man.png" alt="Male visitors" width="60" height="137"/></figure></div><!-- /wp:image --><!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center" id="block-5faaca4c-38a7-4e2f-aee3-a7312df7cd8f">The average male visitor is<br><strong>52 years old</strong></p><!-- /wp:paragraph --></div><!-- /wp:column --></div><!-- /wp:columns --></div><!-- /wp:group -->
+<!-- wp:group {"align":"wide","className":"pmk-audience-profiles"} -->
+<div class="wp-block-group alignwide pmk-audience-profiles"><!-- wp:heading {"textAlign":"center"} -->
+<h2 class="wp-block-heading has-text-align-center">Audience Profiles</h2>
+<!-- /wp:heading -->
+
+<!-- wp:columns {"align":"wide"} -->
+<div class="wp-block-columns alignwide"><!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"width":"53px","height":"auto","align":"center","className":"is-resized"} -->
+<figure class="wp-block-image aligncenter is-resized" id="block-ad47cc21-f741-4805-a4d7-85e15762d9d9"><img src="<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/icon-woman.png" alt="Female visitors" style="width:53px;height:auto"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center" id="block-80c8c75b-6f07-4ca5-a041-fe48703c3e56">The average female visitor is<br><strong>38 years old</strong></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column -->
+
+<!-- wp:column -->
+<div class="wp-block-column"><!-- wp:image {"width":"57px","height":"auto","align":"center","className":"is-resized"} -->
+<figure class="wp-block-image aligncenter is-resized" id="block-7db2072f-dbec-47c8-afdb-8e3c78404377"><img src="<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/icon-man.png" alt="Male visitors" style="width:57px;height:auto"/></figure>
+<!-- /wp:image -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center" id="block-5faaca4c-38a7-4e2f-aee3-a7312df7cd8f">The average male visitor is<br><strong>52 years old</strong></p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns --></div>
+<!-- /wp:group -->

includes/block-patterns/cover-esperanza.php

@@ -1,4 +1,18 @@
 <?php
 // phpcs:ignoreFile
 ?>
-<!-- wp:cover {"url":"<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/cover-image.jpeg","id":17,"align":"full","className":"pmk-cover"} --><div class="wp-block-cover alignfull has-background-dim pmk-cover"><img class="wp-block-cover__image-background wp-image-17" alt="" src="<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/cover-image.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1} --><h1 class="has-text-align-center">Media Kit</h1><!-- /wp:heading --><!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui<br>tortor, porttitor ut enim non, iaculis sagittis dolor.</p><!-- /wp:paragraph --><!-- wp:buttons {"contentJustification":"center"} --><div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"className":"pmk-button is-style-fill"} --><div class="wp-block-button pmk-button is-style-fill"><a class="wp-block-button__link">CONTACT US</a></div><!-- /wp:button --></div><!-- /wp:buttons --></div></div><!-- /wp:cover -->
+<!-- wp:cover {"url":"<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/cover-image.jpeg","id":17,"dimRatio":50,"align":"full","className":"pmk-cover"} -->
+<div class="wp-block-cover alignfull is-light pmk-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-17" alt="" src="<?php echo esc_url( PUBLISHER_MEDIA_KIT_URL ); ?>assets/images/cover-image.jpeg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","level":1} -->
+<h1 class="wp-block-heading has-text-align-center">Media Kit</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph {"align":"center"} -->
+<p class="has-text-align-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dui<br>tortor, porttitor ut enim non, iaculis sagittis dolor.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"horizontal"}} -->
+<div class="wp-block-buttons"><!-- wp:button {"className":"pmk-button is-style-fill"} -->
+<div class="wp-block-button pmk-button is-style-fill"><a class="wp-block-button__link wp-element-button">CONTACT US</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div></div>
+<!-- /wp:cover -->

includes/block-patterns/digital-ad-specs.php

@@ -1,4 +1,24 @@
 <?php
 // phpcs:ignoreFile
 ?>
-<!-- wp:group {"align":"wide","className":"pmk-tabs-table"} --><div class="wp-block-group alignwide pmk-tabs-table"><!-- wp:tenup/tabs {"tabsTitle":"Digital Ad Specs"} --><!-- wp:tenup/tabs-item {"header":"Standard Display"} --><!-- wp:table --><figure class="wp-block-table"><table><thead><tr><th><em>Ad Type</em></th><th><em>Dimensions</em></th><th><em>File/Creative Type</em></th><th><em>Device</em></th></tr></thead><tbody><tr><td>Billboard</td><td>970x250</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop</td></tr><tr><td>Super Leaderboard</td><td>970x90</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td><meta charset="utf-8">Desktop</td></tr><tr><td>Leaderboard</td><td>728x90</td><td><meta charset="utf-8">GIF/JPEG - 250KB | HTML 5 - 500KB</td><td><meta charset="utf-8">Desktop, Tablet</td></tr><tr><td>Medium Rectangle</td><td>300x250</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop, Tablet, Mobile</td></tr><tr><td>Half Page</td><td>300x600</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop</td></tr><tr><td>Small Mobile Banner</td><td>320x50</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Mobile</td></tr><tr><td>Large Mobile Banner</td><td>320x100</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Mobile</td></tr></tbody></table></figure><!-- /wp:table --><!-- /wp:tenup/tabs-item --><!-- wp:tenup/tabs-item {"header":"Video"} --><!-- wp:table --><figure class="wp-block-table"><table><thead><tr><th><em>Ad Type</em></th><th><em>Dimensions</em></th><th><em>File/Creative Type</em></th><th><em><strong>Duration</strong></em></th></tr></thead><tbody><tr><td>Pre-roll</td><td>1280x720 (min) | 16x9 aspect ratio</td><td>MPEG4, 3GPP, MOV, VAST, VPAID - Max 30MB</td><td>15 - 30 seconds</td></tr><tr><td>Mid-roll</td><td>1280x720 (min) | 16x9 aspect ratio</td><td>MPEG4, 3GPP, MOV, VAST, VPAID - Max 30MB</td><td>Up to 15 seconds</td></tr></tbody></table></figure><!-- /wp:table --><!-- /wp:tenup/tabs-item --><!-- wp:tenup/tabs-item {"header":"Native"} --><!-- wp:table --><figure class="wp-block-table"><table><thead><tr><th><em>Type</em></th><th><em><strong>Word Count</strong></em></th><th><em><strong>Placements</strong></em></th><th><em><strong>Accompanying Banner Sizes</strong></em></th></tr></thead><tbody><tr><td>Sponsored Content</td><td>750 - 1000</td><td>7-day dedicated homepage slot, 3 social media posts</td><td>970x250, 728x90, 300x250, 320x50</td></tr><tr><td>Sponsored Email Blast</td><td>250 - 500</td><td>Sent to primary subscriber list of 10,000</td><td>300x250</td></tr></tbody></table></figure><!-- /wp:table --><!-- /wp:tenup/tabs-item --><!-- /wp:tenup/tabs --></div><!-- /wp:group -->
+<!-- wp:group {"align":"wide","className":"pmk-tabs-table"} -->
+<div class="wp-block-group alignwide pmk-tabs-table"><!-- wp:tenup/tabs {"tabsTitle":"Digital Ad Specs"} -->
+<!-- wp:tenup/tabs-item {"header":"Standard Display"} -->
+<!-- wp:table -->
+<figure class="wp-block-table"><table><thead><tr><th><em>Ad Type</em></th><th><em>Dimensions</em></th><th><em>File/Creative Type</em></th><th><em>Device</em></th></tr></thead><tbody><tr><td>Billboard</td><td>970x250</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop</td></tr><tr><td>Super Leaderboard</td><td>970x90</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop</td></tr><tr><td>Leaderboard</td><td>728x90</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop, Tablet</td></tr><tr><td>Medium Rectangle</td><td>300x250</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop, Tablet, Mobile</td></tr><tr><td>Half Page</td><td>300x600</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Desktop</td></tr><tr><td>Small Mobile Banner</td><td>320x50</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Mobile</td></tr><tr><td>Large Mobile Banner</td><td>320x100</td><td>GIF/JPEG - 250KB | HTML 5 - 500KB</td><td>Mobile</td></tr></tbody></table></figure>
+<!-- /wp:table -->
+<!-- /wp:tenup/tabs-item -->
+
+<!-- wp:tenup/tabs-item {"header":"Video"} -->
+<!-- wp:table -->
+<figure class="wp-block-table"><table><thead><tr><th><em>Ad Type</em></th><th><em>Dimensions</em></th><th><em>File/Creative Type</em></th><th><em><strong>Duration</strong></em></th></tr></thead><tbody><tr><td>Pre-roll</td><td>1280x720 (min) | 16x9 aspect ratio</td><td>MPEG4, 3GPP, MOV, VAST, VPAID - Max 30MB</td><td>15 - 30 seconds</td></tr><tr><td>Mid-roll</td><td>1280x720 (min) | 16x9 aspect ratio</td><td>MPEG4, 3GPP, MOV, VAST, VPAID - Max 30MB</td><td>Up to 15 seconds</td></tr></tbody></table></figure>
+<!-- /wp:table -->
+<!-- /wp:tenup/tabs-item -->
+
+<!-- wp:tenup/tabs-item {"header":"Native"} -->
+<!-- wp:table -->
+<figure class="wp-block-table"><table><thead><tr><th><em>Type</em></th><th><em><strong>Word Count</strong></em></th><th><em><strong>Placements</strong></em></th><th><em><strong>Accompanying Banner Sizes</strong></em></th></tr></thead><tbody><tr><td>Sponsored Content</td><td>750 - 1000</td><td>7-day dedicated homepage slot, 3 social media posts</td><td>970x250, 728x90, 300x250, 320x50</td></tr><tr><td>Sponsored Email Blast</td><td>250 - 500</td><td>Sent to primary subscriber list of 10,000</td><td>300x250</td></tr></tbody></table></figure>
+<!-- /wp:table -->
+<!-- /wp:tenup/tabs-item -->
+<!-- /wp:tenup/tabs --></div>
+<!-- /wp:group -->