Merge branch 'master' of https://github.com/WordPress/gutenberg into …

…rnmobile/fix-merge-content-not-refreshed-UI

* 'master' of https://github.com/WordPress/gutenberg:
  Fix the isBeingScheduled Selector.  (#11572)
  Slot/Fill pattern with Toolbar #199 (#11115)
  Add mechanism to avoid forced child selection on blocks with templates. (#10696)
  Allow a block to disable being converted into a reusable block; Fix: Column block (#11550)

docs/block-api.md

@@ -504,6 +504,13 @@ inserter: false,
 multiple: false,
 ```
 
+- `reusable` (default `true`): A block may want to disable the ability of being converted into a reusable block.
+By default all blocks can be converted to a reusable block. If supports reusable is set to false, the option to convert the block into a reusable block will not appear.
+
+```js
+// Don't allow the block to be converted into a reusable block.
+reusable: false,
+```
 ## Edit and Save
 
 The `edit` and `save` functions define the editor interface with which a user would interact, and the markup to be serialized back when a post is saved. They are the heart of how a block operates, so they are [covered separately](../docs/block-api/block-edit-save.md).

docs/data/data-core-editor.md

@@ -1532,8 +1532,8 @@ inserted, optionally at a specific index respective a root block list.
 
  * block: Block object to insert.
  * index: Index at which block should be inserted.
- * rootClientId: Optional root client ID of block list on which
-                              to insert.
+ * rootClientId: Optional root client ID of block list on which to insert.
+ * updateSelection: If true block selection will be updated. If false, block selection will not change. Defaults to true.
 
 ### insertBlocks
 
@@ -1544,8 +1544,8 @@ be inserted, optionally at a specific index respective a root block list.
 
  * blocks: Block objects to insert.
  * index: Index at which block should be inserted.
- * rootClientId: Optional root client ID of block list on
-                               which to insert.
+ * rootClientId: Optional root cliente ID of block list on which to insert.
+ * updateSelection: If true block selection will be updated.  If false, block selection will not change. Defaults to true.
 
 ### showInsertionPoint
 

packages/block-library/src/classic/index.js

@@ -31,6 +31,9 @@ export const settings = {
 	supports: {
 		className: false,
 		customClassName: false,
+		// Hide 'Add to Reusable Blocks' on Classic blocks. Showing it causes a
+		// confusing UX, because of its similarity to the 'Convert to Blocks' button.
+		reusable: false,
 	},
 
 	edit,

packages/block-library/src/code/edit.native.js

@@ -13,14 +13,19 @@ import { __ } from '@wordpress/i18n';
  */
 import { PlainText } from '@wordpress/editor';
 
+/**
+ * Block code style
+ */
+import styles from './theme.scss';
+
 // Note: styling is applied directly to the (nested) PlainText component. Web-side components
 // apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export default function CodeEdit( { attributes, setAttributes, style } ) {
 	return (
 		<View>
 			<PlainText
 				value={ attributes.content }
-				style={ style }
+				style={ [ style, styles.blockCode ] }
 				multiline={ true }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }

packages/block-library/src/code/theme.android.scss

@@ -0,0 +1,4 @@
+.blockCode {
+	font-family: monospace;
+}
+

packages/block-library/src/code/theme.ios.scss

@@ -0,0 +1,5 @@
+/* stylelint-disable font-family-no-missing-generic-family-keyword */
+.blockCode {
+	font-family: courier;
+}
+

packages/block-library/src/columns/column.js

@@ -20,6 +20,7 @@ export const settings = {
 
 	supports: {
 		inserter: false,
+		reusable: false,
 	},
 
 	edit() {

packages/block-library/src/heading/edit.native.js

@@ -13,7 +13,7 @@ import { View } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { RichText } from '@wordpress/editor';
+import { RichText, BlockControls } from '@wordpress/editor';
 import { parse, createBlock } from '@wordpress/blocks';
 
 /**
@@ -42,7 +42,9 @@ class HeadingEdit extends Component {
 
 		return (
 			<View>
-				<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
+				<BlockControls>
+					<HeadingToolbar minLevel={ 2 } maxLevel={ 5 } selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } />
+				</BlockControls>
 				<RichText
 					tagName={ tagName }
 					value={ content }

packages/block-library/src/missing/index.js

@@ -66,6 +66,7 @@ export const settings = {
 		customClassName: false,
 		inserter: false,
 		html: false,
+		reusable: false,
 	},
 
 	attributes: {

packages/block-library/src/paragraph/edit.native.js

@@ -11,7 +11,10 @@ import { Component } from '@wordpress/element';
 import { parse, createBlock } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
 
-const minHeight = 50;
+/**
+ * Import style
+ */
+import styles from './style.scss';
 
 const name = 'core/paragraph';
 
@@ -68,15 +71,17 @@ class ParagraphEdit extends Component {
 		const {
 			attributes,
 			setAttributes,
-			style,
 			mergeBlocks,
+			style,
 		} = this.props;
 
 		const {
 			placeholder,
 			content,
 		} = attributes;
 
+		const minHeight = styles.blockText.minHeight;
+
 		return (
 			<View>
 				<RichText

packages/block-library/src/paragraph/style.native.scss

@@ -0,0 +1,3 @@
+.blockText {
+	min-height: 50;
+}

packages/components/src/button/index.native.js

@@ -12,9 +12,9 @@ export default function Button( props ) {
 			onPress={ onClick }
 			style={ { borderColor: ariaPressed ? 'black' : 'white', borderWidth: 1, borderRadius: 2 } }
 		>
-			<View style={ { flex: 1, flexDirection: 'row' } }>
+			<View style={ { height: 44, width: 44, flexDirection: 'row', justifyContent: 'center', alignItems: 'center' } }>
 				{ children }
-				{ subscript && ( <Text style={ { fontVariant: [ 'small-caps' ], textAlignVertical: 'bottom' } }>{ subscript }</Text> ) }
+				{ subscript && ( <Text style={ { fontVariant: [ 'small-caps' ] } }>{ subscript }</Text> ) }
 			</View>
 		</TouchableOpacity>
 	);

packages/components/src/index.native.js

@@ -3,6 +3,7 @@ export * from './primitives';
 export { default as Dashicon } from './dashicon';
 export { default as Toolbar } from './toolbar';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill';
 
 // Higher-Order Components
 export { default as withFilters } from './higher-order/with-filters';

packages/components/src/toolbar/toolbar-container.native.js

@@ -4,7 +4,7 @@
 import { View } from 'react-native';
 
 export default ( props ) => (
-	<View style={ { flex: 1, flexDirection: 'row' } }>
+	<View style={ { flexDirection: 'row' } }>
 		{ props.children }
 	</View>
 );

packages/date/src/index.js

@@ -395,7 +395,7 @@ export function dateI18n( dateFormat, dateValue = new Date(), gmt = false ) {
 /**
  * Check whether a date is considered in the future according to the WordPress settings.
  *
- * @param {(Date|string)} dateValue  Date object or string.
+ * @param {string} dateValue Date String or Date object in the Defined WP Timezone.
  *
  * @return {boolean} Is in the future.
  */
@@ -406,4 +406,19 @@ export function isInTheFuture( dateValue ) {
 	return momentObject.isAfter( now );
 }
 
+/**
+ * Create and return a JavaScript Date Object from a date string in the WP timezone.
+ *
+ * @param {string?} dateString Date formatted in the WP timezone.
+ *
+ * @return {Date} Date
+ */
+export function getDate( dateString ) {
+	if ( ! dateString ) {
+		return momentLib.tz( 'WP' ).toDate();
+	}
+
+	return momentLib.tz( dateString, 'WP' ).toDate();
+}
+
 setupWPTimezone();

packages/date/src/test/index.js

@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import { isInTheFuture, getDate, setSettings, __experimentalGetSettings } from '../';
+
+describe( 'isInTheFuture', () => {
+	it( 'should return true if the date is in the future', () => {
+		// Create a Date object 1 minute in the future.
+		const date = new Date( Number( getDate() ) + ( 1000 * 60 ) );
+
+		expect( isInTheFuture( date ) ).toBe( true );
+	} );
+
+	it( 'should return true if the date is in the past', () => {
+		// Create a Date object 1 minute in the past.
+		const date = new Date( Number( getDate() ) - ( 1000 * 60 ) );
+
+		expect( isInTheFuture( date ) ).toBe( false );
+	} );
+
+	it( 'should ignore the timezone', () => {
+		const settings = __experimentalGetSettings();
+
+		// Set a timezone in the future
+		setSettings( {
+			...settings,
+			timezone: { offset: '4', string: '' },
+		} );
+		// Create a Date object 1 minute in the past.
+		let date = new Date( Number( getDate() ) - ( 1000 * 60 ) );
+		expect( isInTheFuture( date ) ).toBe( false );
+
+		// Create a Date object 1 minute in the future.
+		date = new Date( Number( getDate() ) + ( 1000 * 60 ) );
+		expect( isInTheFuture( date ) ).toBe( true );
+
+		// Restore default settings
+		setSettings( settings );
+	} );
+} );

packages/editor/src/components/block-settings-menu/reusable-block-convert-button.js

@@ -1,15 +1,15 @@
 /**
  * External dependencies
  */
-import { noop, every, map } from 'lodash';
+import { noop, every } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Fragment } from '@wordpress/element';
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { isReusableBlock } from '@wordpress/blocks';
+import { hasBlockSupport, isReusableBlock } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -50,31 +50,26 @@ export function ReusableBlockConvertButton( {
 export default compose( [
 	withSelect( ( select, { clientIds } ) => {
 		const {
-			getBlock,
+			getBlocksByClientId,
 			canInsertBlockType,
 			__experimentalGetReusableBlock: getReusableBlock,
 		} = select( 'core/editor' );
-		const {
-			getFreeformFallbackBlockName,
-			getUnregisteredFallbackBlockName,
-		} = select( 'core/blocks' );
 
-		const blocks = map( clientIds, ( clientId ) => getBlock( clientId ) );
+		const blocks = getBlocksByClientId( clientIds );
 
 		const isVisible = (
-			// Guard against the case where a regular block has *just* been converted to a
-			// reusable block and doesn't yet exist in the editor store.
-			every( blocks, ( block ) => !! block ) &&
-
 			// Hide 'Add to Reusable Blocks' when Reusable Blocks are disabled, i.e. when
 			// core/block is not in the allowed_block_types filter.
 			canInsertBlockType( 'core/block' ) &&
 
-			// Hide 'Add to Reusable Blocks' on Classic blocks. Showing it causes a
-			// confusing UX, because of its similarity to the 'Convert to Blocks' button.
-			( blocks.length !== 1 || (
-				blocks[ 0 ].name !== getFreeformFallbackBlockName() &&
-				blocks[ 0 ].name !== getUnregisteredFallbackBlockName()
+			every( blocks, ( block ) => (
+				// Guard against the case where a regular block has *just* been converted to a
+				// reusable block and doesn't yet exist in the editor store.
+				!! block &&
+				// Only show the option to covert to reusable blocks on valid blocks.
+				block.isValid &&
+				// Make sure the block supports being converted into a reusable block (by default that is the case).
+				hasBlockSupport( block.name, 'reusable', true )
 			) )
 		);
 

packages/editor/src/components/index.native.js

@@ -3,4 +3,6 @@ export * from './font-sizes';
 export { default as PlainText } from './plain-text';
 export { default as RichText } from './rich-text';
 export { default as MediaPlaceholder } from './media-placeholder';
+export { default as BlockFormatControls } from './block-format-controls';
+export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';

packages/editor/src/components/inner-blocks/README.md

@@ -90,6 +90,13 @@ const TEMPLATE = [ [ 'core/columns', {}, [
 
 The previous example creates an InnerBlocks area containing two columns one with an image and the other with a paragraph.
 
+### `templateInsertUpdatesSelection`
+* **Type:** `Boolean`
+* **Default:** `true`
+
+If true when child blocks in the template are inserted the selection is updated.
+If false the selection should not be updated when child blocks specified in the template are inserted.
+
 ### `templateLock`
 * **Type:** `String|Boolean`
 

packages/editor/src/components/inner-blocks/index.js

@@ -142,15 +142,15 @@ InnerBlocks = compose( [
 			insertBlocks,
 			updateBlockListSettings,
 		} = dispatch( 'core/editor' );
-		const { block, clientId } = ownProps;
+		const { block, clientId, templateInsertUpdatesSelection = true } = ownProps;
 
 		return {
 			replaceInnerBlocks( blocks ) {
 				const clientIds = map( block.innerBlocks, 'clientId' );
 				if ( clientIds.length ) {
 					replaceBlocks( clientIds, blocks );
 				} else {
-					insertBlocks( blocks, undefined, clientId );
+					insertBlocks( blocks, undefined, clientId, templateInsertUpdatesSelection );
 				}
 			},
 			updateNestedSettings( settings ) {

packages/editor/src/components/rich-text/index.native.js

@@ -14,6 +14,7 @@ import {
 import { Component, RawHTML } from '@wordpress/element';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { Toolbar } from '@wordpress/components';
+import { BlockFormatControls } from '@wordpress/editor';
 import {
 	isEmpty,
 	create,
@@ -345,9 +346,9 @@ export class RichText extends Component {
 
 		return (
 			<View>
-				<View style={ { flex: 1 } }>
+				<BlockFormatControls>
 					<Toolbar controls={ toolbarControls } />
-				</View>
+				</BlockFormatControls>
 				<RCTAztecView
 					ref={ ( ref ) => {
 						this._editor = ref;