Merge branch 'master' into feature/heartbeat-autosaving

# Conflicts:
#	editor/components/provider/index.js

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,12 +1,12 @@
 ## Description
-<!-- Please describe your changes -->
+<!-- Please describe what you have changed or added -->
 
-## How Has This Been Tested?
+## How has this been tested?
 <!-- Please describe in detail how you tested your changes. -->
 <!-- Include details of your testing environment, tests ran to see how -->
 <!-- your change affects other areas of the code, etc. -->
 
-## Screenshots (jpeg or gifs if applicable):
+## Screenshots <!-- if applicable -->
 
 ## Types of changes
 <!-- What types of changes does your code introduce?  -->
@@ -16,5 +16,6 @@
 
 ## Checklist:
 - [ ] My code is tested.
-- [ ] My code follows the WordPress code style.
-- [ ] My code has proper inline documentation.
+- [ ] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ -->
+- [ ] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ -->
+- [ ] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ -->

blocks/README.md

@@ -275,12 +275,6 @@ buttons. This is useful for block-level modifications to be made available when
 a block is selected. For example, if your block supports alignment, you may
 want to display alignment options in the selected block's toolbar.
 
-Because the toolbar should only be shown when the block is selected, it is
-important that a `BlockControls` element is only returned when the block's
-`isSelected` prop is
-[truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy),
-meaning that the block is currently selected.
-
 Example:
 
 ```js
@@ -292,15 +286,13 @@ Example:
 	function edit( props ) {
 		return [
 			// Controls: (only visible when block is selected)
-			props.isSelected && (
-				el( BlockControls, { key: 'controls' },
-					el( AlignmentToolbar, {
-						value: props.align,
-						onChange: function( nextAlign ) {
-							props.setAttributes( { align: nextAlign } )
-						}
-					} )
-				)
+			el( BlockControls, { key: 'controls' },
+				el( AlignmentToolbar, {
+					value: props.align,
+					onChange: function( nextAlign ) {
+						props.setAttributes( { align: nextAlign } )
+					}
+				} )
 			),
 
 			// Block content: (with alignment as attribute)

blocks/api/post.pegjs

@@ -161,19 +161,19 @@ function partition( predicate, list ) {
 //////////////////////////////////////////////////////
 
 Block_List
-  = pre:$(!Token .)*
-    ts:(t:Token html:$((!Token .)*) { /** <?php return array( $t, $html ); ?> **/ return [ t, html ] })*
+  = pre:$(!Block .)*
+    bs:(b:Block html:$((!Block .)*) { /** <?php return array( $b, $html ); ?> **/ return [ b, html ] })*
     post:$(.*)
-  { /** <?php return peg_join_blocks( $pre, $ts, $post ); ?> **/
-    return joinBlocks( pre, ts, post );
+  { /** <?php return peg_join_blocks( $pre, $bs, $post ); ?> **/
+    return joinBlocks( pre, bs, post );
   }
 
-Token
+Block
   = Block_Void
   / Block_Balanced
 
 Block_Void
-  = "<!--" WS+ "wp:" blockName:Block_Name WS+ attrs:(a:Block_Attributes WS+ {
+  = "<!--" __ "wp:" blockName:Block_Name __ attrs:(a:Block_Attributes __ {
     /** <?php return $a; ?> **/
     return a;
   })? "/-->"
@@ -196,7 +196,7 @@ Block_Void
   }
 
 Block_Balanced
-  = s:Block_Start children:(Token / $(!Block_End .))* e:Block_End
+  = s:Block_Start children:(Block / $(!Block_End .))* e:Block_End
   {
     /** <?php
     list( $innerHTML, $innerBlocks ) = peg_array_partition( $children, 'is_string' );
@@ -222,7 +222,7 @@ Block_Balanced
   }
 
 Block_Start
-  = "<!--" WS+ "wp:" blockName:Block_Name WS+ attrs:(a:Block_Attributes WS+ {
+  = "<!--" __ "wp:" blockName:Block_Name __ attrs:(a:Block_Attributes __ {
     /** <?php return $a; ?> **/
     return a;
   })? "-->"
@@ -241,7 +241,7 @@ Block_Start
   }
 
 Block_End
-  = "<!--" WS+ "/wp:" blockName:Block_Name WS+ "-->"
+  = "<!--" __ "/wp:" blockName:Block_Name __ "-->"
   {
     /** <?php
     return array(
@@ -272,23 +272,11 @@ Block_Name_Part
   = $( [a-z][a-z0-9_-]* )
 
 Block_Attributes
-  = attrs:$("{" (!("}" WS+ """/"? "-->") .)* "}")
+  = attrs:$("{" (!("}" __ """/"? "-->") .)* "}")
   {
     /** <?php return json_decode( $attrs, true ); ?> **/
     return maybeJSON( attrs );
   }
 
-WS
-  = [ \t\r\n]
-
-Newline
-  = [\r\n]
-
-_
-  = [ \t]
-
 __
-  = _+
-
-Any
-  = .
+  = [ \t\r\n]+

blocks/block-controls/index.js

@@ -1,13 +1,25 @@
 /**
  * WordPress dependencies
  */
-import { Toolbar, Fill } from '@wordpress/components';
-
-export default function BlockControls( { controls, children } ) {
-	return (
-		<Fill name="Block.Toolbar">
-			<Toolbar controls={ controls } />
-			{ children }
-		</Fill>
-	);
-}
+import { createSlotFill, Toolbar } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ifBlockEditSelected } from '../block-edit/context';
+
+const Fill = createSlotFill( 'BlockControls' );
+const { Slot } = Fill;
+
+const BlockControlsFill = ( { controls, children } ) => (
+	<Fill>
+		<Toolbar controls={ controls } />
+		{ children }
+	</Fill>
+);
+
+const BlockControls = ifBlockEditSelected( BlockControlsFill );
+
+BlockControls.Slot = Slot;
+
+export default BlockControls;

blocks/block-controls/test/index.js

@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import BlockControls from '../';
+import { BlockControls } from '../';
 
 describe( 'BlockControls', () => {
 	const controls = [
@@ -27,7 +27,9 @@ describe( 'BlockControls', () => {
 		},
 	];
 
-	test( 'Should render a dynamic toolbar of controls', () => {
+	// Skipped temporarily until Enzyme publishes new version that works with React 16.3.0 APIs.
+	// eslint-disable-next-line jest/no-disabled-tests
+	test.skip( 'Should render a dynamic toolbar of controls', () => {
 		expect( shallow( <BlockControls controls={ controls } children={ <p>Child</p> } /> ) ).toMatchSnapshot();
 	} );
 } );

blocks/block-edit/context.js

@@ -0,0 +1,49 @@
+/**
+ * External dependencies
+ */
+import { createContext, createHigherOrderComponent } from '@wordpress/element';
+
+const { Consumer, Provider } = createContext( {
+	isSelected: true,
+} );
+
+export { Provider as BlockEditContextProvider };
+
+/**
+ * A Higher Order Component used to inject BlockEdit context to the
+ * wrapped component.
+ *
+ * @param {Component} OriginalComponent Component to wrap.
+ *
+ * @return {Component} Component which has BlockEdit context injected.
+ */
+export const withBlockEditContext = createHigherOrderComponent( ( OriginalComponent ) => {
+	return ( props ) => (
+		<Consumer>
+			{ ( context ) => (
+				<OriginalComponent
+					{ ...props }
+					blockEditContext={ context }
+				/>
+			) }
+		</Consumer>
+	);
+}, 'withBlockEditContext' );
+
+/**
+ * A Higher Order Component used to render conditionally the wrapped
+ * component only when the BlockEdit has selected state set.
+ *
+ * @param {Component} OriginalComponent Component to wrap.
+ *
+ * @return {Component} Component which renders only when the BlockEdit is selected.
+ */
+export const ifBlockEditSelected = createHigherOrderComponent( ( OriginalComponent ) => {
+	return ( props ) => (
+		<Consumer>
+			{ ( { isSelected } ) => isSelected && (
+				<OriginalComponent { ...props } />
+			) }
+		</Consumer>
+	);
+}, 'ifBlockEditSelected' );

blocks/block-edit/index.js

@@ -19,8 +19,14 @@ import {
 	getBlockDefaultClassName,
 	hasBlockSupport,
 } from '../api';
+import { BlockEditContextProvider } from './context';
 
 export class BlockEdit extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {};
+	}
+
 	getChildContext() {
 		const {
 			id: uid,
@@ -37,6 +43,18 @@ export class BlockEdit extends Component {
 		};
 	}
 
+	static getDerivedStateFromProps( nextProps, prevState ) {
+		if ( nextProps.isSelected === get( prevState, [ 'context', 'isSelected' ] ) ) {
+			return null;
+		}
+
+		return {
+			context: {
+				isSelected: nextProps.isSelected,
+			},
+		};
+	}
+
 	render() {
 		const { name, attributes = {}, isSelected } = this.props;
 		const blockType = getBlockType( name );
@@ -59,12 +77,14 @@ export class BlockEdit extends Component {
 		// For backwards compatibility concerns adds a focus and setFocus prop
 		// These should be removed after some time (maybe when merging to Core)
 		return (
-			<Edit
-				{ ...this.props }
-				className={ className }
-				focus={ isSelected ? {} : false }
-				setFocus={ noop }
-			/>
+			<BlockEditContextProvider value={ this.state.context }>
+				<Edit
+					{ ...this.props }
+					className={ className }
+					focus={ isSelected ? {} : false }
+					setFocus={ noop }
+				/>
+			</BlockEditContextProvider>
 		);
 	}
 }

blocks/block-edit/test/index.js

@@ -38,7 +38,7 @@ describe( 'BlockEdit', () => {
 
 		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
 
-		expect( wrapper.type() ).toBe( edit );
+		expect( wrapper.find( edit ) ).toBePresent();
 	} );
 
 	it( 'should use save implementation of block as fallback', () => {
@@ -51,7 +51,7 @@ describe( 'BlockEdit', () => {
 
 		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
 
-		expect( wrapper.type() ).toBe( save );
+		expect( wrapper.find( save ) ).toBePresent();
 	} );
 
 	it( 'should combine the default class name with a custom one', () => {
@@ -70,6 +70,6 @@ describe( 'BlockEdit', () => {
 			<BlockEdit name="core/test-block" attributes={ attributes } />
 		);
 
-		expect( wrapper.prop( 'className' ) ).toBe( 'wp-block-test-block my-class' );
+		expect( wrapper.find( edit ) ).toHaveClassName( 'wp-block-test-block my-class' );
 	} );
 } );

blocks/block-format-controls/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { ifBlockEditSelected } from '../block-edit/context';
+
+const Fill = createSlotFill( 'BlockFormatControls' );
+const { Slot } = Fill;
+
+const BlockFormatControls = ifBlockEditSelected( Fill );
+
+BlockFormatControls.Slot = Slot;
+
+export default BlockFormatControls;

blocks/hooks/test/align.js

@@ -123,7 +123,9 @@ describe( 'align', () => {
 			expect( wrapper.children() ).toHaveLength( 1 );
 		} );
 
-		it( 'should render toolbar controls if valid alignments', () => {
+		// Skipped temporarily until Enzyme publishes new version that works with React 16.3.0 APIs.
+		// eslint-disable-next-line jest/no-disabled-tests
+		it.skip( 'should render toolbar controls if valid alignments', () => {
 			registerBlockType( 'core/foo', {
 				...blockSettings,
 				supports: {

blocks/index.js

@@ -18,6 +18,7 @@ export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as Autocomplete } from './autocomplete';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';
+export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as ColorPalette } from './color-palette';

blocks/inspector-advanced-controls/index.js

@@ -3,4 +3,16 @@
  */
 import { createSlotFill } from '@wordpress/components';
 
-export default createSlotFill( 'InspectorAdvancedControls' );
+/**
+ * Internal dependencies
+ */
+import { ifBlockEditSelected } from '../block-edit/context';
+
+const Fill = createSlotFill( 'InspectorAdvancedControls' );
+const { Slot } = Fill;
+
+const InspectorAdvancedControls = ifBlockEditSelected( Fill );
+
+InspectorAdvancedControls.Slot = Slot;
+
+export default InspectorAdvancedControls;