Merge branch 'master' into rnmobile/block-title-in-unsupported-block

packages/block-editor/src/store/effects.js

@@ -84,12 +84,31 @@ export default {
 		const blockB = getBlock( state, clientIdB );
 		const blockBType = getBlockType( blockB.name );
 		const { clientId, attributeKey, offset } = getSelectionStart( state );
-		const hasTextSelection = (
+		const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
+		const attributeDefinition = selectedBlockType.attributes[ attributeKey ];
+		const canRestoreTextSelection = (
 			( clientId === clientIdA || clientId === clientIdB ) &&
 			attributeKey !== undefined &&
-			offset !== undefined
+			offset !== undefined &&
+			// We cannot restore text selection if the RichText identifier
+			// is not a defined block attribute key. This can be the case if the
+			// fallback intance ID is used to store selection (and no RichText
+			// identifier is set), or when the identifier is wrong.
+			!! attributeDefinition
 		);
 
+		if ( ! attributeDefinition ) {
+			if ( typeof attributeKey === 'number' ) {
+				window.console.error(
+					`RichText needs an identifier prop that is the block attribute key of the attribute it controls. Its type is expected to be a string, but was ${ typeof attributeKey }`
+				);
+			} else {
+				window.console.error(
+					'The RichText identifier prop does not match any attributes defined by the block.'
+				);
+			}
+		}
+
 		// A robust way to retain selection position through various transforms
 		// is to insert a special character at the position and then recover it.
 		const START_OF_SELECTED_AREA = '\u0086';
@@ -98,14 +117,13 @@ export default {
 		const cloneA = cloneBlock( blockA );
 		const cloneB = cloneBlock( blockB );
 
-		if ( hasTextSelection ) {
+		if ( canRestoreTextSelection ) {
 			const selectedBlock = clientId === clientIdA ? cloneA : cloneB;
 			const html = selectedBlock.attributes[ attributeKey ];
-			const selectedBlockType = clientId === clientIdA ? blockAType : blockBType;
 			const {
 				multiline: multilineTag,
 				__unstableMultilineWrapperTags: multilineWrapperTags,
-			} = selectedBlockType.attributes[ attributeKey ];
+			} = attributeDefinition;
 			const value = insert( create( {
 				html,
 				multilineTag,
@@ -135,7 +153,7 @@ export default {
 			blocksWithTheSameType[ 0 ].attributes
 		);
 
-		if ( hasTextSelection ) {
+		if ( canRestoreTextSelection ) {
 			const newAttributeKey = findKey( updatedAttributes, ( v ) =>
 				typeof v === 'string' && v.indexOf( START_OF_SELECTED_AREA ) !== -1
 			);

packages/block-library/src/navigation-menu-item/editor.scss

@@ -66,26 +66,17 @@
 .wp-block-navigation-menu-item {
 	&:not(.is-editing) {
 		font-family: inherit;
-		font-size: inherit;
-		background-color: var(--background-color-menu-link);
-		color: var(--color-menu-link);
-		width: inherit;
-
-		.components-external-link {
-			color: var(--color-menu-link);
-		}
+		font-size: $text-editor-font-size;
+		font-weight: bold;
 	}
 
 	&.is-editing .components-text-control__input {
 		width: inherit;
-		background-color: var(--background-color-menu-link);
-		color: var(--color-menu-link);
-
-		.components-external-link {
-			color: var(--color-menu-link);
-			&:focus {
-				color: var(--color-menu-link);
-			}
+		background-color: inherit;
+		color: inherit;
+
+		&:focus {
+			color: inherit;
 		}
 	}
 

packages/block-library/src/navigation-menu/block-colors-selector.js

@@ -21,25 +21,42 @@ const ColorSelectorSVGIcon = () => (
 /**
  * Color Selector Icon component.
  *
+ * @param {Object} colorControlProps colorControl properties.
  * @return {*} React Icon component.
  */
-const ColorSelectorIcon = ( { style } ) =>
-	<div className="block-library-colors-selector__icon-container">
-		<div
-			className="block-library-colors-selector__state-selection"
-			style={ style }
-		>
-			<ColorSelectorSVGIcon />
+const ColorSelectorIcon = ( { backgroundColor, textColor } ) => {
+	const iconStyle = {};
+	if ( textColor && ! textColor.class ) {
+		iconStyle.color = textColor.color;
+	}
+
+	if ( backgroundColor && ! backgroundColor.class ) {
+		iconStyle.backgroundColor = backgroundColor.color;
+	}
+
+	const iconClasses = classnames( 'block-library-colors-selector__state-selection', {
+		'has-background-color': backgroundColor && backgroundColor.color,
+		'has-text-color': backgroundColor && backgroundColor.color,
+		[ backgroundColor.class ]: backgroundColor && backgroundColor.class,
+		[ textColor.class ]: textColor && textColor.class,
+	} );
+
+	return (
+		<div className="block-library-colors-selector__icon-container">
+			<div className={ iconClasses } style={ iconStyle }>
+				<ColorSelectorSVGIcon />
+			</div>
 		</div>
-	</div>;
+	);
+};
 
 /**
  * Renders the Colors Selector Toolbar with the icon button.
  *
- * @param {Object}   style           - Colors style object.
+ * @param {Object} colorControlProps colorControl properties.
  * @return {*} React toggle button component.
  */
-const renderToggleComponent = ( style ) => ( { onToggle, isOpen } ) => {
+const renderToggleComponent = ( { backgroundColor, textColor } ) => ( { onToggle, isOpen } ) => {
 	const openOnArrowDown = ( event ) => {
 		if ( ! isOpen && event.keyCode === DOWN ) {
 			event.preventDefault();
@@ -55,7 +72,7 @@ const renderToggleComponent = ( style ) => ( { onToggle, isOpen } ) => {
 				label={ __( 'Open Colors Selector' ) }
 				onClick={ onToggle }
 				onKeyDown={ openOnArrowDown }
-				icon={ <ColorSelectorIcon style={ style } /> }
+				icon={ <ColorSelectorIcon backgroundColor={ backgroundColor } textColor={ textColor } /> }
 			/>
 		</Toolbar>
 	);
@@ -91,11 +108,12 @@ const renderContent = ( { backgroundColor, textColor, onColorChange = noop } ) =
 	);
 } );
 
-export default ( { style, className, ...colorControlProps } ) =>
+export default ( colorControlProps ) => (
 	<Dropdown
 		position="bottom right"
-		className={ classnames( 'block-library-colors-selector', className ) }
+		className="block-library-colors-selector"
 		contentClassName="block-library-colors-selector__popover"
-		renderToggle={ renderToggleComponent( style ) }
+		renderToggle={ renderToggleComponent( colorControlProps ) }
 		renderContent={ renderContent( colorControlProps ) }
-	/>;
+	/>
+);

packages/block-library/src/navigation-menu/edit.js

@@ -66,19 +66,21 @@ function NavigationMenu( {
 		[ pages ]
 	);
 
-	const navigationMenuStyles = {};
-	if ( textColor.color ) {
-		navigationMenuStyles[ '--color-menu-link' ] = textColor.color;
+	const navigationMenuInlineStyles = {};
+	if ( textColor ) {
+		navigationMenuInlineStyles.color = textColor.color;
 	}
 
-	if ( backgroundColor.color ) {
-		navigationMenuStyles[ '--background-color-menu-link' ] = backgroundColor.color;
+	if ( backgroundColor ) {
+		navigationMenuInlineStyles.backgroundColor = backgroundColor.color;
 	}
 
 	const navigationMenuClasses = classnames(
 		'wp-block-navigation-menu', {
 			'has-text-color': textColor.color,
 			'has-background-color': backgroundColor.color,
+			[ attributes.backgroundColorCSSClass ]: attributes && attributes.backgroundColorCSSClass,
+			[ attributes.textColorCSSClass ]: attributes && attributes.textColorCSSClass,
 		}
 	);
 
@@ -121,8 +123,6 @@ function NavigationMenu( {
 					{ navigatorToolbarButton }
 				</Toolbar>
 				<BlockColorsStyleSelector
-					style={ navigationMenuStyles }
-					className={ navigationMenuClasses }
 					backgroundColor={ backgroundColor }
 					textColor={ textColor }
 					onColorChange={ setColorType }
@@ -147,7 +147,7 @@ function NavigationMenu( {
 				</PanelBody>
 			</InspectorControls>
 
-			<div className={ navigationMenuClasses } style={ navigationMenuStyles }>
+			<div className={ navigationMenuClasses } style={ navigationMenuInlineStyles }>
 				{ isRequesting && <><Spinner /> { __( 'Loading Navigation…' ) } </> }
 				{ pages &&
 					<InnerBlocks

packages/block-library/src/navigation-menu/editor.scss

@@ -54,7 +54,6 @@
 	}
 }
 
-
 .wp-block-navigation-menu .block-editor-block-list__layout,
 .wp-block-navigation-menu {
 	display: flex;
@@ -123,13 +122,10 @@ $colors-selector-size: 22px;
 		line-height: ($colors-selector-size - 2);
 		padding: 2px;
 
-		background-color: var(--background-color-menu-link);
-		color: var(--color-menu-link);
-	}
-
-	&:not(.has-background-color) .block-library-colors-selector__state-selection {
-		background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.08) 75%, transparent 75%, transparent 100%);
-		background-size: 12px 12px;
+		&:not(.has-background-color) {
+			background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.08) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.08) 75%, transparent 75%, transparent 100%);
+			background-size: 12px 12px;
+		}
 	}
 }
 

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

@@ -7,8 +7,8 @@ import { View } from 'react-native';
  * WordPress dependencies
  */
 import {
+	RangeControl,
 	PanelBody,
-	BottomSheet,
 } from '@wordpress/components';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { useState, useEffect } from '@wordpress/element';
@@ -36,21 +36,26 @@ const SpacerEdit = ( { isSelected, attributes, setAttributes, getStylesFromColor
 		setSpacerMaxHeight( height > maxSpacerHeight ? height * 2 : maxSpacerHeight );
 	}, [] );
 
+	const changeAttribute = ( value ) => {
+		setAttributes( {
+			height: value,
+		} );
+	};
+
 	const defaultStyle = getStylesFromColorScheme( styles.staticSpacer, styles.staticDarkSpacer );
 
 	return (
 		<View style={ [ defaultStyle, isSelected && styles.selectedSpacer, { height } ] }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Spacer Settings' ) } >
-					<BottomSheet.RangeCell
+					<RangeControl
 						icon={ 'admin-settings' }
 						label={ __( 'Height in pixels' ) }
 						minimumValue={ minSpacerHeight }
 						maximumValue={ sliderSpacerMaxHeight }
 						separatorType={ 'none' }
 						value={ height }
-						attribute="height"
-						setAttributes={ setAttributes }
+						onChange={ changeAttribute }
 						style={ styles.rangeCellContainer }
 					/>
 				</PanelBody>

packages/components/src/index.native.js

@@ -18,6 +18,7 @@ export { default as Button } from './button';
 export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';
 export { default as SelectControl } from './select-control';
+export { default as RangeControl } from './range-control';
 
 // Higher-Order Components
 export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';

packages/components/src/mobile/bottom-sheet/range-cell.native.js

@@ -83,17 +83,15 @@ class BottomSheetRangeCell extends Component {
 	}
 
 	onChangeValue( initialValue ) {
-		const { minimumValue, maximumValue, setAttributes, attribute } = this.props;
+		const { minimumValue, maximumValue, onChange } = this.props;
 
 		let sliderValue = initialValue;
 		if ( sliderValue < minimumValue ) {
 			sliderValue = minimumValue;
 		} else if ( sliderValue > maximumValue ) {
 			sliderValue = maximumValue;
 		}
-		setAttributes( {
-			[ attribute ]: sliderValue,
-		} );
+		onChange( sliderValue );
 	}
 
 	onCellPress() {