Cover: Add repeated background option (#26001)

* cover: add isRepeated attribute * cover: handle isRepeated attribute * cover: save isRepeated attr * cover: set is-repeated styles * cover: show focus when isRepeated * cover: fix showing focal point logic
WordPress · Oct 12, 2020 · df8f6fd · df8f6fd
1 parent cfb7922
commit df8f6fd
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 7 deletions.
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
@@ -13,6 +13,10 @@
 			"type": "boolean",
 			"default": false
 		},
+		"isRepeated": {
+			"type": "boolean",
+			"default": false
+		},
 		"dimRatio": {
 			"type": "number",
 			"default": 50

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -8,7 +8,7 @@ import tinycolor from 'tinycolor2';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { Fragment, useEffect, useRef, useState } from '@wordpress/element';
 import {
 	BaseControl,
 	Button,
@@ -250,6 +250,7 @@ function CoverEdit( {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isRepeated,
 		minHeight,
 		minHeightUnit,
 		style: styleAttribute,
@@ -270,6 +271,12 @@ function CoverEdit( {
 		} );
 	};
 
+	const toggleIsRepeated = () => {
+		setAttributes( {
+			isRepeated: ! isRepeated,
+		} );
+	};
+
 	const isDarkElement = useRef();
 	const isDark = useCoverIsDark(
 		url,
@@ -309,7 +316,8 @@ function CoverEdit( {
 
 	const hasBackground = !! ( url || overlayColor.color || gradientValue );
 	const showFocalPointPicker =
-		isVideoBackground || ( isImageBackground && ! hasParallax );
+		isVideoBackground ||
+		( isImageBackground && ( ! hasParallax || isRepeated ) );
 
 	const controls = (
 		<>
@@ -340,11 +348,19 @@ function CoverEdit( {
 				{ !! url && (
 					<PanelBody title={ __( 'Media settings' ) }>
 						{ isImageBackground && (
-							<ToggleControl
-								label={ __( 'Fixed background' ) }
-								checked={ hasParallax }
-								onChange={ toggleParallax }
-							/>
+							<Fragment>
+								<ToggleControl
+									label={ __( 'Fixed background' ) }
+									checked={ hasParallax }
+									onChange={ toggleParallax }
+								/>
+
+								<ToggleControl
+									label={ __( 'Repeated background' ) }
+									checked={ isRepeated }
+									onChange={ toggleIsRepeated }
+								/>
+							</Fragment>
 						) }
 						{ showFocalPointPicker && (
 							<FocalPointPicker
@@ -371,6 +387,7 @@ function CoverEdit( {
 										dimRatio: undefined,
 										focalPoint: undefined,
 										hasParallax: undefined,
+										isRepeated: undefined,
 									} )
 								}
 							>
@@ -489,6 +506,7 @@ function CoverEdit( {
 			'has-background-dim': dimRatio !== 0,
 			'is-transient': isBlogUrl,
 			'has-parallax': hasParallax,
+			'is-repeated': isRepeated,
 			[ overlayColor.class ]: overlayColor.class,
 			'has-background-gradient': gradientValue,
 			[ gradientClass ]: ! url && gradientClass,

diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js
@@ -35,6 +35,7 @@ export default function save( { attributes } ) {
 		dimRatio,
 		focalPoint,
 		hasParallax,
+		isRepeated,
 		overlayColor,
 		url,
 		minHeight: minHeightProp,
@@ -86,6 +87,7 @@ export default function save( { attributes } ) {
 		{
 			'has-background-dim': dimRatio !== 0,
 			'has-parallax': hasParallax,
+			'is-repeated': isRepeated,
 			'has-background-gradient': gradient || customGradient,
 			[ gradientClass ]: ! url && gradientClass,
 			'has-custom-content-position': ! isContentPositionCenter(

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -29,6 +29,11 @@
 		}
 	}
 
+	&.is-repeated {
+		background-repeat: repeat;
+		background-size: auto;
+	}
+
 	&.has-background-dim {
 		background-color: $black;