Blocks: Improve UI for all Inspector Controls (#5995)

* Blcoks: Improve UI for all Inspector Controls * Blocks: Fix custom size slider for Paragraph block
WordPress · Apr 5, 2018 · e7efe5b · e7efe5b
1 parent 12090fe
commit e7efe5b
Show file tree

Hide file tree

Showing 15 changed files with 209 additions and 167 deletions.
diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
@@ -3,7 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Dashicon, IconButton, PanelColor, ToggleControl, withFallbackStyles } from '@wordpress/components';
+import {
+	Dashicon,
+	IconButton,
+	PanelBody,
+	PanelColor,
+	ToggleControl,
+	withFallbackStyles,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -96,29 +103,31 @@ class ButtonBlock extends Component {
 				/>
 				{ isSelected &&
 					<InspectorControls key="inspector">
-						<ToggleControl
-							label={ __( 'Wrap text' ) }
-							checked={ !! clear }
-							onChange={ this.toggleClear }
-						/>
-						<PanelColor title={ __( 'Background Color' ) } colorValue={ color } >
-							<ColorPalette
-								value={ color }
-								onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
+						<PanelBody>
+							<ToggleControl
+								label={ __( 'Wrap text' ) }
+								checked={ !! clear }
+								onChange={ this.toggleClear }
 							/>
-						</PanelColor>
-						<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } >
-							<ColorPalette
-								value={ textColor }
-								onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
-							/>
-						</PanelColor>
-						{ this.nodeRef && <ContrastCheckerWithFallbackStyles
-							node={ this.nodeRef }
-							textColor={ textColor }
-							backgroundColor={ color }
-							isLargeText={ true }
-						/> }
+							<PanelColor title={ __( 'Background Color' ) } colorValue={ color } >
+								<ColorPalette
+									value={ color }
+									onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
+								/>
+							</PanelColor>
+							<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } >
+								<ColorPalette
+									value={ textColor }
+									onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+								/>
+							</PanelColor>
+							{ this.nodeRef && <ContrastCheckerWithFallbackStyles
+								node={ this.nodeRef }
+								textColor={ textColor }
+								backgroundColor={ color }
+								isLargeText={ true }
+							/> }
+						</PanelBody>
 					</InspectorControls>
 				}
 			</span>,

diff --git a/blocks/library/categories/block.js b/blocks/library/categories/block.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { Placeholder, Spinner, ToggleControl } from '@wordpress/components';
+import { PanelBody, Placeholder, Spinner, ToggleControl } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { times, unescape } from 'lodash';
@@ -148,22 +148,23 @@ class CategoriesBlock extends Component {
 
 		const inspectorControls = focus && (
 			<InspectorControls key="inspector">
-				<h3>{ __( 'Categories Settings' ) }</h3>
-				<ToggleControl
-					label={ __( 'Display as dropdown' ) }
-					checked={ displayAsDropdown }
-					onChange={ this.toggleDisplayAsDropdown }
-				/>
-				<ToggleControl
-					label={ __( 'Show post counts' ) }
-					checked={ showPostCounts }
-					onChange={ this.toggleShowPostCounts }
-				/>
-				<ToggleControl
-					label={ __( 'Show hierarchy' ) }
-					checked={ showHierarchy }
-					onChange={ this.toggleShowHierarchy }
-				/>
+				<PanelBody title={ __( 'Categories Settings' ) }>
+					<ToggleControl
+						label={ __( 'Display as dropdown' ) }
+						checked={ displayAsDropdown }
+						onChange={ this.toggleDisplayAsDropdown }
+					/>
+					<ToggleControl
+						label={ __( 'Show post counts' ) }
+						checked={ showPostCounts }
+						onChange={ this.toggleShowPostCounts }
+					/>
+					<ToggleControl
+						label={ __( 'Show hierarchy' ) }
+						checked={ showHierarchy }
+						onChange={ this.toggleShowHierarchy }
+					/>
+				</PanelBody>
 			</InspectorControls>
 		);
 

diff --git a/blocks/library/columns/index.js b/blocks/library/columns/index.js
@@ -9,7 +9,7 @@ import memoize from 'memize';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { RangeControl } from '@wordpress/components';
+import { PanelBody, RangeControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -84,17 +84,19 @@ export const settings = {
 					/>
 				</BlockControls>,
 				<InspectorControls key="inspector">
-					<RangeControl
-						label={ __( 'Columns' ) }
-						value={ columns }
-						onChange={ ( nextColumns ) => {
-							setAttributes( {
-								columns: nextColumns,
-							} );
-						} }
-						min={ 2 }
-						max={ 6 }
-					/>
+					<PanelBody>
+						<RangeControl
+							label={ __( 'Columns' ) }
+							value={ columns }
+							onChange={ ( nextColumns ) => {
+								setAttributes( {
+									columns: nextColumns,
+								} );
+							} }
+							min={ 2 }
+							max={ 6 }
+						/>
+					</PanelBody>
 				</InspectorControls>,
 			] : [],
 			<div className={ classes } key="container">

diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -147,20 +147,21 @@ export const settings = {
 				</Toolbar>
 			</BlockControls>,
 			<InspectorControls key="inspector">
-				<h2>{ __( 'Cover Image Settings' ) }</h2>
-				<ToggleControl
-					label={ __( 'Fixed Background' ) }
-					checked={ !! hasParallax }
-					onChange={ toggleParallax }
-				/>
-				<RangeControl
-					label={ __( 'Background Dimness' ) }
-					value={ dimRatio }
-					onChange={ setDimRatio }
-					min={ 0 }
-					max={ 100 }
-					step={ 10 }
-				/>
+				<PanelBody title={ __( 'Cover Image Settings' ) }>
+					<ToggleControl
+						label={ __( 'Fixed Background' ) }
+						checked={ !! hasParallax }
+						onChange={ toggleParallax }
+					/>
+					<RangeControl
+						label={ __( 'Background Dimness' ) }
+						value={ dimRatio }
+						onChange={ setDimRatio }
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+					/>
+				</PanelBody>
 				<PanelBody title={ __( 'Text Alignment' ) }>
 					{ alignmentToolbar }
 				</PanelBody>

diff --git a/blocks/library/gallery/block.js b/blocks/library/gallery/block.js
@@ -13,6 +13,7 @@ import {
 	IconButton,
 	DropZone,
 	FormFileUpload,
+	PanelBody,
 	RangeControl,
 	SelectControl,
 	ToggleControl,
@@ -206,25 +207,26 @@ class GalleryBlock extends Component {
 			controls,
 			isSelected && (
 				<InspectorControls key="inspector">
-					<h2>{ __( 'Gallery Settings' ) }</h2>
-					{ images.length > 1 && <RangeControl
-						label={ __( 'Columns' ) }
-						value={ columns }
-						onChange={ this.setColumnsNumber }
-						min={ 1 }
-						max={ Math.min( MAX_COLUMNS, images.length ) }
-					/> }
-					<ToggleControl
-						label={ __( 'Crop Images' ) }
-						checked={ !! imageCrop }
-						onChange={ this.toggleImageCrop }
-					/>
-					<SelectControl
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ this.setLinkTo }
-						options={ linkOptions }
-					/>
+					<PanelBody title={ __( 'Gallery Settings' ) }>
+						{ images.length > 1 && <RangeControl
+							label={ __( 'Columns' ) }
+							value={ columns }
+							onChange={ this.setColumnsNumber }
+							min={ 1 }
+							max={ Math.min( MAX_COLUMNS, images.length ) }
+						/> }
+						<ToggleControl
+							label={ __( 'Crop Images' ) }
+							checked={ !! imageCrop }
+							onChange={ this.toggleImageCrop }
+						/>
+						<SelectControl
+							label={ __( 'Link to' ) }
+							value={ linkTo }
+							onChange={ this.setLinkTo }
+							options={ linkOptions }
+						/>
+					</PanelBody>
 				</InspectorControls>
 			),
 			<ul key="gallery" className={ `${ className } align${ align } columns-${ columns } ${ imageCrop ? 'is-cropped' : '' }` }>

diff --git a/blocks/library/heading/index.js b/blocks/library/heading/index.js
@@ -3,7 +3,7 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { concatChildren } from '@wordpress/element';
-import { Toolbar } from '@wordpress/components';
+import { PanelBody, Toolbar } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -121,26 +121,27 @@ export const settings = {
 			),
 			isSelected && (
 				<InspectorControls key="inspector">
-					<h3>{ __( 'Heading Settings' ) }</h3>
-					<p>{ __( 'Level' ) }</p>
-					<Toolbar
-						controls={
-							'123456'.split( '' ).map( ( level ) => ( {
-								icon: 'heading',
-								title: sprintf( __( 'Heading %s' ), level ),
-								isActive: 'H' + level === nodeName,
-								onClick: () => setAttributes( { nodeName: 'H' + level } ),
-								subscript: level,
-							} ) )
-						}
-					/>
-					<p>{ __( 'Text Alignment' ) }</p>
-					<AlignmentToolbar
-						value={ align }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { align: nextAlign } );
-						} }
-					/>
+					<PanelBody title={ __( 'Heading Settings' ) }>
+						<p>{ __( 'Level' ) }</p>
+						<Toolbar
+							controls={
+								'123456'.split( '' ).map( ( level ) => ( {
+									icon: 'heading',
+									title: sprintf( __( 'Heading %s' ), level ),
+									isActive: 'H' + level === nodeName,
+									onClick: () => setAttributes( { nodeName: 'H' + level } ),
+									subscript: level,
+								} ) )
+							}
+						/>
+						<p>{ __( 'Text Alignment' ) }</p>
+						<AlignmentToolbar
+							value={ align }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { align: nextAlign } );
+							} }
+						/>
+					</PanelBody>
 				</InspectorControls>
 			),
 			<RichText

diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
@@ -19,6 +19,7 @@ import { Component, compose } from '@wordpress/element';
 import { getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
 import {
 	IconButton,
+	PanelBody,
 	SelectControl,
 	TextControl,
 	Toolbar,
@@ -201,19 +202,25 @@ class ImageBlock extends Component {
 			controls,
 			isSelected && (
 				<InspectorControls key="inspector">
-					<h2>{ __( 'Image Settings' ) }</h2>
-					<TextControl label={ __( 'Textual Alternative' ) } value={ alt } onChange={ this.updateAlt } help={ __( 'Describe the purpose of the image. Leave empty if the image is not a key part of the content.' ) } />
-					{ ! isEmpty( availableSizes ) && (
-						<SelectControl
-							label={ __( 'Size' ) }
-							value={ url }
-							options={ map( availableSizes, ( size, name ) => ( {
-								value: size.source_url,
-								label: startCase( name ),
-							} ) ) }
-							onChange={ this.updateImageURL }
+					<PanelBody title={ __( 'Image Settings' ) }>
+						<TextControl
+							label={ __( 'Textual Alternative' ) }
+							value={ alt }
+							onChange={ this.updateAlt }
+							help={ __( 'Describe the purpose of the image. Leave empty if the image is not a key part of the content.' ) }
 						/>
-					) }
+						{ ! isEmpty( availableSizes ) && (
+							<SelectControl
+								label={ __( 'Size' ) }
+								value={ url }
+								options={ map( availableSizes, ( size, name ) => ( {
+									value: size.source_url,
+									label: startCase( name ),
+								} ) ) }
+								onChange={ this.updateImageURL }
+							/>
+						) }
+					</PanelBody>
 				</InspectorControls>
 			),
 			<figure key="image" className={ classes } style={ figureStyle }>