Merge branch 'master' into fix/3839-undelayed-slot-prop-update

blocks/alignment-toolbar/index.js

@@ -32,7 +32,7 @@ export default function AlignmentToolbar( { value, onChange } ) {
 				return {
 					...control,
 					isActive,
-					onClick: () => onChange( isActive ? null : align ),
+					onClick: () => onChange( isActive ? undefined : align ),
 				};
 			} ) }
 		/>

blocks/alignment-toolbar/test/index.js

@@ -24,13 +24,13 @@ describe( 'AlignmentToolbar', () => {
 		expect( wrapper ).toMatchSnapshot();
 	} );
 
-	test( 'should call on change with null when a control is already active', () => {
+	test( 'should call on change with undefined when a control is already active', () => {
 		const activeControl = controls.find( ( { isActive } ) => isActive );
 		activeControl.onClick();
 
 		expect( activeControl.align ).toBe( alignment );
 		expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
-		expect( onChangeSpy ).toHaveBeenCalledWith( null );
+		expect( onChangeSpy ).toHaveBeenCalledWith( undefined );
 	} );
 
 	test( 'should call on change a new value when the control is not active', () => {

blocks/library/audio/index.js

@@ -6,7 +6,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Button, Dashicon, Placeholder, Toolbar } from '@wordpress/components';
+import { Button, IconButton, Placeholder, Toolbar } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 
 /**
@@ -99,13 +99,12 @@ registerBlockType( 'core/audio', {
 						onChange={ updateAlignment }
 					/>
 					<Toolbar>
-						<Button
+						<IconButton
 							className="components-icon-button components-toolbar__control"
-							aria-label={ __( 'Edit audio' ) }
+							label={ __( 'Edit audio' ) }
 							onClick={ switchToEditing }
-						>
-							<Dashicon icon="edit" />
-						</Button>
+							icon="edit"
+						/>
 					</Toolbar>
 				</BlockControls>
 			);

blocks/library/cover-image/index.js

@@ -103,6 +103,7 @@ registerBlockType( 'core/cover-image', {
 			}
 		);
 
+		const editButtonLabel = __( 'Edit image' );
 		const controls = focus && [
 			<BlockControls key="controls">
 				<BlockAlignmentToolbar
@@ -114,11 +115,12 @@ registerBlockType( 'core/cover-image', {
 					<MediaUploadButton
 						buttonProps={ {
 							className: 'components-icon-button components-toolbar__control',
-							'aria-label': __( 'Edit image' ),
+							'aria-label': editButtonLabel,
 						} }
 						onSelect={ onSelectImage }
 						type="image"
 						value={ id }
+						tooltip={ editButtonLabel }
 					>
 						<Dashicon icon="edit" />
 					</MediaUploadButton>

blocks/library/freeform/editor.scss

@@ -234,10 +234,28 @@
 	}
 }
 
-.mce-tooltip {
-	display: none;
+.components-toolbar__control .dashicon {
+	display: block;
 }
 
-.components-toolbar__control .dashicon {
+
+.mce-widget.mce-tooltip {
 	display: block;
+	opacity: initial;
+
+	.mce-tooltip-inner {
+		padding: 4px 12px;
+		background: $dark-gray-400;
+		border-width: 0;
+		color: white;
+		white-space: nowrap;
+		box-shadow: none;
+		font-size: $default-font-size;
+		border-radius: 0;
+	}
+
+	.mce-tooltip-arrow {
+		border-top-color: $dark-gray-400;
+		border-bottom-color: $dark-gray-400;
+	}
 }

blocks/library/gallery/block.js

@@ -127,6 +127,15 @@ class GalleryBlock extends Component {
 		);
 	}
 
+	componentWillReceiveProps( nextProps ) {
+		// Deselect images when losing focus
+		if ( ! nextProps.focus && this.props.focus ) {
+			this.setState( {
+				selectedImage: null,
+			} );
+		}
+	}
+
 	render() {
 		const { attributes, focus, className } = this.props;
 		const { images, columns = defaultColumnsNumber( attributes ), align, imageCrop, linkTo } = attributes;
@@ -137,6 +146,7 @@ class GalleryBlock extends Component {
 			/>
 		);
 
+		const editButtonLabel = __( 'Edit Gallery' );
 		const controls = (
 			focus && (
 				<BlockControls key="controls">
@@ -149,13 +159,14 @@ class GalleryBlock extends Component {
 							<MediaUploadButton
 								buttonProps={ {
 									className: 'components-icon-button components-toolbar__control',
-									'aria-label': __( 'Edit Gallery' ),
+									'aria-label': editButtonLabel,
 								} }
 								onSelect={ this.onSelectImages }
 								type="image"
 								multiple
 								gallery
 								value={ images.map( ( img ) => img.id ) }
+								tooltip={ editButtonLabel }
 							>
 								<Dashicon icon="edit" />
 							</MediaUploadButton>

blocks/library/image/block.js

@@ -121,6 +121,7 @@ class ImageBlock extends Component {
 		const uploadFromFiles = ( event ) => mediaUpload( event.target.files, setAttributes );
 		const dropFiles = ( files ) => mediaUpload( files, setAttributes );
 
+		const editButtonLabel = __( 'Edit image' );
 		const controls = (
 			focus && (
 				<BlockControls key="controls">
@@ -133,11 +134,12 @@ class ImageBlock extends Component {
 						<MediaUploadButton
 							buttonProps={ {
 								className: 'components-icon-button components-toolbar__control',
-								'aria-label': __( 'Edit image' ),
+								'aria-label': editButtonLabel,
 							} }
 							onSelect={ this.onSelectImage }
 							type="image"
 							value={ id }
+							tooltip={ editButtonLabel }
 						>
 							<Dashicon icon="edit" />
 						</MediaUploadButton>

blocks/library/latest-posts/block.js

@@ -70,7 +70,7 @@ class LatestPostsBlock extends Component {
 						value={ columns }
 						onChange={ ( value ) => setAttributes( { columns: value } ) }
 						min={ 2 }
-						max={ Math.min( MAX_POSTS_COLUMNS, latestPosts.length ) }
+						max={ ! hasPosts ? MAX_POSTS_COLUMNS : Math.min( MAX_POSTS_COLUMNS, latestPosts.length ) }
 					/>
 				}
 			</InspectorControls>
@@ -93,10 +93,9 @@ class LatestPostsBlock extends Component {
 		}
 
 		// Removing posts from display should be instant.
-		const postsDifference = latestPosts.length - postsToShow;
-		if ( postsDifference > 0 ) {
-			latestPosts.splice( postsToShow, postsDifference );
-		}
+		const displayPosts = latestPosts.length > postsToShow ?
+			latestPosts.slice( 0, postsToShow ) :
+			latestPosts;
 
 		const layoutControls = [
 			{
@@ -133,7 +132,7 @@ class LatestPostsBlock extends Component {
 				} ) }
 				key="latest-posts"
 			>
-				{ latestPosts.map( ( post, i ) =>
+				{ displayPosts.map( ( post, i ) =>
 					<li key={ i }>
 						<a href={ post.link } target="_blank">{ decodeEntities( post.title.rendered.trim() ) || __( '(Untitled)' ) }</a>
 						{ displayPostDate && post.date_gmt &&
@@ -155,6 +154,7 @@ export default withAPIData( ( props ) => {
 		order,
 		orderBy,
 		per_page: postsToShow,
+		_fields: [ 'date_gmt', 'link', 'title' ],
 	}, value => ! isUndefined( value ) ) );
 	return {
 		latestPosts: `/wp/v2/posts?${ queryString }`,

blocks/library/video/index.js

@@ -6,7 +6,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Placeholder, Toolbar, Dashicon, Button } from '@wordpress/components';
+import { Placeholder, Toolbar, IconButton, Button } from '@wordpress/components';
 import { Component } from '@wordpress/element';
 
 /**
@@ -100,13 +100,12 @@ registerBlockType( 'core/video', {
 						onChange={ updateAlignment }
 					/>
 					<Toolbar>
-						<Button
+						<IconButton
 							className="components-icon-button components-toolbar__control"
-							aria-label={ __( 'Edit video' ) }
+							label={ __( 'Edit video' ) }
 							onClick={ switchToEditing }
-						>
-							<Dashicon icon="edit" />
-						</Button>
+							icon="edit"
+						/>
 					</Toolbar>
 				</BlockControls>
 			);

blocks/media-upload-button/index.js

@@ -3,7 +3,7 @@
  */
 import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Tooltip } from '@wordpress/components';
 import { pick } from 'lodash';
 
 // Getter for the sake of unit tests.
@@ -149,13 +149,19 @@ class MediaUploadButton extends Component {
 	}
 
 	render() {
-		const { children, buttonProps } = this.props;
+		const { children, buttonProps, tooltip } = this.props;
 
-		return (
+		let element = (
 			<Button onClick={ this.openModal } { ...buttonProps }>
 				{ children }
 			</Button>
 		);
+
+		if ( tooltip ) {
+			element = <Tooltip text={ tooltip }>{ element }</Tooltip>;
+		}
+
+		return element;
 	}
 }
 

components/dropdown-menu/index.js

@@ -54,6 +54,7 @@ function DropdownMenu( {
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
 						label={ label }
+						tooltip={ label }
 					>
 						<Dashicon icon="arrow-down" />
 					</IconButton>

components/icon-button/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
+import { isString, isArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,6 +23,16 @@ class IconButton extends Component {
 	render() {
 		const { icon, children, label, className, tooltip, focus, ...additionalProps } = this.props;
 		const classes = classnames( 'components-icon-button', className );
+		const tooltipText = tooltip || label;
+
+		// Should show the tooltip if an explicit tooltip is passed
+		// or if there's a label and the children are empty and the tooltip is not explicitely disabled
+		const showTooltip = !! tooltip ||
+			(
+				label &&
+				( ! children || ( isArray( children ) && ! children.length ) ) &&
+				false !== tooltip
+			);
 
 		let element = (
 			<Button { ...additionalProps } aria-label={ label } className={ classes } focus={ focus }>
@@ -31,8 +41,8 @@ class IconButton extends Component {
 			</Button>
 		);
 
-		if ( label && ! children && false !== tooltip ) {
-			element = <Tooltip text={ tooltip || label }>{ element }</Tooltip>;
+		if ( showTooltip ) {
+			element = <Tooltip text={ tooltipText }>{ element }</Tooltip>;
 		}
 
 		return element;

components/icon-button/test/index.js

@@ -61,5 +61,11 @@ describe( 'IconButton', () => {
 			expect( iconButton.name() ).toBe( 'Button' );
 			expect( iconButton.prop( 'aria-label' ) ).toBe( 'WordPress' );
 		} );
+
+		it( 'should show the tooltip for empty children', () => {
+			const iconButton = shallow( <IconButton label="WordPress" children={ [] } /> );
+			expect( iconButton.name() ).toBe( 'Tooltip' );
+			expect( iconButton.prop( 'text' ) ).toBe( 'WordPress' );
+		} );
 	} );
 } );

docs/blocks-controls.md

@@ -31,7 +31,10 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-04', {
 			type: 'array',
 			source: 'children',
 			selector: 'p',
-		}
+		},
+		alignment: {
+			type: 'string',
+		},
 	},
 
 	edit: function( props ) {
@@ -76,9 +79,10 @@ registerBlockType( 'gutenberg-boilerplate-es5/hello-world-step-04', {
 	},
 
 	save: function( props ) {
-		var content = props.attributes.content;
+		var content = props.attributes.content,
+			alignment = props.attributes.alignment;
 
-		return el( 'p', { className: props.className }, content );
+		return el( 'p', { className: props.className, style: { textAlign: alignment } }, content );
 	},
 } );
 ```
@@ -105,6 +109,9 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
 			source: 'children',
 			selector: 'p',
 		},
+		alignment: {
+			type: 'string',
+		},
 	},
 
 	edit( { attributes, className, focus, setAttributes, setFocus } ) {
@@ -141,9 +148,9 @@ registerBlockType( 'gutenberg-boilerplate-esnext/hello-world-step-04', {
 	},
 
 	save( { attributes, className } ) {
-		const { content } = attributes;
+		const { content, alignment } = attributes;
 
-		return <p className={ className }>{ content }</p>;
+		return <p className={ className } style={ textAlign: alignment }>{ content }</p>;
 	},
 } );
 ```

editor/components/block-switcher/index.js

@@ -46,6 +46,7 @@ function BlockSwitcher( { blocks, onTransform, isLocked } ) {
 						onToggle();
 					}
 				};
+				const label = __( 'Change block type' );
 
 				return (
 					<Toolbar>
@@ -55,7 +56,8 @@ function BlockSwitcher( { blocks, onTransform, isLocked } ) {
 							onClick={ onToggle }
 							aria-haspopup="true"
 							aria-expanded={ isOpen }
-							label={ __( 'Change block type' ) }
+							label={ label }
+							tooltip={ label }
 							onKeyDown={ openOnArrowDown }
 						>
 							<Dashicon icon="arrow-down" />

editor/edit-post/sidebar/header.js

@@ -32,9 +32,9 @@ const SidebarHeader = ( { panel, onSetPanel, onToggleSidebar, count } ) => {
 			<button
 				onClick={ () => onSetPanel( 'block' ) }
 				className={ `editor-sidebar__panel-tab ${ panel === 'block' ? 'is-active' : '' }` }
-				aria-label={ __( 'Block settings' ) }
+				aria-label={ __( 'Format settings' ) }
 			>
-				{ sprintf( _n( 'Block', '%d Blocks', count ), count ) }
+				{ sprintf( _n( 'Format', 'Format (%d)', count ), count ) }
 			</button>
 			<IconButton
 				onClick={ closeSidebar }