WIP

WordPress · Nov 17, 2017 · 8b6d3ec · 8b6d3ec
1 parent 50cbf5d
commit 8b6d3ec
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 47 deletions.
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -20,7 +20,6 @@ import AlignmentToolbar from '../../alignment-toolbar';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockControls from '../../block-controls';
 import Editable from '../../editable';
-import InspectorControls from '../../inspector-controls';
 import ToggleControl from '../../inspector-controls/toggle-control';
 import RangeControl from '../../inspector-controls/range-control';
 import ColorPalette from '../../color-palette';
@@ -93,9 +92,55 @@ registerBlockType( 'core/paragraph', {
 		}
 	},
 
+	inspector( { attributes, setAttributes } ) {
+		const { dropCap, fontSize, backgroundColor, textColor, width } = attributes;
+		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
+
+		return (
+			<div>
+				<BlockDescription>
+					<p>{ __( 'Text. Great things start here.' ) }</p>
+				</BlockDescription>
+				<PanelBody title={ __( 'Text Settings' ) }>
+					<ToggleControl
+						label={ __( 'Drop Cap' ) }
+						checked={ !! dropCap }
+						onChange={ toggleDropCap }
+					/>
+					<RangeControl
+						label={ __( 'Font Size' ) }
+						value={ fontSize || '' }
+						onChange={ ( value ) => setAttributes( { fontSize: value } ) }
+						min={ 10 }
+						max={ 200 }
+						beforeIcon="editor-textcolor"
+						allowReset
+					/>
+				</PanelBody>
+				<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
+					<ColorPalette
+						value={ backgroundColor }
+						onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
+					/>
+				</PanelColor>
+				<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } initialOpen={ false }>
+					<ColorPalette
+						value={ textColor }
+						onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+					/>
+				</PanelColor>
+				<PanelBody title={ __( 'Block Alignment' ) }>
+					<BlockAlignmentToolbar
+						value={ width }
+						onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
+					/>
+				</PanelBody>
+			</div>
+		);
+	},
+
 	edit( { attributes, setAttributes, insertBlocksAfter, focus, setFocus, mergeBlocks, onReplace } ) {
 		const { align, content, dropCap, placeholder, fontSize, backgroundColor, textColor, width } = attributes;
-		const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
 		const className = dropCap ? 'has-drop-cap' : null;
 
 		return [
@@ -109,47 +154,7 @@ registerBlockType( 'core/paragraph', {
 					/>
 				</BlockControls>
 			),
-			focus && (
-				<InspectorControls key="inspector">
-					<BlockDescription>
-						<p>{ __( 'Text. Great things start here.' ) }</p>
-					</BlockDescription>
-					<PanelBody title={ __( 'Text Settings' ) }>
-						<ToggleControl
-							label={ __( 'Drop Cap' ) }
-							checked={ !! dropCap }
-							onChange={ toggleDropCap }
-						/>
-						<RangeControl
-							label={ __( 'Font Size' ) }
-							value={ fontSize || '' }
-							onChange={ ( value ) => setAttributes( { fontSize: value } ) }
-							min={ 10 }
-							max={ 200 }
-							beforeIcon="editor-textcolor"
-							allowReset
-						/>
-					</PanelBody>
-					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
-						<ColorPalette
-							value={ backgroundColor }
-							onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
-						/>
-					</PanelColor>
-					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } initialOpen={ false }>
-						<ColorPalette
-							value={ textColor }
-							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
-						/>
-					</PanelColor>
-					<PanelBody title={ __( 'Block Alignment' ) }>
-						<BlockAlignmentToolbar
-							value={ width }
-							onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
-						/>
-					</PanelBody>
-				</InspectorControls>
-			),
+
 			<Autocomplete key="editable" completers={ [
 				blockAutocompleter( { onReplace } ),
 				userAutocompleter(),

diff --git a/editor/components/block-inspector/index.js b/editor/components/block-inspector/index.js
@@ -2,28 +2,76 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import { uniq, keys, flatten } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Slot } from '@wordpress/components';
+import { getBlockType } from '@wordpress/blocks';
 
 /**
  * Internal Dependencies
  */
 import './style.scss';
-import { getSelectedBlock, getSelectedBlockCount } from '../../selectors';
+import { getSelectedBlock, getSelectedBlockCount, getMultiSelectedBlocks } from '../../selectors';
 
-const BlockInspector = ( { selectedBlock, count } ) => {
+const BlockInspector = ( { selectedBlock, count, multiSelectedBlocks, onChange } ) => {
 	if ( count > 1 ) {
-		return <span className="editor-block-inspector__multi-blocks">{ __( 'Coming Soon' ) }</span>;
+		const names = uniq( multiSelectedBlocks.map( ( { name } ) => name ) );
+
+		if ( names.length === 1 ) {
+			const Inspector = getBlockType( names[ 0 ] ).inspector;
+
+			if ( ! Inspector ) {
+				return null;
+			}
+
+			const attributeArray = multiSelectedBlocks.map( ( block ) => block.attributes );
+			const attributeKeys = uniq( flatten( attributeArray.map( keys ) ) );
+			const attributes = attributeKeys.reduce( ( acc, key ) => {
+				acc[ key ] = attributeArray.reduce( ( accu, attrs ) => {
+					return accu === attrs[ key ] ? accu : undefined;
+				}, attributeArray[ 0 ][ key ] );
+				return acc;
+			}, {} );
+
+			const setAttributes = ( attrs ) => {
+				multiSelectedBlocks.forEach( ( block ) => {
+					onChange( block.uid, {
+						...block.attributes,
+						...attrs,
+					} );
+				} );
+			};
+
+			return (
+				<Inspector
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
+			);
+		}
+
+		return <span className="editor-block-inspector__multi-blocks">{ __( 'Various blocks' ) }</span>;
 	}
 
 	if ( ! selectedBlock ) {
 		return <span className="editor-block-inspector__no-blocks">{ __( 'No block selected.' ) }</span>;
 	}
 
+	const Inspector = getBlockType( selectedBlock.name ).inspector;
+
+	if ( Inspector ) {
+		return (
+			<Inspector
+				attributes={ selectedBlock.attributes }
+				setAttributes={ ( attrs ) => onChange( selectedBlock.uid, attrs ) }
+			/>
+		);
+	}
+
 	return (
 		<Slot name="Inspector.Controls" />
 	);
@@ -34,6 +82,16 @@ export default connect(
 		return {
 			selectedBlock: getSelectedBlock( state ),
 			count: getSelectedBlockCount( state ),
+			multiSelectedBlocks: getMultiSelectedBlocks( state ),
 		};
-	}
+	},
+	( dispatch ) => ( {
+		onChange( uid, attributes ) {
+			dispatch( {
+				type: 'UPDATE_BLOCK_ATTRIBUTES',
+				uid,
+				attributes,
+			} );
+		},
+	} ),
 )( BlockInspector );