RNMobile: Add image alignment controls (#17962)

RNMobile: Add image alignment controls Only handles left, center, right. Does not permit setting or displaying either full or wide alignments.
WordPress · Nov 4, 2019 · 9b873d3 · 9b873d3
1 parent 8662567
commit 9b873d3
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js
@@ -1,4 +1,5 @@
 // Block Creation Components
+export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockFormatControls } from './block-format-controls';

diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -25,7 +25,6 @@ import {
 	NavigableMenu,
 	PanelBody,
 	Path,
-	Rect,
 	ResizableBox,
 	SelectControl,
 	Spinner,
@@ -70,7 +69,7 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import { createUpgradedEmbedBlock } from '../embed/util';
-import icon from './icon';
+import icon, { editImageIcon } from './icon';
 import ImageSize from './image-size';
 import { getUpdatedLinkTargetSettings, removeNewTabRel } from './utils';
 
@@ -587,7 +586,6 @@ export class ImageEdit extends Component {
 
 		const cleanRel = removeNewTabRel( rel );
 		const isExternal = isExternalImage( id, url );
-		const editImageIcon = ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );
 		const controls = (
 			<BlockControls>
 				<BlockAlignmentToolbar

diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js
@@ -33,6 +33,7 @@ import {
 	MEDIA_TYPE_IMAGE,
 	BlockControls,
 	InspectorControls,
+	BlockAlignmentToolbar,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 import { isURL } from '@wordpress/url';
@@ -43,7 +44,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './styles.scss';
-import SvgIcon from './icon';
+import SvgIcon, { editImageIcon } from './icon';
 import SvgIconRetry from './icon-retry';
 import { getUpdatedLinkTargetSettings } from './utils';
 
@@ -89,6 +90,7 @@ export class ImageEdit extends React.Component {
 		this.onImagePressed = this.onImagePressed.bind( this );
 		this.onClearSettings = this.onClearSettings.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
+		this.updateAlignment = this.updateAlignment.bind( this );
 	}
 
 	componentDidMount() {
@@ -183,6 +185,10 @@ export class ImageEdit extends React.Component {
 		this.props.setAttributes( { url, width: undefined, height: undefined } );
 	}
 
+	updateAlignment( nextAlign ) {
+		this.props.setAttributes( { align: nextAlign } );
+	}
+
 	onSetLinkDestination( href ) {
 		this.props.setAttributes( {
 			linkDestination: LINK_DESTINATION_CUSTOM,
@@ -239,7 +245,7 @@ export class ImageEdit extends React.Component {
 
 	render() {
 		const { attributes, isSelected } = this.props;
-		const { url, height, width, alt, href, id, linkTarget, sizeSlug } = attributes;
+		const { align, url, height, width, alt, href, id, linkTarget, sizeSlug } = attributes;
 
 		const actions = [ { label: __( 'Clear All Settings' ), onPress: this.onClearSettings } ];
 
@@ -248,10 +254,15 @@ export class ImageEdit extends React.Component {
 				<Toolbar>
 					<ToolbarButton
 						title={ __( 'Edit image' ) }
-						icon="edit"
+						icon={ editImageIcon }
 						onClick={ open }
 					/>
 				</Toolbar>
+				<BlockAlignmentToolbar
+					value={ align }
+					onChange={ this.updateAlignment }
+					isCollapsed={ false }
+				/>
 			</BlockControls>
 		);
 
@@ -310,6 +321,14 @@ export class ImageEdit extends React.Component {
 			);
 		}
 
+		const alignToFlex = {
+			left: 'flex-start',
+			center: 'center',
+			right: 'flex-end',
+			full: 'center',
+			wide: 'center',
+		};
+
 		const imageContainerHeight = Dimensions.get( 'window' ).width / IMAGE_ASPECT_RATIO;
 		const getImageComponent = ( openMediaOptions, getMediaOptions ) => (
 			<TouchableWithoutFeedback
@@ -344,7 +363,7 @@ export class ImageEdit extends React.Component {
 							);
 
 							return (
-								<View style={ { flex: 1 } } >
+								<View style={ { flex: 1, alignSelf: alignToFlex[ align ] } } >
 									{ ! imageWidthWithinContainer &&
 										<View style={ [ styles.imageContainer, { height: imageContainerHeight } ] } >
 											{ this.getIcon( false ) }

diff --git a/packages/block-library/src/image/icon.js b/packages/block-library/src/image/icon.js
@@ -1,6 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { Path, SVG } from '@wordpress/components';
+import { Path, Rect, SVG } from '@wordpress/components';
 
 export default <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><Path d="M0,0h24v24H0V0z" fill="none" /><Path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z" /><Path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z" /></SVG>;
+
+export const editImageIcon = ( <SVG width={ 20 } height={ 20 } viewBox="0 0 20 20"><Rect x={ 11 } y={ 3 } width={ 7 } height={ 5 } rx={ 1 } /><Rect x={ 2 } y={ 12 } width={ 7 } height={ 5 } rx={ 1 } /><Path d="M13,12h1a3,3,0,0,1-3,3v2a5,5,0,0,0,5-5h1L15,9Z" /><Path d="M4,8H3l2,3L7,8H6A3,3,0,0,1,9,5V3A5,5,0,0,0,4,8Z" /></SVG> );