-
- { stylesToRender.map( ( style ) => {
- const buttonText = style.label || style.name;
-
- return (
-
- );
- } ) }
-
+
+ { stylesToRender.map( ( blockStyle, index ) => (
+ hoverStyleHandler( blockStyle ) }
+ onMouseLeave={ () => hoverStyleHandler( null ) }
+ onFocus={ () => hoverStyleHandler( blockStyle ) }
+ onBlur={ () => hoverStyleHandler( null ) }
+ >
+
+
+ ) ) }
+
{ hoveredStyle && ! isMobileViewport && (
styleItemHandler( null ) }
+ onMouseLeave={ () => hoverStyleHandler( null ) }
>
{
- const { getBlock } = select( blockEditorStore );
+ const { getBlock, getSettings } = select( blockEditorStore );
const block = getBlock( clientId );
if ( ! block ) {
return {};
}
+
const blockType = getBlockType( block.name );
const { getBlockStyles } = select( blocksStore );
+ const styles = getBlockStyles( block.name );
+
+ // Add theme.json styles for each block style if available.
+ const variations =
+ getSettings().__experimentalStyles?.blocks?.[ block.name ]
+ ?.variations ?? {};
+
+ if ( variations ) {
+ styles?.forEach( ( style, index ) => {
+ if ( variations[ style.name ] ) {
+ styles[ index ].styles = variations[ style.name ];
+ }
+ } );
+ }
return {
block,
blockType,
- styles: getBlockStyles( block.name ),
+ styles,
className: block.attributes.className || '',
};
};
From 3cedbd02178a0372fdafb6261c0cfa780feb8dd0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 22 Dec 2023 14:34:00 +1000
Subject: [PATCH 5/5] Prevent example styles being inlined preventing correct
block style previews
---
packages/block-library/src/group/index.js | 8 --------
1 file changed, 8 deletions(-)
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 2d06f1a965c52..1ccfa4fa89c1a 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -22,14 +22,6 @@ export { metadata, name };
export const settings = {
icon,
example: {
- attributes: {
- style: {
- color: {
- text: '#000000',
- background: '#ffffff',
- },
- },
- },
innerBlocks: [
{
name: 'core/paragraph',