Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover: Only show overlay controls when color support enabled #50115

Merged
merged 5 commits into from
May 1, 2023
Merged

Cover: Only show overlay controls when color support enabled #50115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8184513
Cover: Only show overlay controls when color support enabled
aaronrobertshaw Apr 27, 2023
f317a96
Add hasColorsOrGradients flag to useMultipleOriginColorsAndGradients …
aaronrobertshaw Apr 27, 2023
d9a2a0d
Use new flag to control cover overlay controls
aaronrobertshaw Apr 27, 2023
f4f0ebc
Update Cover block tests to cover conditional controls
aaronrobertshaw Apr 27, 2023
bbac907
Avoid mocking useMultipleOriginColorsAndGradients
aaronrobertshaw Apr 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions .../block-editor/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,12 @@ export default function useMultipleOriginColorsAndGradients() {
} );
}
return result;
}, [ defaultColors, themeColors, customColors ] );
}, [
defaultColors,
themeColors,
customColors,
shouldDisplayDefaultColors,
] );
Comment on lines +64 to +69
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added missing dep to keep linter happy.


const customGradients = useSetting( 'color.gradients.custom' );
const themeGradients = useSetting( 'color.gradients.theme' );
Expand Down Expand Up @@ -103,7 +108,16 @@ export default function useMultipleOriginColorsAndGradients() {
} );
}
return result;
}, [ customGradients, themeGradients, defaultGradients ] );
}, [
customGradients,
themeGradients,
defaultGradients,
shouldDisplayDefaultGradients,
] );
Comment on lines +111 to +116
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added missing dep to keep linter happy.


colorGradientSettings.hasColorsOrGradients =
!! colorGradientSettings.colors.length ||
!! colorGradientSettings.gradients.length;

return colorGradientSettings;
}
110 changes: 56 additions & 54 deletions packages/block-library/src/cover/edit/inspector-controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,62 +249,64 @@ export default function CoverInspectorControls( {
</PanelBody>
) }
</InspectorControls>
<InspectorControls group="color">
<ColorGradientSettingsDropdown
__experimentalIsRenderedInSidebar
settings={ [
{
colorValue: overlayColor.color,
gradientValue,
label: __( 'Overlay' ),
onColorChange: setOverlayColor,
onGradientChange: setGradient,
isShownByDefault: true,
resetAllFilter: () => ( {
overlayColor: undefined,
customOverlayColor: undefined,
gradient: undefined,
customGradient: undefined,
} ),
},
] }
panelId={ clientId }
{ ...colorGradientSettings }
/>
<ToolsPanelItem
hasValue={ () => {
// If there's a media background the dimRatio will be
// defaulted to 50 whereas it will be 100 for colors.
return dimRatio === undefined
? false
: dimRatio !== ( url ? 50 : 100 );
} }
label={ __( 'Overlay opacity' ) }
onDeselect={ () =>
setAttributes( { dimRatio: url ? 50 : 100 } )
}
resetAllFilter={ () => ( {
dimRatio: url ? 50 : 100,
} ) }
isShownByDefault
panelId={ clientId }
>
<RangeControl
__nextHasNoMarginBottom
{ colorGradientSettings.hasColorsOrGradients && (
<InspectorControls group="color">
<ColorGradientSettingsDropdown
__experimentalIsRenderedInSidebar
settings={ [
{
colorValue: overlayColor.color,
gradientValue,
label: __( 'Overlay' ),
onColorChange: setOverlayColor,
onGradientChange: setGradient,
isShownByDefault: true,
resetAllFilter: () => ( {
overlayColor: undefined,
customOverlayColor: undefined,
gradient: undefined,
customGradient: undefined,
} ),
},
] }
panelId={ clientId }
{ ...colorGradientSettings }
/>
<ToolsPanelItem
hasValue={ () => {
// If there's a media background the dimRatio will be
// defaulted to 50 whereas it will be 100 for colors.
return dimRatio === undefined
? false
: dimRatio !== ( url ? 50 : 100 );
} }
label={ __( 'Overlay opacity' ) }
value={ dimRatio }
onChange={ ( newDimRation ) =>
setAttributes( {
dimRatio: newDimRation,
} )
onDeselect={ () =>
setAttributes( { dimRatio: url ? 50 : 100 } )
}
min={ 0 }
max={ 100 }
step={ 10 }
required
/>
</ToolsPanelItem>
</InspectorControls>
resetAllFilter={ () => ( {
dimRatio: url ? 50 : 100,
} ) }
isShownByDefault
panelId={ clientId }
>
<RangeControl
__nextHasNoMarginBottom
label={ __( 'Overlay opacity' ) }
value={ dimRatio }
onChange={ ( newDimRation ) =>
setAttributes( {
dimRatio: newDimRation,
} )
}
min={ 0 }
max={ 100 }
step={ 10 }
required
/>
</ToolsPanelItem>
</InspectorControls>
) }
<InspectorControls group="dimensions">
<ToolsPanelItem
hasValue={ () => !! minHeight }
Expand Down
58 changes: 56 additions & 2 deletions packages/block-library/src/cover/test/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,34 @@ import {
selectBlock,
} from 'test/integration/helpers/integration-test-editor';

async function setup( attributes ) {
const defaultSettings = {
__experimentalFeatures: {
color: {
defaultPalette: true,
defaultGradients: true,
palette: {
default: [ { name: 'Black', slug: 'black', color: '#000000' } ],
},
},
},
colors: [ { name: 'Black', slug: 'black', color: '#000000' } ],
disableCustomColors: false,
disableCustomGradients: false,
};

const disabledColorSettings = {
color: {
defaultPalette: false,
defaultGradients: false,
},
disableCustomColors: true,
disableCustomGradients: true,
};

async function setup( attributes, useCoreBlocks, customSettings ) {
const testBlock = { name: 'core/cover', attributes };
return initializeEditor( testBlock );
const settings = customSettings || defaultSettings;
return initializeEditor( testBlock, useCoreBlocks, settings );
}

async function createAndSelectBlock() {
Expand Down Expand Up @@ -296,6 +321,35 @@ describe( 'Cover block', () => {

expect( overlay[ 0 ] ).toHaveClass( 'has-background-dim-30' );
} );

describe( 'when colors are disabled', () => {
test( 'does not render overlay control', async () => {
await setup( undefined, true, disabledColorSettings );
await createAndSelectBlock();
await userEvent.click(
screen.getByRole( 'tab', { name: 'Styles' } )
);

const overlayControl = screen.queryByRole( 'button', {
name: 'Overlay',
} );

expect( overlayControl ).not.toBeInTheDocument();
} );
test( 'does not render opacity control', async () => {
await setup( undefined, true, disabledColorSettings );
await createAndSelectBlock();
await userEvent.click(
screen.getByRole( 'tab', { name: 'Styles' } )
);

const opacityControl = screen.queryByRole( 'slider', {
name: 'Overlay opacity',
} );

expect( opacityControl ).not.toBeInTheDocument();
} );
} );
} );

describe( 'Dimensions panel', () => {
Expand Down