Skip to content

Commit

Permalink
Escape the HTML in the editor of the posts and post carousel blocks (#…
Browse files Browse the repository at this point in the history
…2618)

* Start work to support WP 6.6 in the tests

* Extract sidebar class

* Escape the HTML in the editor of the posts and post carousel blocks

* Bump PHP unit to use WordPress 6.6

* Add 6.6 to e2e tests

* Fix selector of e2e helper savePage()

---------

Co-authored-by: Olivier Lafleur <[email protected]>
  • Loading branch information
EvanHerman and olafleur-godaddy authored Jul 25, 2024
1 parent 4a4e73c commit 2046d80
Show file tree
Hide file tree
Showing 17 changed files with 50 additions and 37 deletions.
29 changes: 18 additions & 11 deletions .dev/tests/cypress/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Returns true if styles tab exists false otherwise.
*/
export function selectStylesTabIfExists() {
cy.get( '.edit-post-sidebar' ).find( 'button[aria-label="Styles"]' ).click();
cy.get( sidebarClass() ).find( 'button[aria-label="Styles"]' ).click();
}

/**
Expand Down Expand Up @@ -172,7 +172,11 @@ export function addNewGroupToPost() {
* From inside the WordPress editor open the CoBlocks Gutenberg editor panel
*/
export function savePage() {
cy.get( '.edit-post-header__settings button.is-primary' ).click();
if ( isWP66AtLeast() ) {
cy.get( '.editor-header__settings button.is-primary' ).click();
} else {
cy.get( '.edit-post-header__settings button.is-primary' ).click();
}

cy.get( '.components-editor-notices__snackbar', { timeout: 120000 } ).should( 'not.be.empty' );

Expand Down Expand Up @@ -263,7 +267,7 @@ export function getBlockSlug() {
export function setBlockStyle( style ) {
openSettingsPanel( RegExp( 'styles', 'i' ) );

cy.get( '.edit-post-sidebar [class*="editor-block-styles"]' )
cy.get( sidebarClass() + ' [class*="editor-block-styles"]' )
.contains( RegExp( style, 'i' ) )
.click();
}
Expand All @@ -276,7 +280,7 @@ export function setBlockStyle( style ) {
export function setNewBlockStyle( style ) {
selectStylesTabIfExists();

cy.get( '.edit-post-sidebar [class*="editor-block-styles"]' )
cy.get( sidebarClass() + ' [class*="editor-block-styles"]' )
.contains( RegExp( style, 'i' ) )
.click();
}
Expand Down Expand Up @@ -350,7 +354,7 @@ export function setBlockAlignment( alignment ) {
export function setInputValue( panelName, settingName, value, ignoreCase = true ) {
openSettingsPanel( ignoreCase ? RegExp( panelName, 'i' ) : panelName );

cy.get( '.edit-post-sidebar' )
cy.get( sidebarClass() )
.contains( ignoreCase ? RegExp( settingName, 'i' ) : settingName ).not( '.block-editor-block-card__description' )
.then( ( $settingSection ) => {
cy.get( Cypress.$( $settingSection ).parent() )
Expand Down Expand Up @@ -557,7 +561,7 @@ export function addCustomBlockClass( classes, blockID = '' ) {
}
} );

cy.get( 'div.edit-post-sidebar' )
cy.get( 'div' + sidebarClass() )
.contains( /Additional CSS/i )
.next( 'input' )
.then( ( $inputElem ) => {
Expand Down Expand Up @@ -612,15 +616,14 @@ export function isNotWPLocalEnv() {
return Cypress.env( 'testURL' ) !== 'http://localhost:8889';
}

// A condition to determine if we are testing on WordPress 6.4+
export function isWP64AtLeast() {
return Cypress.$( "[class*='branch-6-4']" ).length > 0 || Cypress.$( "[class*='branch-6-5']" ).length > 0;
}

export function isWP65AtLeast() {
return Cypress.$( "[class*='branch-6-5']" ).length > 0 || Cypress.$( "[class*='branch-6-6']" ).length > 0;
}

export function isWP66AtLeast() {
return Cypress.$( "[class*='branch-6-6']" ).length > 0 || Cypress.$( "[class*='branch-6-7']" ).length > 0;
}

function getIframeDocument( containerClass ) {
return cy.get( containerClass + ' iframe' ).its( '0.contentDocument' ).should( 'exist' );
}
Expand All @@ -631,3 +634,7 @@ export function getIframeBody( containerClass ) {
// chaining more Cypress commands, like ".find(...)"
.then( cy.wrap );
}

export const sidebarClass = () => {
return isWP66AtLeast() ? '.editor-sidebar__panel' : '.edit-post-sidebar';
};
2 changes: 1 addition & 1 deletion .github/workflows/test-e2e.yml
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ jobs:
fail-fast: false
matrix:
wp: # Test against Prev-Prev Major, Prev-Major, and current Major release versions.
- "6.3"
- "6.4"
- "6.5"
- "6.6"
theme:
- "https://downloads.wordpress.org/theme/go.zip"
- "" # Default theme is TwentyTwentyThree
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/test-php.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ jobs:
strategy:
matrix:
php: ['7.4','8.3']
wp: ['6.4'] # TODO: Add 6.6 when released
wp: ['6.6']
name: PHP Unit ${{ matrix.php }} | WP Version ${{ matrix.wp }}
uses: ./.github/workflows/test-php-unit.yml
with:
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@
"@wordpress/editor": "^13.21.0",
"@wordpress/element": "^5.21.0",
"@wordpress/env": "^10.1.0",
"@wordpress/escape-html": "^3.4.0",
"@wordpress/eslint-plugin": "^17.1.0",
"@wordpress/hooks": "^3.44.0",
"@wordpress/i18n": "^4.44.0",
Expand Down
6 changes: 3 additions & 3 deletions src/blocks/features/test/features.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,15 @@ describe( 'Test CoBlocks Features Block', function() {

cy.get( '.wp-block-coblocks-feature' ).should( 'have.length', 2 );

cy.get( '.edit-post-sidebar' ).find( 'input[aria-label="Columns"][type="number"]' ).focus().type( '{selectall}' ).type( 1 );
cy.get( helpers.sidebarClass() ).find( 'input[aria-label="Columns"][type="number"]' ).focus().type( '{selectall}' ).type( 1 );

cy.get( '.wp-block-coblocks-feature' ).should( 'have.length', 2 ); // Children should never decrease with column count

cy.get( '.edit-post-sidebar' ).find( 'input[aria-label="Columns"][type="number"]' ).focus().type( '{selectall}' ).type( 3 );
cy.get( helpers.sidebarClass() ).find( 'input[aria-label="Columns"][type="number"]' ).focus().type( '{selectall}' ).type( 3 );

cy.get( '.wp-block-coblocks-feature' ).should( 'have.length', 3 );

cy.get( '.edit-post-sidebar' ).find( 'input[aria-label="Columns"][type="number"]' ).focus().type( '{selectall}' ).type( 4 );
cy.get( helpers.sidebarClass() ).find( 'input[aria-label="Columns"][type="number"]' ).focus().type( '{selectall}' ).type( 4 );

cy.get( '.wp-block-coblocks-feature' ).should( 'have.length', 4 );

Expand Down
4 changes: 2 additions & 2 deletions src/blocks/form/test/form.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ describe( 'Test CoBlocks Form Block', function() {
cy.get( '[data-type="coblocks/form"]' )
.click( { force: true } );

cy.get( 'div.edit-post-sidebar' )
cy.get( 'div' + helpers.sidebarClass() )
.contains( /Subject/i )
.next( 'input' )
.then( ( $inputElem ) => {
Expand Down Expand Up @@ -479,7 +479,7 @@ describe( 'Test CoBlocks Form Block', function() {
cy.get( '[data-type="coblocks/form"]' )
.click( { force: true } );

cy.get( 'div.edit-post-sidebar' )
cy.get( 'div' + helpers.sidebarClass() )
.contains( /Success Message/i )
.next( 'textarea' )
.then( ( $inputElem ) => {
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/gif/test/gif.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe( 'Test CoBlocks Gif Block', function() {

cy.get( '.wp-block-coblocks-gif' ).find( 'img' ).should( 'have.length', 1 );

cy.get( '.edit-post-sidebar' ).contains( /Alt text/ ).parent().find( 'textarea' ).type( gifText );
cy.get( helpers.sidebarClass() ).contains( /Alt text/ ).parent().find( 'textarea' ).type( gifText );

helpers.savePage();

Expand Down
2 changes: 1 addition & 1 deletion src/blocks/hero/test/hero.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ describe( 'Test CoBlocks Hero Block', function() {

cy.get( '.wp-block-coblocks-hero' ).find( '.is-fullscreen' ).should( 'exist' );

cy.get( '.edit-post-sidebar' ).find( 'div[aria-label="Select layout"]' ).children().each( ( $layoutButton ) => {
cy.get( helpers.sidebarClass() ).find( 'div[aria-label="Select layout"]' ).children().each( ( $layoutButton ) => {
cy.get( $layoutButton ).click();
} );

Expand Down
3 changes: 2 additions & 1 deletion src/blocks/post-carousel/post-item.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
} from '@wordpress/components';
import { PlainText } from '@wordpress/block-editor';
import { RawHTML } from '@wordpress/element';
import { escapeHTML } from '@wordpress/escape-html';
import { withSelect } from '@wordpress/data';
// Disable reason: We choose to use unsafe APIs in our codebase.
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
Expand Down Expand Up @@ -78,7 +79,7 @@ const PostItem = ( {
<RawHTML
key="html"
>
{ excerpt.trim().split( ' ', excerptLength ).join( ' ' ) }
{ escapeHTML( excerpt.trim().split( ' ', excerptLength ).join( ' ' ) ) }
</RawHTML>
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions src/blocks/post-carousel/test/post-carousel.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ describe( 'Test CoBlocks Post Carousel Block', function() {
it( 'Test the post-carousel block custom classes.', function() {
helpers.addBlockToPost( 'coblocks/post-carousel', true );

cy.get( '.edit-post-sidebar' ).contains( /post carousel settings/i ).click( { force: true } );
cy.get( helpers.sidebarClass() ).contains( /post carousel settings/i ).click( { force: true } );

cy.get( '.edit-post-sidebar' ).contains( /feed settings/i ).click( { force: true } );
cy.get( helpers.sidebarClass() ).contains( /feed settings/i ).click( { force: true } );

helpers.addCustomBlockClass( 'my-custom-class', 'post-carousel' );

Expand Down
5 changes: 3 additions & 2 deletions src/blocks/posts/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import apiFetch from '@wordpress/api-fetch';
import { __ } from '@wordpress/i18n';
import { compose, usePrevious } from '@wordpress/compose';
import { lazy, RawHTML, useState, useEffect, useRef } from '@wordpress/element';
import { escapeHTML } from '@wordpress/escape-html';
import { addQueryArgs } from '@wordpress/url';
// Disable reason: We choose to use unsafe APIs in our codebase.
// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
Expand Down Expand Up @@ -435,8 +436,8 @@ const PostsEdit = ( props ) => {
key="html"
>
{ excerptLength < excerpt.trim().split( ' ' ).length
? excerpt.trim().split( ' ', excerptLength ).join( ' ' ) + '…'
: excerpt.trim().split( ' ', excerptLength ).join( ' ' ) }
? escapeHTML( excerpt.trim().split( ' ', excerptLength ).join( ' ' ) ) + '…'
: escapeHTML( excerpt.trim().split( ' ', excerptLength ).join( ' ' ) ) }
</RawHTML>
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions src/blocks/posts/test/posts.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ describe( 'Test CoBlocks Posts Block', function() {
it( 'Test posts block custom classes.', function() {
helpers.addBlockToPost( 'coblocks/posts', true );

cy.get( '.edit-post-sidebar' ).contains( /posts settings/i ).click( { force: true } );
cy.get( helpers.sidebarClass() ).contains( /posts settings/i ).click( { force: true } );

cy.get( '.edit-post-sidebar' ).contains( /feed settings/i ).click( { force: true } );
cy.get( helpers.sidebarClass() ).contains( /feed settings/i ).click( { force: true } );

helpers.addCustomBlockClass( 'my-custom-class', 'posts' );

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,7 @@ describe( 'Test CoBlocks Pricing Table Item Block', function() {

featuresText = ' ' + featuresText;

if ( helpers.isWP64AtLeast() ) {
firstTableItem().find( '.wp-block-coblocks-pricing-table-item__features' ).should( 'have.text', featuresText );
} else {
firstTableItem().find( '.wp-block-coblocks-pricing-table-item__features > li' ).should( 'have.text', featuresText );
}
firstTableItem().find( '.wp-block-coblocks-pricing-table-item__features' ).should( 'have.text', featuresText );

firstTableItem().find( '.wp-block-button' ).should( 'have.text', buttonText );
} );
Expand Down
2 changes: 1 addition & 1 deletion src/blocks/row/test/row.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ describe( 'Test CoBlocks Row Block', function() {

cy.get( '.wp-block-coblocks-row' ).click( { force: true } );

cy.get( '.edit-post-sidebar' ).contains( /row settings/i ).click();
cy.get( helpers.sidebarClass() ).contains( /row settings/i ).click();

helpers.addCustomBlockClass( 'my-custom-class', 'row' );

Expand Down
4 changes: 2 additions & 2 deletions src/blocks/services/service/test/service.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ describe( 'Test CoBlocks Service Block', function() {
}
} );

cy.get( 'div.edit-post-sidebar' )
cy.get( 'div' + helpers.sidebarClass() )
.contains( /Additional CSS/i )
.next( 'input' )
.then( ( $inputElem ) => {
Expand All @@ -56,7 +56,7 @@ describe( 'Test CoBlocks Service Block', function() {
}
} );

cy.get( 'div.edit-post-sidebar' )
cy.get( 'div' + helpers.sidebarClass() )
.contains( /Additional CSS/i )
.next( 'input' )
.then( ( $inputElem ) => {
Expand Down
4 changes: 2 additions & 2 deletions src/blocks/shape-divider/test/shape-divider.cypress.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ describe( 'Test CoBlocks Shape Divider Block', function() {

helpers.openSettingsPanel( 'Divider settings' );

cy.get( '.edit-post-sidebar' )
cy.get( helpers.sidebarClass() )
.contains( 'Shape height' ).not( '.block-editor-block-card__description' )
.then( ( $settingSection ) => {
cy.get( Cypress.$( $settingSection ).parent().parent() )
Expand All @@ -69,7 +69,7 @@ describe( 'Test CoBlocks Shape Divider Block', function() {
.type( `{selectall}${ shapeHeight }` );
} );

cy.get( '.edit-post-sidebar' )
cy.get( helpers.sidebarClass() )
.contains( 'Background height' ).not( '.block-editor-block-card__description' )
.then( ( $settingSection ) => {
cy.get( Cypress.$( $settingSection ).parent().parent() )
Expand Down
7 changes: 7 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4172,6 +4172,13 @@
dependencies:
"@babel/runtime" "^7.16.0"

"@wordpress/escape-html@^3.4.0":
version "3.4.0"
resolved "https://registry.yarnpkg.com/@wordpress/escape-html/-/escape-html-3.4.0.tgz#ec625d409b018ff68d6081c66586fd420f74e122"
integrity sha512-KcUv+s0J/LEZEEvd+E3IkNCeW8wde0TjO+1HrcfvqI8Rfuc0zOAZeS/6ZqIeX0m/mhQ0xS2Y3e8hsnU+wAG6Mw==
dependencies:
"@babel/runtime" "^7.16.0"

"@wordpress/eslint-plugin@^12.7.0":
version "12.9.0"
resolved "https://registry.yarnpkg.com/@wordpress/eslint-plugin/-/eslint-plugin-12.9.0.tgz#c49f0a523c8c72ade28c2b86a975668832b22938"
Expand Down

0 comments on commit 2046d80

Please sign in to comment.