Skip to content

Commit

Permalink
Removed unused style fixture
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd
ramonjd committed Jun 27, 2024
1 parent 2e3c9d8 commit 55cc60c
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 35 deletions.
27 changes: 15 additions & 12 deletions packages/block-editor/src/hooks/block-style-variation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,18 +69,14 @@ function OverrideStyles( { override } ) {
* This component is used to generate new block style variation overrides
* based on an incoming theme config. If a matching style is found in the config,
* a new override is created and returned. The overrides can be used in conjunction with
* useStyleOverride to apply the new styles to the editor.
* NOTE: This component is required to load global styles revisions config. Style variation overrides are
* generated using the canvas's current global styles (see useBlockStyleVariation()). This component is,
* however, due to be refactored and therefore it's use elsewhere is not recommended.
* useStyleOverride to apply the new styles to the editor. Its use is
* subject to change.
*
* @param {Object} props Props.
* @param {Object} props.config A global styles object, containing settings and styles.
* @return {JSX.Element} An array of new block variation overrides.
* @return {JSX.Element|undefined} An array of new block variation overrides.
*/
export function ExperimentalBlockStyleVariationOverridesWithConfig( {
config,
} ) {
export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
const { getBlockStyles, overrides } = useSelect(
( select ) => ( {
getBlockStyles: select( blocksStore ).getBlockStyles,
Expand All @@ -91,8 +87,11 @@ export function ExperimentalBlockStyleVariationOverridesWithConfig( {
const { getBlockName } = useSelect( blockEditorStore );

const overridesWithConfig = useMemo( () => {
if ( ! overrides?.length ) {
return;
}
const newOverrides = [];
const clientIds = [];
const overriddenClientIds = [];
for ( const [ , override ] of overrides ) {
if (
override?.variation &&
Expand All @@ -101,7 +100,7 @@ export function ExperimentalBlockStyleVariationOverridesWithConfig( {
* Because this component overwrites existing style overrides,
* filter out any overrides that are already present in the store.
*/
! clientIds.includes( override.clientId )
! overriddenClientIds.includes( override.clientId )
) {
const blockName = getBlockName( override.clientId );
const configStyles =
Expand Down Expand Up @@ -161,12 +160,16 @@ export function ExperimentalBlockStyleVariationOverridesWithConfig( {
// correct CSS cascade is maintained.
clientId: override.clientId,
} );
clientIds.push( override.clientId );
overriddenClientIds.push( override.clientId );
}
}
}
return newOverrides;
}, [ config, overrides, getBlockStyles ] );
}, [ config, overrides, getBlockStyles, getBlockName ] );

if ( ! overridesWithConfig || ! overridesWithConfig.length ) {
return;
}

return (
<>
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/hooks/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,4 +88,4 @@ export { getTypographyClassesAndStyles } from './use-typography-props';
export { getGapCSSValue } from './gap';
export { useCachedTruthy } from './use-cached-truthy';
export { useZoomOut } from './use-zoom-out';
export { ExperimentalBlockStyleVariationOverridesWithConfig } from './block-style-variation';
export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';
4 changes: 2 additions & 2 deletions packages/block-editor/src/private-apis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { BlockRemovalWarningModal } from './components/block-removal-warning-mod
import {
useLayoutClasses,
useLayoutStyles,
ExperimentalBlockStyleVariationOverridesWithConfig,
__unstableBlockStyleVariationOverridesWithConfig,
} from './hooks';
import DimensionsTool from './components/dimensions-tool';
import ResolutionTool from './components/resolution-tool';
Expand Down Expand Up @@ -92,5 +92,5 @@ lock( privateApis, {
PrivatePublishDateTimePicker,
useSpacingSizes,
useBlockDisplayTitle,
ExperimentalBlockStyleVariationOverridesWithConfig,
__unstableBlockStyleVariationOverridesWithConfig,
} );
4 changes: 2 additions & 2 deletions packages/edit-site/src/components/revisions/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const {
ExperimentalBlockEditorProvider,
GlobalStylesContext,
useGlobalStylesOutputWithConfig,
ExperimentalBlockStyleVariationOverridesWithConfig,
__unstableBlockStyleVariationOverridesWithConfig,
} = unlock( blockEditorPrivateApis );
const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );

Expand Down Expand Up @@ -93,7 +93,7 @@ function Revisions( { userConfig, blocks } ) {
* so they can access any registered style overrides.
*/ }
<EditorStyles styles={ editorStyles } />
<ExperimentalBlockStyleVariationOverridesWithConfig
<__unstableBlockStyleVariationOverridesWithConfig
config={ mergedConfig }
/>
</ExperimentalBlockEditorProvider>
Expand Down
99 changes: 81 additions & 18 deletions test/e2e/specs/site-editor/block-style-variations.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ test.describe( 'Block Style Variations', () => {
requestUtils.activateTheme(
'gutenberg-test-themes/style-variations'
),
requestUtils.deleteAllPages(),
] );
stylesPostId = await requestUtils.getCurrentThemeGlobalStylesPostId();
} );
Expand Down Expand Up @@ -57,32 +56,43 @@ test.describe( 'Block Style Variations', () => {
await page.getByRole( 'tab', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: 'Block Style Variation A' } )
.click( { force: true } );
.click();

// Check parent styles.
// Check parent styles have variation A styles.
await expect( firstGroup ).toHaveCSS( 'border-style', 'dotted' );
await expect( firstGroup ).toHaveCSS( 'border-width', '1px' );

// Check nested child and grandchild group block inherited styles.
// Check nested child and grandchild group block variation A inherited styles.
await expect( secondGroup ).toHaveCSS( 'border-style', 'solid' );
await expect( secondGroup ).toHaveCSS( 'border-width', '11px' );
await expect( thirdGroup ).toHaveCSS( 'border-style', 'solid' );
await expect( thirdGroup ).toHaveCSS( 'border-width', '11px' );

// Apply a block style to the first, nested Group block.
// Apply a block style to the nested child Group block.
await editor.selectBlocks( secondGroup );
await page.getByRole( 'tab', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: 'Block Style Variation B' } )
.click( { force: true } );
.click();

// Check nested child styles.
// Check nested child styles have variation B styles.
await expect( secondGroup ).toHaveCSS( 'border-style', 'dashed' );
await expect( secondGroup ).toHaveCSS( 'border-width', '2px' );

// Check nested grandchild group block inherited styles.
// Check nested grandchild Group block variation B inherited styles.
await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
await expect( thirdGroup ).toHaveCSS( 'border-width', '22px' );

// Apply a block style to the nested grandchild Group block.
await editor.selectBlocks( thirdGroup );
await page.getByRole( 'tab', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: 'Block Style Variation A' } )
.click();

// Check that the child's inner block styles from variation B are overridden by the grandchild's block style variation A.
await expect( thirdGroup ).toHaveCSS( 'border-style', 'dotted' );
await expect( thirdGroup ).toHaveCSS( 'border-width', '1px' );
} );

test( 'update block style variations in global styles and check revisions match styles', async ( {
Expand All @@ -108,16 +118,17 @@ test.describe( 'Block Style Variations', () => {
await page.getByRole( 'tab', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: 'Block Style Variation A' } )
.click( { force: true } );
.click();

// Apply a block style to the first, nested Group block.
await editor.selectBlocks( secondGroup );
await page.getByRole( 'tab', { name: 'Styles' } ).click();
await page
.getByRole( 'button', { name: 'Block Style Variation B' } )
.click( { force: true } );
.click();

// Update user global styles with new block style variation values.
// First revision.
await siteEditorBlockStyleVariations.saveRevision( stylesPostId, {
blocks: {
'core/group': {
Expand All @@ -138,14 +149,41 @@ test.describe( 'Block Style Variations', () => {
},
},
} );
// The save button has been re-enabled.
await expect(
page
.getByRole( 'region', { name: 'Editor top bar' } )
.getByRole( 'button', { name: 'Save' } )
).toBeEnabled();
// Second revision (current).
await siteEditorBlockStyleVariations.saveRevision( stylesPostId, {
blocks: {
'core/group': {
variations: {
'block-style-variation-a': {
border: {
width: '7px',
style: 'dotted',
},
},
'block-style-variation-b': {
border: {
width: '8px',
style: 'dotted',
},
},
},
},
},
} );

// Check parent styles.
await expect( firstGroup ).toHaveCSS( 'border-style', 'outset' );
await expect( firstGroup ).toHaveCSS( 'border-width', '3px' );
await expect( firstGroup ).toHaveCSS( 'border-style', 'dotted' );
await expect( firstGroup ).toHaveCSS( 'border-width', '7px' );

// Check nested child styles.
await expect( secondGroup ).toHaveCSS( 'border-style', 'double' );
await expect( secondGroup ).toHaveCSS( 'border-width', '4px' );
await expect( secondGroup ).toHaveCSS( 'border-style', 'dotted' );
await expect( secondGroup ).toHaveCSS( 'border-width', '8px' );

// Check nested grandchild group block inherited styles.
await expect( thirdGroup ).toHaveCSS( 'border-style', 'groove' );
Expand Down Expand Up @@ -182,21 +220,46 @@ test.describe( 'Block Style Variations', () => {
.locator( '[data-type="core/group"]' )
.nth( 2 );

// Check parent styles.
// Check parent styles have current revision.
await expect( revisionFirstGroup ).toHaveCSS(
'border-style',
'outset'
'dotted'
);
await expect( revisionFirstGroup ).toHaveCSS( 'border-width', '7px' );

// Check nested child styles have current revision.
await expect( revisionSecondGroup ).toHaveCSS(
'border-style',
'dotted'
);
await expect( revisionSecondGroup ).toHaveCSS( 'border-width', '8px' );

// Check nested grandchild group block inherited styles from current revision.
await expect( revisionThirdGroup ).toHaveCSS(
'border-style',
'groove'
);
await expect( revisionThirdGroup ).toHaveCSS( 'border-width', '22px' );

// Click on previous revision.
await page
.getByRole( 'button', {
name: /^Changes saved by /,
} )
.nth( 1 )
.click();

// Check parent styles have previous revision.
await expect( revisionFirstGroup ).toHaveCSS( 'border-width', '3px' );

// Check nested child styles.
// Check nested child style have previous revision.
await expect( revisionSecondGroup ).toHaveCSS(
'border-style',
'double'
);
await expect( revisionSecondGroup ).toHaveCSS( 'border-width', '4px' );

// Check nested grandchild group block inherited styles.
// Check nested grandchild group block inherited styles from previous revision.
await expect( revisionThirdGroup ).toHaveCSS(
'border-style',
'groove'
Expand Down

0 comments on commit 55cc60c

Please sign in to comment.