Add cover image inspector option for parallax (#1517)

* Add cover image inspector option for parallax * Add parallax to saved output
WordPress · Jun 28, 2017 · 2a12de8 · 2a12de8
1 parent d6b29f6
commit 2a12de8
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 5 deletions.
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -3,6 +3,7 @@
  */
 import { Placeholder, Toolbar, Dashicon } from 'components';
 import { __ } from 'i18n';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -13,6 +14,8 @@ import Editable from '../../editable';
 import MediaUploadButton from '../../media-upload-button';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
+import InspectorControls from '../../inspector-controls';
+import ToggleControl from '../../inspector-controls/toggle-control';
 
 const { text } = query;
 
@@ -37,7 +40,7 @@ registerBlockType( 'core/cover-image', {
 	},
 
 	edit( { attributes, setAttributes, focus, setFocus } ) {
-		const { url, title, align, id } = attributes;
+		const { url, title, align, id, hasParallax } = attributes;
 		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
 		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
 
@@ -89,11 +92,25 @@ registerBlockType( 'core/cover-image', {
 		}
 
 		const style = { backgroundImage: `url(${ url })` };
+		const sectionClasses = classnames( {
+			'cover-image': true,
+			'has-parallax': hasParallax,
+		} );
+		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
 
 		return [
 			controls,
+			focus && (
+				<InspectorControls key="inspector">
+					<ToggleControl
+						label={ __( 'Fixed Position' ) }
+						checked={ !! hasParallax }
+						onChange={ toggleParallax }
+					/>
+				</InspectorControls>
+			),
 			<section key="cover-image" className="blocks-cover-image">
-				<section className="cover-image" data-url={ url } style={ style }>
+				<section className={ sectionClasses } data-url={ url } style={ style }>
 					{ title || !! focus ? (
 						<Editable
 							tagName="h2"
@@ -112,14 +129,18 @@ registerBlockType( 'core/cover-image', {
 	},
 
 	save( { attributes } ) {
-		const { url, title } = attributes;
+		const { url, title, hasParallax } = attributes;
 		const style = {
 			backgroundImage: `url(${ url })`,
 		};
+		const sectionClasses = classnames( {
+			'cover-image': true,
+			'has-parallax': hasParallax,
+		} );
 
 		return (
 			<section className="blocks-cover-image">
-				<section className="cover-image" style={ style }>
+				<section className={ sectionClasses } style={ style }>
 					<h2>{ title }</h2>
 				</section>
 			</section>

diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -21,6 +21,9 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
+	}
+
+	.has-parallax {
 		background-attachment: fixed;
 	}
 

diff --git a/post-content.js b/post-content.js
@@ -8,7 +8,7 @@ window._wpGutenbergPost = {
 	},
 	content: {
 		raw: [
-			'<!-- wp:core/cover-image { "url": "https://cldup.com/GCwahb3aOb.jpg", "align": "full" } -->',
+			'<!-- wp:core/cover-image { "url": "https://cldup.com/GCwahb3aOb.jpg", "align": "full", "hasParallax": true } -->',
 			'<section className="cover-image wp-block-cover-image" style={ { backgroundImage: \'url("https://cldup.com/GCwahb3aOb.jpg");\' } }><h2>A tale of mountains and the printing press</h2></section>',
 			'<!-- /wp:core/cover-image -->',