Initial commit

WordPress · Sep 1, 2021 · 33503ea · 33503ea
1 parent 9506b08
commit 33503ea
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 33 deletions.
diff --git a/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js b/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js
@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BlockPreview from '../block-preview';
+import { getActiveStyle, replaceActiveStyle } from './utils';
+
+export default function BlockStylesPreviewPanel( {
+	genericPreviewBlock,
+	viewportWidth,
+	style,
+	className,
+	activeStyle,
+} ) {
+	const styleClassName = replaceActiveStyle(
+		className,
+		activeStyle,
+		style
+	);
+	const previewBlocks = useMemo( () => {
+		return {
+			...genericPreviewBlock,
+			attributes: {
+				...genericPreviewBlock.attributes,
+				className: styleClassName + ' block-editor-block-styles__block-preview-container',
+			},
+		};
+	}, [ genericPreviewBlock, styleClassName ] );
+
+	return (
+		<div className="block-editor-block-styles__preview-container">
+			<div className="block-editor-block-styles__preview-content">
+				<BlockPreview
+					viewportWidth={ viewportWidth }
+					blocks={ previewBlocks }
+				/>
+			</div>
+			<div className="block-editor-block-styles__preview-panel-label">
+				{ style.label || style.name }
+			</div>
+		</div>
+	);
+}
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import {useCallback, useMemo, useState} from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { _x } from '@wordpress/i18n';
@@ -17,12 +17,13 @@ import {
 	getBlockFromExample,
 	store as blocksStore,
 } from '@wordpress/blocks';
-
+import { Button, Popover} from '@wordpress/components';
 /**
  * Internal dependencies
  */
 import { getActiveStyle, replaceActiveStyle } from './utils';
 import BlockPreview from '../block-preview';
+import BlockStylesPreviewPanel from './block-styles-preview-panel';
 import { store as blockEditorStore } from '../../store';
 
 const EMPTY_OBJECT = {};
@@ -75,6 +76,13 @@ function BlockStyles( {
 
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const genericPreviewBlock = useGenericPreviewBlock( block, type );
+	const [ hoveredStyle, setHoveredStyle ] = useState( null );
+	const onStyleHover = useCallback(
+		( item ) => {
+			setHoveredStyle( item );
+		},
+		[ setHoveredStyle ]
+	);
 
 	if ( ! styles || styles.length === 0 ) {
 		return null;
@@ -91,37 +99,82 @@ function BlockStyles( {
 				...styles,
 		  ];
 
+	/* TODO
+		- get top offset of styles panel
+		- create a portal into the Editor content container `interface-interface-skeleton__content` or the block-editor__container
+		- inject the preview and assign right:0
+
+	 */
 	const activeStyle = getActiveStyle( renderedStyles, className );
 	return (
 		<div className="block-editor-block-styles">
-			{ renderedStyles.map( ( style ) => {
-				const styleClassName = replaceActiveStyle(
-					className,
-					activeStyle,
-					style
-				);
-				return (
-					<BlockStyleItem
+			<div className="block-editor-block-styles__variants">
+				{ renderedStyles.map( ( style ) => {
+					const styleClassName = replaceActiveStyle(
+						className,
+						activeStyle,
+						style
+					);
+					const buttonText = style.label || style.name;
+
+					return (
+						<Button
+							className={ classnames( 'block-editor-block-styles__button', {
+								'is-active': activeStyle === style,
+							} ) }
+							key={ style.name }
+							variant="secondary"
+							label={ buttonText }
+							onMouseEnter={ () => onStyleHover( style ) }
+							onMouseLeave={ () => setHoveredStyle( null ) }
+							onClick={ () => {
+								updateBlockAttributes( clientId, {
+									className: styleClassName,
+								} );
+								onHoverClassName( null );
+								setHoveredStyle( null );
+								onSwitch();
+							} }
+						> { buttonText } </Button>
+						// <BlockStyleItem
+						// 	genericPreviewBlock={ genericPreviewBlock }
+						// 	viewportWidth={ type.example?.viewportWidth ?? 500 }
+						// 	className={ className }
+						// 	isActive={ activeStyle === style }
+						// 	key={ style.name }
+						// 	onSelect={ () => {
+						// 		updateBlockAttributes( clientId, {
+						// 			className: styleClassName,
+						// 		} );
+						// 		onHoverClassName( null );
+						// 		onSwitch();
+						// 	} }
+						// 	onBlur={ () => onHoverClassName( null ) }
+						// 	onHover={ () => {
+						// 		onHoverClassName( styleClassName );
+						// 	} }
+						// 	style={ style }
+						// 	styleClassName={ styleClassName }
+						// 	itemRole={ itemRole }
+						// />
+					);
+				} ) }
+			</div>
+			{ hoveredStyle && (
+				<Popover
+					className="block-editor-block-styles__popover"
+					position="middle left"
+					focusOnMount={ false }
+				>
+					<BlockStylesPreviewPanel
+						activeStyle={ activeStyle }
+						className={ className }
 						genericPreviewBlock={ genericPreviewBlock }
+						style={ hoveredStyle }
 						viewportWidth={ type.example?.viewportWidth ?? 500 }
-						className={ className }
-						isActive={ activeStyle === style }
-						key={ style.name }
-						onSelect={ () => {
-							updateBlockAttributes( clientId, {
-								className: styleClassName,
-							} );
-							onHoverClassName( null );
-							onSwitch();
-						} }
-						onBlur={ () => onHoverClassName( null ) }
-						onHover={ () => onHoverClassName( styleClassName ) }
-						style={ style }
-						styleClassName={ styleClassName }
-						itemRole={ itemRole }
 					/>
-				);
-			} ) }
+				</Popover>
+			) }
 		</div>
 	);
 }

diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
@@ -1,9 +1,3 @@
-.block-editor-block-styles {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-}
-
 .block-editor-block-styles__item {
 	width: calc(50% - #{ $grid-unit-05 });
 	margin: $grid-unit-05 0;
@@ -42,6 +36,66 @@
 	}
 }
 
+// Block style previews
+.block-editor-block-styles__popover {
+	width: 300px;
+}
+
+// Applied to block containers to make them stretch the width of the preview pane.
+.block-editor-block-styles__block-preview-container {
+
+}
+
+.block-editor-block-styles__preview-container {
+	display: none;
+	width: 300px;
+	background: $white;
+	border-radius: $radius-block-ui;
+	border: $border-width solid $gray-300;
+	max-height: calc(100% - #{$grid-unit-40});
+	overflow-y: hidden;
+	@include break-medium {
+		display: block;
+	}
+}
+
+.block-editor-block-styles__preview-content {
+	min-height: $grid-unit-60 * 3;
+	background: $gray-100;
+	display: grid;
+	flex-grow: 1;
+	align-items: center;
+}
+
+.block-editor-block-styles__preview-panel-label {
+	font-weight: bold;
+	color: $gray-900;
+	padding: 8px 0 8px 10px
+}
+
+.block-editor-block-styles__variants {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-bottom: $grid-unit-20;
+
+	.block-editor-block-styles__button {
+	  color: $gray-700;
+	  box-shadow: inset 0 0 0 1px $gray-700;
+	  display: inline-block;
+	  min-width: calc(50% - #{$grid-unit-05});
+	  margin-bottom: $grid-unit-10;
+
+	  &.is-active,
+	  &:focus,
+	  &:hover:not( :disabled ) {
+	  	 color: $gray-900;
+	  	 box-shadow: inset 0 0 0 2px $gray-900;
+	  	 font-weight: bold;
+	  }
+	}
+}
+
 // Show a little preview thumbnail for style variations.
 .block-editor-block-styles__item-preview {
 	outline: $border-width solid transparent; // Shown in Windows High Contrast mode.