diff --git a/.dev/tests/cypress/helpers.js b/.dev/tests/cypress/helpers.js index ab514137f4f..81c74f95ee9 100644 --- a/.dev/tests/cypress/helpers.js +++ b/.dev/tests/cypress/helpers.js @@ -1,25 +1,8 @@ -/** - * Close layout selector. - */ -export function closeLayoutSelector() { - cy.get( '.coblocks-layout-selector-modal' ).its( 'length' ).then( ( layoutSelectorModal ) => { - if ( layoutSelectorModal > 0 ) { - cy.get( '.coblocks-layout-selector-modal' ) - .find( '.components-button[aria-label*="Close"]' ).first() - .click(); - } - } ); - - cy.get( '.coblocks-layout-selector-modal' ).should( 'not.exist' ); -} - /** * Returns true if styles tab exists false otherwise. */ export function selectStylesTabIfExists() { - if ( isWP62AtLeast() ) { - cy.get( '.edit-post-sidebar' ).find( 'button[aria-label="Styles"]' ).click(); - } + cy.get( '.edit-post-sidebar' ).find( 'button[aria-label="Styles"]' ).click(); } /** @@ -30,7 +13,7 @@ export function selectStylesTabIfExists() { export function addFormChild( name ) { cy.get( '[data-type="coblocks/form"] [data-type^="coblocks/field"]' ).first().click( { force: true } ); cy.get( '.block-editor-block-settings-menu' ).click(); - cy.get( '.components-popover__content button' ).contains( /insert after/i ).click( { force: true } ); + cy.get( '.components-popover__content button' ).contains( /insert after|add after/i ).click( { force: true } ); cy.get( '[data-type="coblocks/form"] [data-type="core/paragraph"]' ).click( { force: true } ); cy.get( '.edit-post-header-toolbar' ).find( '.edit-post-header-toolbar__inserter-toggle' ).click( { force: true } ); @@ -157,13 +140,9 @@ export function addNewGroupToPost() { cy.get( '.edit-post-header [aria-label="Add block"], .edit-site-header [aria-label="Add block"], .edit-post-header-toolbar__inserter-toggle' ).click(); cy.get( '.block-editor-inserter__search-input,input.block-editor-inserter__search, .components-search-control__input' ).click().type( 'group' ); - if ( isWP62AtLeast() ) { - cy.wait( 1000 ); + cy.wait( 1000 ); - cy.get( '.block-editor-block-types-list__list-item' ).contains( 'Group' ).click(); - } else { - cy.get( '.block-editor-block-types-list__item' ).first().click(); - } + cy.get( '.block-editor-block-types-list__list-item' ).contains( 'Group' ).click(); // Make sure the block was added to our page cy.get( `[class*="-visual-editor"] [data-type='core/group']` ).should( 'exist' ).then( () => { @@ -256,28 +235,6 @@ export function getBlockSlug() { return ( specFile.split( '/' ).pop().replace( '.cypress.js', '' ) ); } -/** - * Open the block navigator. - */ -export function openBlockNavigator( ) { - cy.get( '.block-editor-block-navigation,.edit-post-header-toolbar__list-view-toggle,.edit-post-header-toolbar__document-overview-toggle' ).then( ( element ) => { - if ( ! element.hasClass( 'is-pressed' ) ) { - element.click(); - } - } ); -} - -/** - * Close the block navigator. - */ -export function closeBlockNavigator() { - const inserterButton = Cypress.$( '.edit-post-header__toolbar button.edit-post-header-toolbar__list-view-toggle.is-pressed' ); - if ( inserterButton.length > 0 ) { - cy.get( '.edit-post-header__toolbar button.edit-post-header-toolbar__list-view-toggle.is-pressed' ) - .click(); - } -} - /** * Click on a style button within the style panel * @@ -321,7 +278,7 @@ export function selectBlock( name ) { cy.wait( 1000 ); // `data-type` includes lower case name and `data-title` includes upper case name. - // Allows for case insensitive search. + // Allows for case-insensitive search. cy.get( `[data-type*="${ name }"], [data-title*="${ name }"]` ) .invoke( 'attr', 'data-block' ) .then( ( clientId ) => { @@ -364,7 +321,7 @@ export const upload = { /** * Upload image to input element and trigger replace image flow. * - * @param {string} blockName The name of the block that is replace target + * @param {string} blockName The name of the block that is replacing target * imageReplaceFlow works with CoBlocks Galleries: Carousel, Collage, Masonry, Offset, Stacked. */ imageReplaceFlow: ( blockName ) => { @@ -442,7 +399,12 @@ export function setColorSettingsFoldableSetting( settingName, hexColor ) { const formattedHex = hexColor.split( '#' )[ 1 ]; cy.get( '.block-editor-panel-color-gradient-settings__dropdown' ).contains( settingName, { matchCase: false } ).click(); - cy.get( '.components-color-palette__custom-color' ).click(); + + if ( isWP63AtLeast() ) { + cy.get( '.components-color-palette__custom-color-button' ).click(); + } else { + cy.get( '.components-color-palette__custom-color' ).click(); + } cy.get( '.components-color-picker' ).find( '.components-input-control__input' ).click().clear().type( formattedHex ); @@ -455,7 +417,12 @@ export function setColorPanelSetting( settingName, hexColor ) { const formattedHex = hexColor.split( '#' )[ 1 ]; cy.get( '.block-editor-panel-color-gradient-settings__dropdown' ).contains( settingName, { matchCase: false } ).click(); - cy.get( '.components-color-palette__custom-color' ).click(); + + if ( isWP63AtLeast() ) { + cy.get( '.components-color-palette__custom-color-button' ).click(); + } else { + cy.get( '.components-color-palette__custom-color' ).click(); + } cy.get( '.components-color-picker' ).find( '.components-input-control__input' ).click().clear().type( formattedHex ); @@ -506,7 +473,7 @@ export function openHeadingToolbarAndSelect( headingLevel ) { } /** - * Toggle an checkbox in the settings panel of the block editor + * Toggle a checkbox in the settings panel of the block editor * * @param {string} checkboxLabelText The checkbox label text. eg: Drop Cap */ @@ -521,7 +488,7 @@ export function toggleSettingCheckbox( checkboxLabelText ) { /** * Add custom classes to a block * - * @param {string} classes Custom classe(s) to add to the block + * @param {string} classes Custom class(es) to add to the block * @param {string} blockID The name of the block e.g. (accordion, alert, map) */ export function addCustomBlockClass( classes, blockID = '' ) { @@ -553,20 +520,6 @@ export function addCustomBlockClass( classes, blockID = '' ) { } ); } -/** - * Open the Editor Settings panel. - */ -export function openEditorSettingsModal() { - // Open "more" menu. - cy.get( '.edit-post-more-menu button' ).click(); - cy.get( '.components-menu-group' ).contains( 'Editor settings' ).click(); - - cy.get( '.components-modal__frame' ).contains( 'Editor settings' ).should( 'exist' ); - - // Ensure settings have loaded. - cy.get( '.coblocks-settings-modal input[type="checkbox"]' ).should( 'have.length', 6 ); -} - /** * Open the CoBlocks Labs modal. */ @@ -608,10 +561,10 @@ export function isNotWPLocalEnv() { return Cypress.env( 'testURL' ) !== 'http://localhost:8889'; } -// A condition to determine if we are testing on WordPress 6.2+ -// This function should be removed in the process of the work for WP 6.3 compatibility -export function isWP62AtLeast() { - return Cypress.$( "[class*='branch-6-2']" ).length > 0 || Cypress.$( "[class*='branch-6-3']" ).length > 0; +// A condition to determine if we are testing on WordPress 6.3+ +// This function should be removed in the process of the work for WP 6.4 compatibility +export function isWP63AtLeast() { + return Cypress.$( "[class*='branch-6-3']" ).length > 0 || Cypress.$( "[class*='branch-6-4']" ).length > 0; } function getIframeDocument( containerClass ) { diff --git a/.github/workflows/test-e2e-cypress-6.3rc2.yml b/.github/workflows/test-e2e-cypress-6.3rc2.yml new file mode 100644 index 00000000000..87a98b84663 --- /dev/null +++ b/.github/workflows/test-e2e-cypress-6.3rc2.yml @@ -0,0 +1,173 @@ +name: Test / E2E Cypress Job RC2 + +on: + workflow_call: + inputs: + browser: + required: false + type: string + default: chrome + theme: + required: false + type: string + wpVersion: + required: false + type: string + default: "" + phpVersion: + required: false + type: string + default: "8.2" + secrets: + record-key: + description: 'Record key for Cypress Dashboard' + required: false + +jobs: + test_cypress_e2e: + name: E2E Test + runs-on: ubuntu-latest + strategy: + fail-fast: false + matrix: + spec: + - accordion.cypress.js + - alert.cypress.js + - author.cypress.js + - click-to-tweet.cypress.js + - counter.cypress.js + - dynamic-separator.cypress.js + - event-item.cypress.js + - events.cypress.js + - faq.cypress.js + - feature.cypress.js + - features.cypress.js + - food-item.cypress.js + - food-and-drinks.cypress.js + - form.cypress.js + - gallery-carousel.cypress.js + - gallery-collage.cypress.js + - gallery-masonry.cypress.js + - gallery-offset.cypress.js + - gallery-stacked.cypress.js + - gif.cypress.js + - gist.cypress.js + - hero.cypress.js + - highlight.cypress.js + - icon.cypress.js + - logos.cypress.js + - map.cypress.js + - media-card.cypress.js + - opentable.cypress.js + - post-carousel.cypress.js + - posts.cypress.js + - pricing-table-item.cypress.js + - pricing-table.cypress.js + - column.cypress.js + - row.cypress.js + - service.cypress.js + - services.cypress.js + - shape-divider.cypress.js + - social-profiles.cypress.js + - modal.cypress.js + - media-filter-control.cypress.js + - coblocks-labs.cypress.js + - layout-selector.cypress.js + - lightbox-controls-gallery.cypress.js + - lightbox-controls-image.cypress.js + - media-text-styles.cypress.js + - padding-controls.cypress.js + - settings-modal-control.cypress.js + + + steps: + - name: Checkout + uses: actions/checkout@v3 + + - name: Setup wp-env + uses: godaddy-wordpress/setup-wp-env@v1 + with: + core: ${{ inputs.wpVersion }} + phpVersion: ${{ inputs.phpVersion }} + plugins: '["."]' + themes: '["https://downloads.wordpress.org/theme/go.zip"]' + + - name: Setup Node + uses: actions/setup-node@v3 + with: + node-version-file: '.nvmrc' + cache: 'yarn' + + - name: Install dependencies + run: | + composer install --prefer-dist --optimize-autoloader & + yarn install --immutable + + - name: Build plugin + run: | + npx grunt build + # moving the built directory to this location means no dev files in tests-container. + mv ./build/coblocks $(wp-env install-path)/tests-wordpress-6.3-RC2/wp-content/plugins/ + + - name: Prepare Theme + run: | + if [ "${{ inputs.theme }}" = "https://downloads.wordpress.org/theme/go.zip" ]; then + cd $(wp-env install-path)/go + else + cd $(wp-env install-path)/tests-wordpress-6.3-RC2/wp-content/themes/twentytwentythree + fi + mkdir -p coblocks/icons + echo '' >> coblocks/icons/custom.svg + + - name: Prepare tests + run: | + WP_CORE_VERSION=$(wp-env run cli wp core version) + echo "WP_CORE_VERSION=${WP_CORE_VERSION}" >> $GITHUB_ENV + wp-env run tests-cli wp post generate --count=5 + wp-env run cli wp post generate --count=5 + wp-env run cli wp option update permalink_structure '/%postname%' + if [ "${{ inputs.theme }}" = "https://downloads.wordpress.org/theme/go.zip" ]; then + wp-env run tests-cli wp theme activate go + fi + + # Only create a new post if running the migrated specs + - name: Create post and get ID + if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js' + run: | + # Generate application-password to use with WP REST API. + app_password=$(wp-env run tests-cli wp user application-password create admin gha-password --porcelain) + + # Retrieve post content from fixture. + post_content=$(cat .dev/tests/cypress/fixtures/${{matrix.spec}}.html) + echo $post_content + + # Create a post using the REST API and parse the postId from the response. + postId=$(curl -s -X POST 'http://localhost:8889/?rest_route=/wp/v2/posts' --data-urlencode "title=${{matrix.spec}}" --data-raw "content=$post_content" --data-urlencode "status=publish" --user "admin:$app_password"| jq '.id') + + # Save the postId to the output. + echo "postId=$postId" >> $GITHUB_OUTPUT + id: create-post + + # Only retrieve the post ID if running the first spec + - name: Save post ID to file + if: matrix.spec == 'alert.cypress.js' || matrix.spec == 'author.cypress.js' + run: | + path="$GITHUB_WORKSPACE/.dev/tests/cypress/fixtures/${{matrix.spec}}.json" + touch "$path" + echo "{\"${{matrix.spec}}\": \"$(echo "${{ steps.create-post.outputs.postId }}")\"}" > "$path" + + - name: Run tests + run: | + CYPRESS_SPEC=$(find ./src/* -name ${{ matrix.spec }} -type f) + echo '{"wpUsername":"admin","wpPassword":"password","testURL":"http://localhost:8889"}' | jq . > cypress.env.json + ./node_modules/.bin/cypress verify + ./node_modules/.bin/cypress run --browser ${{ inputs.browser }} --spec $CYPRESS_SPEC + + - name: Upload failure video + if: ${{ failure() }} + uses: actions/upload-artifact@v3 + with: + name: ${{ matrix.spec }}-fail.mp4 + path: ./.dev/tests/cypress/videos/${{ matrix.spec }}.mp4 + retention-days: 1 + diff --git a/.github/workflows/test-e2e.yml b/.github/workflows/test-e2e.yml index d213f4de458..4dc603f6583 100644 --- a/.github/workflows/test-e2e.yml +++ b/.github/workflows/test-e2e.yml @@ -34,3 +34,12 @@ jobs: concurrency: group: chrome-php74 cancel-in-progress: true + + chrome_e2e_wp_63_rc2: + name: Chrome on WordPress 6.3 RC2 + uses: ./.github/workflows/test-e2e-cypress-6.3rc2.yml + with: + wpVersion: "https://wordpress.org/wordpress-6.3-RC2.zip" + concurrency: + group: chrome-wp_63_rc2 + cancel-in-progress: true diff --git a/package.json b/package.json index f5f0ceb20d4..c098b4c1d0a 100644 --- a/package.json +++ b/package.json @@ -34,13 +34,12 @@ "lint:php": "wp-env run tests-cli --env-cwd=/var/www/html 'composer run lint -d /var/www/html/wp-content/plugins/coblocks/'; #we use phpunit container because composer container only use php 8;", "lint:php:fix": "wp-env run tests-cli --env-cwd=/var/www/html 'composer run lint:fix -d /var/www/html/wp-content/plugins/coblocks/'; #we use phpunit container because composer container only use php 8;", "makepot": "./vendor/bin/wp i18n make-pot . --skip-audit --exclude=\".dev,.github,.wordpress-org,build,docs,dist,node_modules,vendor,wordpress\" --headers='{\"Last-Translator\":\"plugins@godaddy.com\",\"Report-Msgid-Bugs-To\":\"https://github.com/godaddy-wordpress/coblocks/issues\"}' --file-comment=\"Copyright (c) $(date +'%Y') GoDaddy Operating Company, LLC. All Rights Reserved.\" languages/coblocks.pot && yarn run pot2json", - "php:composer:install": "wp-env run wordpress 'composer install -d /var/www/html/wp-content/plugins/coblocks/'", "po2jed": "cd languages && find . -name '*.po' -execdir /bin/bash -c 'FROM=\"$0\" && TO=\"`basename $0 .po`-coblocks-editor.json\" && echo \"$FROM > $TO\" && po2json $FROM $TO -f jed' '{}' \\;", "po2mo": "cd languages && find . -name '*.po' -execdir /bin/bash -c 'FROM=\"$0\" && TO=\"`basename $0 .po`.mo\" && echo \"$FROM > $TO\" && msgfmt $FROM -o $TO' '{}' \\;", "postinstall": "yarn update:icon", "pot2json": "./vendor/bin/pot2json languages/coblocks.pot languages/coblocks.json", "prepare": "husky install .dev/husky", - "setup": "yarn install && yarn run build && wp-env start && yarn php:composer:install", + "setup": "yarn install && yarn run build && wp-env start", "start:debug": "DEBUG_MODE=on wp-scripts start --progress", "start": "wp-scripts start --progress", "test:a11y": "node .dev/tests/a11y/pa11y.js", diff --git a/src/blocks/gallery-carousel/gallery-carousel-item.js b/src/blocks/gallery-carousel/gallery-carousel-item.js index 6a49683c0ae..768c16c0ed3 100644 --- a/src/blocks/gallery-carousel/gallery-carousel-item.js +++ b/src/blocks/gallery-carousel/gallery-carousel-item.js @@ -47,14 +47,13 @@ const GalleryCarouselItem = ( { return ( handleCaptionChange( val ) } + inlineToolbar={ captionFocused } + onChange={ ( val ) => !! val ? handleCaptionChange( val ) : null } placeholder={ __( 'Write gallery caption…', 'coblocks' ) } tagName="figcaption" - unstableOnFocus={ () => { - setCaptionFocused( ! captionFocused ); - } } + unstableOnFocus={ setCaptionFocused( true ) } // Backwards compat < WP 6.3 + onFocus={ setCaptionFocused( true ) } + onBlur={ () => setCaptionFocused( false ) } value={ images[ selectedImage ]?.caption } /> ); diff --git a/src/blocks/gallery-masonry/test/gallery-masonry.cypress.js b/src/blocks/gallery-masonry/test/gallery-masonry.cypress.js index 2897f375726..a74bd7c2e56 100644 --- a/src/blocks/gallery-masonry/test/gallery-masonry.cypress.js +++ b/src/blocks/gallery-masonry/test/gallery-masonry.cypress.js @@ -2,6 +2,7 @@ * Include our constants */ import * as helpers from '../../../../.dev/tests/cypress/helpers'; +import { isWP63AtLeast } from '../../../../.dev/tests/cypress/helpers'; describe( 'Test CoBlocks Gallery Masonry Block', function() { /** @@ -90,19 +91,11 @@ describe( 'Test CoBlocks Gallery Masonry Block', function() { cy.get( 'button' ).contains( /create a new gallery/i ).click(); cy.get( 'button' ).contains( /insert gallery/i ).click(); - if ( helpers.isWP62AtLeast() ) { - helpers.selectBlock( 'masonry' ); + helpers.selectBlock( 'masonry' ); - cy.get( 'figcaption[role="textbox"]' ).click( { force: true } ); + cy.get( 'figcaption[role="textbox"]' ).click( { force: true } ); - cy.get( 'figcaption[role="textbox"]' ).focus().type( caption ); - } else { - cy.get( 'figure[data-type="core/image"] img[src*="http"]' ).click(); - - cy.get( '.edit-post-visual-editor figcaption[role="textbox"] span' ).click( { force: true } ); - - cy.get( '.edit-post-visual-editor figcaption[role="textbox"]' ).focus().type( caption ); - } + cy.get( 'figcaption[role="textbox"]' ).focus().type( caption ); helpers.savePage(); @@ -129,19 +122,11 @@ describe( 'Test CoBlocks Gallery Masonry Block', function() { cy.get( 'button' ).contains( /create a new gallery/i ).click(); cy.get( 'button' ).contains( /insert gallery/i ).click(); - if ( helpers.isWP62AtLeast() ) { - helpers.selectBlock( 'masonry' ); + helpers.selectBlock( 'masonry' ); - cy.get( '.block-editor-format-toolbar' ).should( 'not.exist' ); + cy.get( '.block-editor-format-toolbar' ).should( 'not.exist' ); - cy.get( 'figcaption[role="textbox"]' ).click(); - } else { - cy.get( 'figure[data-type="core/image"] img[src*="http"]' ).click(); - - cy.get( '.block-editor-format-toolbar' ).should( 'not.exist' ); - - cy.get( '.edit-post-visual-editor figcaption[role="textbox"]' ).focus(); - } + cy.get( 'figcaption[role="textbox"]' ).click(); cy.get( '.block-editor-format-toolbar, .block-editor-rich-text__inline-format-toolbar-group' ); @@ -172,15 +157,19 @@ describe( 'Test CoBlocks Gallery Masonry Block', function() { helpers.selectBlock( 'image' ); - //'.media-replace-flow button' was deprecated in 5.8. - // Media replace button should reside as the 5th button within the toolbar. - cy.get( '.block-editor-block-toolbar div:nth-of-type(4) button:not(.has-icon)' ).click(); + let replaceButtonPosition = '4'; + + if ( isWP63AtLeast() ) { + replaceButtonPosition = '5'; + } + + cy.get( '.block-editor-block-toolbar div:nth-of-type(' + replaceButtonPosition + ') button:not(.has-icon)' ).click(); cy.get( '.components-popover__content' ).should( 'be.visible' ); cy.get( '.block-editor-media-replace-flow__media-upload-menu .components-menu-item__button' ).contains( 'Open Media Library' ); - cy.get( '.block-editor-block-toolbar div:nth-of-type(4) button:not(.has-icon)' ).click(); + cy.get( '.block-editor-block-toolbar div:nth-of-type(' + replaceButtonPosition + ') button:not(.has-icon)' ).click(); cy.get( 'figure[data-type="coblocks/gallery-masonry"]' ).click(); diff --git a/src/blocks/highlight/save.js b/src/blocks/highlight/save.js index 582377161ba..117ff4a5cdc 100644 --- a/src/blocks/highlight/save.js +++ b/src/blocks/highlight/save.js @@ -17,7 +17,10 @@ const save = ( { attributes } ) => { const { align, content } = attributes; const saveBlockProps = useBlockProps.save(); - saveBlockProps.style.textAlign = align; + + if ( saveBlockProps.style ) { + saveBlockProps.style.textAlign = align; + } /** * In the Highlight block we descend only the `color` and `backgroundColor` styles and classnames but keep all others on the parent. diff --git a/src/components/block-gallery/gallery-image.js b/src/components/block-gallery/gallery-image.js index fe63ee3e0e0..f97adc3c352 100644 --- a/src/components/block-gallery/gallery-image.js +++ b/src/components/block-gallery/gallery-image.js @@ -267,12 +267,12 @@ class GalleryImage extends Component { { ( supportsCaption === true ) && ( ! RichText.isEmpty( caption ) || isSelected ) && captions ? ( setAttributes( { caption: newCaption } ) } placeholder={ __( 'Write caption…', 'coblocks' ) } style={ captionStyles } tagName="figcaption" + onFocus={ this.onSelectCaption } unstableOnFocus={ this.onSelectCaption } value={ caption } /> diff --git a/src/components/media-filter-control/test/media-filter-control.cypress.js b/src/components/media-filter-control/test/media-filter-control.cypress.js index f08904c6717..8066d18cd8a 100644 --- a/src/components/media-filter-control/test/media-filter-control.cypress.js +++ b/src/components/media-filter-control/test/media-filter-control.cypress.js @@ -2,7 +2,7 @@ * Include our constants */ import * as helpers from '../../../../.dev/tests/cypress/helpers'; -import { getWPDataObject } from '../../../../.dev/tests/cypress/helpers'; +import { getWPDataObject, isWP63AtLeast } from '../../../../.dev/tests/cypress/helpers'; const filters = [ 'Original', @@ -105,10 +105,12 @@ describe( 'Test CoBlocks Media Filter Control component', function() { .should( 'exist' ) .click(); - helpers.selectBlock( 'Gallery' ); + if ( ! isWP63AtLeast() ) { + helpers.selectBlock( 'Gallery' ); - cy.get( '.block-editor-block-toolbar__slot .components-coblocks-media-filter' ) - .click(); + cy.get( '.block-editor-block-toolbar__slot .components-coblocks-media-filter' ) + .click(); + } let childIteration = 1; diff --git a/src/extensions/lightbox-controls/styles/style.scss b/src/extensions/lightbox-controls/styles/style.scss index 63948331f36..d693e9a42e3 100644 --- a/src/extensions/lightbox-controls/styles/style.scss +++ b/src/extensions/lightbox-controls/styles/style.scss @@ -5,6 +5,9 @@ padding-right: 16px; } -.edit-post-sidebar .coblocks-lightbox-controls { - display: none; +.components-panel__row.coblocks-lightbox-controls { + display: flex; + margin-top: 0; + padding-left: 16px; + padding-right: 16px; } diff --git a/src/extensions/media-text-styles/test/media-text-styles.cypress.js b/src/extensions/media-text-styles/test/media-text-styles.cypress.js index c8745134c8d..9887e755e41 100644 --- a/src/extensions/media-text-styles/test/media-text-styles.cypress.js +++ b/src/extensions/media-text-styles/test/media-text-styles.cypress.js @@ -20,11 +20,7 @@ describe( 'Test CoBlocks Media Text styles extension', function() { selectBlock(); - if ( helpers.isWP62AtLeast() ) { - helpers.setNewBlockStyle( 'card' ); - } else { - helpers.setBlockStyle( 'card' ); - } + helpers.setNewBlockStyle( 'card' ); cy.get( '.edit-post-visual-editor .wp-block-media-text.is-style-card' ).should( 'exist' ); helpers.savePage(); @@ -34,11 +30,7 @@ describe( 'Test CoBlocks Media Text styles extension', function() { helpers.editPage(); selectBlock(); - if ( helpers.isWP62AtLeast() ) { - helpers.setNewBlockStyle( 'overlap' ); - } else { - helpers.setBlockStyle( 'overlap' ); - } + helpers.setNewBlockStyle( 'overlap' ); cy.get( '.edit-post-visual-editor .wp-block-media-text.is-style-overlap' ).should( 'exist' ); helpers.savePage(); @@ -48,11 +40,7 @@ describe( 'Test CoBlocks Media Text styles extension', function() { helpers.editPage(); selectBlock(); - if ( helpers.isWP62AtLeast() ) { - helpers.setNewBlockStyle( 'outline' ); - } else { - helpers.setBlockStyle( 'outline' ); - } + helpers.setNewBlockStyle( 'outline' ); cy.get( '.edit-post-visual-editor .wp-block-media-text.is-style-outline' ).should( 'exist' ); helpers.savePage(); diff --git a/src/utils/helper.js b/src/utils/helper.js index ded94a116ca..41868569099 100644 --- a/src/utils/helper.js +++ b/src/utils/helper.js @@ -204,7 +204,7 @@ export const getColorClassnames = ( blockProps ) => { * @return {Object?} The active style.name. */ export const getColorStyles = ( blockProps ) => { - const { backgroundColor, color } = blockProps.style; + const { backgroundColor, color } = blockProps.style || {}; const originalStyles = { ...blockProps.style }; const descendingStyles = { backgroundColor, color };