Focal Point Picker

docs/manifest.json

@@ -911,6 +911,12 @@
 		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/external-link/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "FocalPointPicker",
+		"slug": "focal-point-picker",
+		"markdown_source": "https://raw.githubusercontent.com/WordPress/gutenberg/master/packages/components/src/focal-point-picker/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "FocusableIframe",
 		"slug": "focusable-iframe",

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

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
+	FocalPointPicker,
 	IconButton,
 	PanelBody,
 	RangeControl,
@@ -67,6 +68,12 @@ const blockAttributes = {
 		type: 'string',
 		default: 'image',
 	},
+	focalPoint: {
+		type: 'object',
+	},
+	dimensions: {
+		type: 'object',
+	},
 };
 
 export const name = 'core/cover';
@@ -175,6 +182,8 @@ export const settings = {
 				backgroundType,
 				contentAlign,
 				dimRatio,
+				dimensions,
+				focalPoint,
 				hasParallax,
 				id,
 				title,
@@ -209,6 +218,10 @@ export const settings = {
 					url: media.url,
 					id: media.id,
 					backgroundType: mediaType,
+					dimensions: {
+						height: media.height,
+						width: media.width,
+					},
 				} );
 			};
 			const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
@@ -224,6 +237,10 @@ export const settings = {
 				backgroundColor: overlayColor.color,
 			};
 
+			if ( focalPoint ) {
+				style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
+			}
+
 			const controls = (
 				<Fragment>
 					<BlockControls>
@@ -265,6 +282,15 @@ export const settings = {
 										onChange={ toggleParallax }
 									/>
 								) }
+								{ IMAGE_BACKGROUND_TYPE === backgroundType && ! hasParallax && (
+									<FocalPointPicker
+										label={ __( 'Focal Point Picker' ) }
+										url={ url }
+										dimensions={ dimensions }
+										value={ focalPoint }
+										onChange={ ( value ) => setAttributes( { focalPoint: value } ) }
+									/>
+								) }
 								<PanelColorSettings
 									title={ __( 'Overlay' ) }
 									initialOpen={ true }
@@ -370,6 +396,7 @@ export const settings = {
 			contentAlign,
 			customOverlayColor,
 			dimRatio,
+			focalPoint,
 			hasParallax,
 			overlayColor,
 			title,
@@ -382,6 +409,9 @@ export const settings = {
 		if ( ! overlayColorClass ) {
 			style.backgroundColor = customOverlayColor;
 		}
+		if ( focalPoint && ! hasParallax ) {
+			style.backgroundPosition = `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`;
+		}
 
 		const classes = classnames(
 			dimRatioToClass( dimRatio ),

packages/components/src/focal-point-picker/README.md

@@ -0,0 +1,68 @@
+# Focal Point Picker
+
+Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image. This component addresses a specific problem: with large background images it is common to see undesirable crops, especially when viewing on smaller viewports such as mobile phones. This component allows the selection of the point with the most important visual information and returns it as a pair of numbers between 0 and 1. This value can be easily converted into the CSS `background-position` attribute, and will ensure that the focal point is never cropped out, regardless of viewport.
+
+Example focal point picker value: `{ x: 0.5, y: 0.1 }`
+Corresponding CSS: `background-position: 50% 10%;`
+
+## Usage
+
+```jsx
+import { FocalPointPicker } from '@wordpress/components';
+
+const MyFocalPointPicker = withState( {
+	focalPoint: {
+		x: 0.5,
+		y: 0.5
+	},
+} )( ( { focalPoint, setState } ) => { 
+	const url = '/path/to/image';
+	const dimensions = {
+		width: 400,
+		height: 100
+	};
+	return ( 
+		<FocalPointPicker 
+			url={ url }
+			dimensions={ dimensions }
+			value={ focalPoint }
+			onChange={ ( focalPoint ) => setState( { focalPoint } ) } 
+		/>
+	) 
+} );
+
+/* Example function to render the CSS styles based on Focal Point Picker value */
+const renderImageContainerWithFocalPoint = ( url, focalPoint ) => {
+	const style = {
+		backgroundImage: `url(${ url })` ,
+		backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`
+	}
+	return <div style={ style } />;
+};
+```
+
+## Props
+
+### `url`
+
+- Type: `Text`
+- Required: Yes
+- Description: URL of the image to be displayed
+
+### `dimensions`
+
+- Type: `Object`
+- Required: Yes
+- Description: An object describing the height and width of the image. Requires two paramaters: `height`, `width`.
+
+### `value`
+
+- Type: `Object`
+- Required: Yes
+- Description: The focal point. Should be an object containing `x` and `y` params.
+
+### `onChange`
+
+- Type: `Function`
+- Required: Yes
+- Description: Callback which is called when the focal point changes. 

packages/components/src/focal-point-picker/index.js

@@ -0,0 +1,159 @@
+/**
+ * External dependencies
+ */
+
+import { Component, createRef } from '@wordpress/element';
+import { withInstanceId, compose } from '@wordpress/compose';
+import BaseControl from '../base-control/';
+import withFocusOutside from '../higher-order/with-focus-outside';
+import classnames from 'classnames';
+
+export class FocalPointPicker extends Component {
+	constructor() {
+		super( ...arguments );
+		this.onMouseMove = this.onMouseMove.bind( this );
+		this.state = {
+			isDragging: false,
+			bounds: {},
+		};
+		this.containerRef = createRef();
+	}
+	componentDidMount() {
+		this.setState( { bounds: this.calculateBounds() } );
+	}
+	componentDidUpdate( prevProps ) {
+		if ( prevProps.dimensions !== this.props.dimensions || prevProps.url !== this.props.url ) {
+			this.setState( {
+				bounds: this.calculateBounds(),
+				isDragging: false,
+			} );
+		}
+	}
+	calculateBounds() {
+		const { dimensions } = this.props;
+		const pickerDimensions = this.pickerDimensions();
+		const bounds = {
+			top: 0,
+			left: 0,
+			bottom: 0,
+			right: 0,
+			width: 0,
+			height: 0,
+		};
+		const widthRatio = pickerDimensions.width / dimensions.width;
+		const heightRatio = pickerDimensions.height / dimensions.height;
+		if ( heightRatio >= widthRatio ) {
+			bounds.width = bounds.right = pickerDimensions.width;
+			bounds.height = dimensions.height * widthRatio;
+			bounds.top = ( pickerDimensions.height - bounds.height ) / 2;
+			bounds.bottom = bounds.top + bounds.height;
+		} else {
+			bounds.height = bounds.bottom = pickerDimensions.height;
+			bounds.width = dimensions.width * heightRatio;
+			bounds.left = ( pickerDimensions.width - bounds.width ) / 2;
+			bounds.right = bounds.left + bounds.width;
+		}
+		return bounds;
+	}
+	onMouseMove( event ) {
+		const { isDragging, bounds } = this.state;
+		const { onChange } = this.props;
+
+		if ( isDragging ) {
+			const pickerDimensions = this.pickerDimensions();
+			const cursorPosition = {
+				left: event.pageX - pickerDimensions.left,
+				top: event.pageY - pickerDimensions.top,
+			};
+			const left = Math.max(
+				bounds.left, Math.min(
+					cursorPosition.left, bounds.right
+				)
+			);
+			const top = Math.max(
+				bounds.top, Math.min(
+					cursorPosition.top, bounds.bottom
+				)
+			);
+			onChange( {
+				x: left / pickerDimensions.width,
+				y: top / pickerDimensions.height,
+			} );
+		}
+	}
+	pickerDimensions() {
+		if ( this.containerRef.current ) {
+			return {
+				width: this.containerRef.current.clientWidth,
+				height: this.containerRef.current.clientHeight,
+				top: this.containerRef.current.getBoundingClientRect().top + document.body.scrollTop,
+				left: this.containerRef.current.getBoundingClientRect().left,
+			};
+		}
+		return {
+			width: 0,
+			height: 0,
+			left: 0,
+			top: 0,
+		};
+	}
+	render() {
+		const { instanceId, url, value, label, help, className } = this.props;
+		const { isDragging } = this.state;
+		const pickerDimensions = this.pickerDimensions();
+		const containerStyle = { backgroundImage: `url(${ url })` };
+		const iconContainerStyle = {
+			left: `${ value.x * pickerDimensions.width }px`,
+			top: `${ value.y * pickerDimensions.height }px`,
+		};
+		const iconContainerClasses = classnames(
+			'component-focal-point-picker__icon_container',
+			isDragging ? 'is-dragging' : null
+		);
+		const id = `inspector-focal-point-picker-control-${ instanceId }`;
+		return (
+			<BaseControl label={ label } id={ id } help={ help } className={ className }>
+				<div
+					className="component-focal-point-picker"
+					style={ containerStyle }
+					onMouseDown={ () => this.setState( { isDragging: true } ) }
+					onDragStart={ () => this.setState( { isDragging: true } ) }
+					onMouseUp={ () => this.setState( { isDragging: false } ) }
+					onDrop={ () => this.setState( { isDragging: false } ) }
+					onMouseMove={ this.onMouseMove }
+					ref={ this.containerRef }
+					role="button"
+					tabIndex="0"
+				>
+					<div className={ iconContainerClasses } style={ iconContainerStyle }>
+						<i className="component-focal-point-picker__icon"></i>
+					</div>
+				</div>
+			</BaseControl>
+		);
+	}
+	handleFocusOutside() {
+		this.setState( {
+			isDragging: false,
+		} );
+	}
+}
+
+FocalPointPicker.defaultProps = {
+	url: null,
+	dimensions: {
+		height: 0,
+		width: 0,
+	},
+	value: {
+		x: 0.5,
+		y: 0.5,
+	},
+	onChange: () => {},
+};
+
+export default compose( [
+	withInstanceId,
+	withFocusOutside,
+] )( FocalPointPicker );
+

packages/components/src/focal-point-picker/style.scss

@@ -0,0 +1,39 @@
+$focalPointPickerSVG: "data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(1 1)' stroke='%23000' strokeWidth='2' fill='none' fillRule='evenodd'%3E%3Cellipse fill='%23fff' cx='11' cy='11.129' rx='9.533' ry='9.645' /%3E%3Cpath d='M0 11.13h22M10.945 22.347V.09' strokeLinecap='square' /%3E%3C/g%3E%3C/svg%3E";
+
+.component-focal-point-picker {
+	background-color: transparent;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	border: 1px solid $light-gray-500;
+	cursor: pointer;
+	display: block;
+	height: 200px;
+	position: relative;
+	width: 100%;
+}
+
+.component-focal-point-picker__icon_container {
+	background-color: transparent;
+	cursor: -webkit-grab;
+	height: 30px;
+	opacity: 0.5;
+	position: absolute;
+	width: 30px;
+	z-index: 10000;
+
+	&.is-dragging {
+		cursor: -webkit-grabbing;
+	}
+}
+
+.component-focal-point-picker__icon {
+	background-image: url($focalPointPickerSVG);
+	background-size: 100%;
+	display: block;
+	height: 100%;
+	left: -15px;
+	position: absolute;
+	top: -15px;
+	width: 100%;
+}

packages/components/src/index.js

@@ -19,6 +19,7 @@ export { default as DropZoneProvider } from './drop-zone/provider';
 export { default as Dropdown } from './dropdown';
 export { default as DropdownMenu } from './dropdown-menu';
 export { default as ExternalLink } from './external-link';
+export { default as FocalPointPicker } from './focal-point-picker';
 export { default as FocusableIframe } from './focusable-iframe';
 export { default as FontSizePicker } from './font-size-picker';
 export { default as FormFileUpload } from './form-file-upload';

packages/components/src/style.scss

@@ -13,6 +13,7 @@
 @import "./drop-zone/style.scss";
 @import "./dropdown-menu/style.scss";
 @import "./external-link/style.scss";
+@import "./focal-point-picker/style.scss";
 @import "./font-size-picker/style.scss";
 @import "./form-file-upload/style.scss";
 @import "./form-toggle/style.scss";