Skip to content

Instantly share code, notes, and snippets.

@obenland

obenland/demo.diff

Created Jul 30, 2019
Embed
What would you like to do?
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 2485c73e9..ad77a6965 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -72,6 +72,7 @@ function BlockStyles( {
block,
onSwitch = noop,
onHoverClassName = noop,
+ allBlocks,
} ) {
if ( ! styles || styles.length === 0 ) {
return null;
@@ -97,55 +98,61 @@ function BlockStyles( {
}
return (
- <div className="editor-block-styles block-editor-block-styles">
- { styles.map( ( style ) => {
- const styleClassName = replaceActiveStyle( className, activeStyle, style );
- return (
- <div
- key={ style.name }
- className={ classnames(
- 'editor-block-styles__item block-editor-block-styles__item', {
- 'is-active': activeStyle === style,
- }
- ) }
- onClick={ () => updateClassName( style ) }
- onKeyDown={ ( event ) => {
- if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
- event.preventDefault();
- updateClassName( style );
- }
- } }
- onMouseEnter={ () => onHoverClassName( styleClassName ) }
- onMouseLeave={ () => onHoverClassName( null ) }
- role="button"
- tabIndex="0"
- aria-label={ style.label || style.name }
- >
- <div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
- <BlockPreviewContent
- blocks={ cloneBlock( block, {
- className: styleClassName,
- } ) }
- />
+ <>
+ <div className="editor-block-styles block-editor-block-styles">
+ { styles.map( ( style ) => {
+ const styleClassName = replaceActiveStyle( className, activeStyle, style );
+ return (
+ <div
+ key={ style.name }
+ className={ classnames(
+ 'editor-block-styles__item block-editor-block-styles__item', {
+ 'is-active': activeStyle === style,
+ }
+ ) }
+ onClick={ () => updateClassName( style ) }
+ onKeyDown={ ( event ) => {
+ if ( ENTER === event.keyCode || SPACE === event.keyCode ) {
+ event.preventDefault();
+ updateClassName( style );
+ }
+ } }
+ onMouseEnter={ () => onHoverClassName( styleClassName ) }
+ onMouseLeave={ () => onHoverClassName( null ) }
+ role="button"
+ tabIndex="0"
+ aria-label={ style.label || style.name }
+ >
+ <div className="editor-block-styles__item-preview block-editor-block-styles__item-preview">
+ <BlockPreviewContent
+ blocks={ cloneBlock( block, {
+ className: styleClassName,
+ } ) }
+ />
+ </div>
+ <div className="editor-block-styles__item-label block-editor-block-styles__item-label">
+ { style.label || style.name }
+ </div>
</div>
- <div className="editor-block-styles__item-label block-editor-block-styles__item-label">
- { style.label || style.name }
- </div>
- </div>
- );
- } ) }
- </div>
+ );
+ } ) }
+ </div>
+ <BlockPreviewContent
+ blocks={ allBlocks }
+ />
+ </>
);
}
export default compose( [
withSelect( ( select, { clientId } ) => {
- const { getBlock } = select( 'core/block-editor' );
+ const { getBlock, getBlocks } = select( 'core/block-editor' );
const { getBlockStyles } = select( 'core/blocks' );
const block = getBlock( clientId );
const blockType = getBlockType( block.name );
return {
+ allBlocks: getBlocks(),
block,
className: block.attributes.className || '',
styles: getBlockStyles( block.name ),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment