Skip to content

Commit

Permalink
Cover Block: Fix regressions (#36406)
Browse files Browse the repository at this point in the history
* Set default dim to 50% for media and 100% for solids
Co-authored-by: Glen Davies <glen.davies@a8c.com>
  • Loading branch information
WunderBart authored and andrewserong committed Nov 16, 2021
1 parent ec25a18 commit c51a153
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 9 deletions.
7 changes: 7 additions & 0 deletions packages/block-library/src/cover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,22 @@
* - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545
* - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545
*/

// the first selector is required for old Cover markup
&.has-background-dim:not([class*="-background-color"]),
.has-background-dim:not([class*="-background-color"]) {
background-color: $black;
}

// the first selector is required for old Cover markup
&.has-background-dim::before,
.has-background-dim::before {
content: "";
background-color: inherit;
}

// the first selector is required for old Cover markup
&.has-background-dim:not(.has-background-gradient)::before,
.has-background-dim:not(.has-background-gradient)::before,
.wp-block-cover__gradient-background {
position: absolute;
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/cover/transforms.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ const transforms = {
createBlock(
'core/cover',
{
dimRatio: 50,
url,
alt,
align,
Expand All @@ -43,6 +44,7 @@ const transforms = {
createBlock(
'core/cover',
{
dimRatio: 50,
url: src,
align,
id,
Expand Down
38 changes: 29 additions & 9 deletions packages/e2e-tests/specs/editor/blocks/cover.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,13 @@ import {
insertBlock,
createNewPost,
openDocumentSettingsSidebar,
transformBlockTo,
} from '@wordpress/e2e-test-utils';

async function upload( selector ) {
await page.waitForSelector( selector );
const inputElement = await page.$( selector );
const inputElement = await page.waitForSelector(
`${ selector } input[type="file"]`
);
const testImagePath = path.join(
__dirname,
'..',
Expand All @@ -30,9 +32,7 @@ async function upload( selector ) {
const tmpFileName = path.join( os.tmpdir(), filename + '.png' );
fs.copyFileSync( testImagePath, tmpFileName );
await inputElement.uploadFile( tmpFileName );
await page.waitForSelector(
`.wp-block-cover img[src$="${ filename }.png"]`
);
await page.waitForSelector( `${ selector } img[src$="${ filename }.png"]` );
return filename;
}

Expand Down Expand Up @@ -68,9 +68,7 @@ describe( 'Cover', () => {
it( 'can set background image using image upload on block placeholder', async () => {
await insertBlock( 'Cover' );
// Create the block using uploaded image
const sourceImageFilename = await upload(
'.wp-block-cover input[type="file"]'
);
const sourceImageFilename = await upload( '.wp-block-cover' );
// Get the block's background image URL
const blockImage = await page.waitForSelector( '.wp-block-cover img' );
const blockImageUrl = await blockImage.evaluate( ( el ) => el.src );
Expand All @@ -81,7 +79,7 @@ describe( 'Cover', () => {
it( 'dims background image down by 50% by default', async () => {
await insertBlock( 'Cover' );
// Create the block using uploaded image
await upload( '.wp-block-cover input[type="file"]' );
await upload( '.wp-block-cover' );
// Get the block's background dim color and its opacity
const backgroundDim = await page.waitForSelector(
'.wp-block-cover .has-background-dim'
Expand Down Expand Up @@ -194,4 +192,26 @@ describe( 'Cover', () => {
)
).toBeGreaterThan( 100 );
} );

it( 'dims the background image down by 50% when transformed from the Image block', async () => {
await insertBlock( 'Image' );
// Upload image and transform to the Cover block
await upload( '.wp-block-image' );
await transformBlockTo( 'Cover' );

// Get the block's background dim color and its opacity
const backgroundDim = await page.waitForSelector(
'.wp-block-cover .has-background-dim'
);
const [
backgroundDimColor,
backgroundDimOpacity,
] = await page.evaluate( ( el ) => {
const computedStyle = window.getComputedStyle( el );
return [ computedStyle.backgroundColor, computedStyle.opacity ];
}, backgroundDim );

expect( backgroundDimColor ).toBe( 'rgb(0, 0, 0)' );
expect( backgroundDimOpacity ).toBe( '0.5' );
} );
} );

0 comments on commit c51a153

Please sign in to comment.