Added a nested button functionality to cover image.

WordPress · Feb 25, 2018 · 647eb0d · 647eb0d
1 parent aa1df37
commit 647eb0d
Show file tree

Hide file tree

Showing 6 changed files with 179 additions and 112 deletions.
diff --git a/blocks/library/cover-image/editor.scss b/blocks/library/cover-image/editor.scss
@@ -1,4 +1,8 @@
 .wp-block-cover-image {
+	.blocks-rich-text, .wp-block-button{
+		width: 100%;
+	}
+
 	.blocks-rich-text__tinymce[data-is-empty="true"]:before {
 		position: inherit;
 	}
@@ -30,4 +34,20 @@
 	&.has-right-content .block-rich-text__inline-toolbar{
 		justify-content: flex-end;
 	}
+
+	.editor-block-list__layout {
+		margin-top: 20px;
+		width: 100%;
+	}
+
+	.editor-block-list__block[data-type="core/button"] {
+		&[data-align="center"] .editor-block-toolbar {
+			left: calc(50% - 100px);
+		}
+
+		&:not([data-align]) .blocks-button__inline-link {
+			margin-left: 0px;
+		}
+	}
+
 }
diff --git a/blocks/library/cover-image/index.js b/blocks/library/cover-image/index.js
@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import { IconButton, PanelBody, RangeControl, ToggleControl, Toolbar } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 
@@ -23,6 +24,7 @@ import ImagePlaceholder from '../../image-placeholder';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import InspectorControls from '../../inspector-controls';
+import InnerBlocks from '../../inner-blocks';
 
 const validAlignments = [ 'left', 'center', 'right', 'wide', 'full' ];
 
@@ -66,6 +68,10 @@ export const settings = {
 		},
 	},
 
+	supports: {
+		managedNesting: true,
+	},
+
 	transforms: {
 		from: [
 			{
@@ -94,121 +100,142 @@ export const settings = {
 		}
 	},
 
-	edit( { attributes, setAttributes, isSelected, className } ) {
-		const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
-		const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
-		const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
-		const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
-		const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
+	edit: withSelect( ( select, ownProps ) => ( {
+		hasCallAction: !! select( 'core/editor' ).getBlocks( ownProps.id ).length,
+	} ) )(
+		( { attributes, hasCallAction, setAttributes, isSelected, className, onReplace } ) => {
+			const { url, title, align, contentAlign, id, hasParallax, dimRatio } = attributes;
+			const updateAlignment = ( nextAlign ) => setAttributes( { align: nextAlign } );
+			const onSelectImage = ( media ) => setAttributes( { url: media.url, id: media.id } );
+			const toggleParallax = () => setAttributes( { hasParallax: ! hasParallax } );
+			const toggleCallAction = () => onReplace(
+				createBlock(
+					'core/cover-image',
+					attributes,
+					hasCallAction ? [] : [
+						createBlock( 'core/button', {
+							align: 'center',
+						} ),
+					]
+				)
+			);
 
-		const style = url ?
-			{ backgroundImage: `url(${ url })` } :
-			undefined;
-		const classes = classnames(
-			className,
-			contentAlign !== 'center' && `has-${ contentAlign }-content`,
-			dimRatioToClass( dimRatio ),
-			{
-				'has-background-dim': dimRatio !== 0,
-				'has-parallax': hasParallax,
-			}
-		);
+			const setDimRatio = ( ratio ) => setAttributes( { dimRatio: ratio } );
 
-		const alignmentToolbar	= (
-			<AlignmentToolbar
-				value={ contentAlign }
-				onChange={ ( nextAlign ) => {
-					setAttributes( { contentAlign: nextAlign } );
-				} }
-			/>
-		);
-		const controls = isSelected && [
-			<BlockControls key="controls">
-				<BlockAlignmentToolbar
-					value={ align }
-					onChange={ updateAlignment }
-				/>
+			const style = url ?
+				{ backgroundImage: `url(${ url })` } :
+				undefined;
+			const classes = classnames(
+				className,
+				contentAlign !== 'center' && `has-${ contentAlign }-content`,
+				dimRatioToClass( dimRatio ),
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+				}
+			);
 
-				{ alignmentToolbar }
-				<Toolbar>
-					<MediaUpload
-						onSelect={ onSelectImage }
-						type="image"
-						value={ id }
-						render={ ( { open } ) => (
-							<IconButton
-								className="components-toolbar__control"
-								label={ __( 'Edit image' ) }
-								icon="edit"
-								onClick={ open }
-							/>
-						) }
-					/>
-				</Toolbar>
-			</BlockControls>,
-			<InspectorControls key="inspector">
-				<h2>{ __( 'Cover Image Settings' ) }</h2>
-				<ToggleControl
-					label={ __( 'Fixed Background' ) }
-					checked={ !! hasParallax }
-					onChange={ toggleParallax }
-				/>
-				<RangeControl
-					label={ __( 'Background Dimness' ) }
-					value={ dimRatio }
-					onChange={ setDimRatio }
-					min={ 0 }
-					max={ 100 }
-					step={ 10 }
+			const alignmentToolbar	= (
+				<AlignmentToolbar
+					value={ contentAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { contentAlign: nextAlign } );
+					} }
 				/>
-				<PanelBody title={ __( 'Text Alignment' ) }>
-					{ alignmentToolbar }
-				</PanelBody>
-			</InspectorControls>,
-		];
-
-		if ( ! url ) {
-			const hasTitle = ! isEmpty( title );
-			const icon = hasTitle ? undefined : 'format-image';
-			const label = hasTitle ? (
-				<RichText
-					tagName="h2"
-					value={ title }
-					onChange={ ( value ) => setAttributes( { title: value } ) }
-					isSelected={ isSelected }
-					inlineToolbar
-				/>
-			) : __( 'Cover Image' );
+			);
+			const controls = isSelected && [
+				<BlockControls key="controls">
+					<BlockAlignmentToolbar
+						value={ align }
+						onChange={ updateAlignment }
+					/>
 
-			return [
-				controls,
-				<ImagePlaceholder key="cover-image-placeholder"
-					{ ...{ className, icon, label, onSelectImage } }
-				/>,
+					{ alignmentToolbar }
+					<Toolbar>
+						<MediaUpload
+							onSelect={ onSelectImage }
+							type="image"
+							value={ id }
+							render={ ( { open } ) => (
+								<IconButton
+									className="components-toolbar__control"
+									label={ __( 'Edit image' ) }
+									icon="edit"
+									onClick={ open }
+								/>
+							) }
+						/>
+					</Toolbar>
+				</BlockControls>,
+				<InspectorControls key="inspector">
+					<h2>{ __( 'Cover Image Settings' ) }</h2>
+					<ToggleControl
+						label={ __( 'Call to action' ) }
+						checked={ !! hasCallAction }
+						onChange={ toggleCallAction }
+					/>
+					<ToggleControl
+						label={ __( 'Fixed Background' ) }
+						checked={ !! hasParallax }
+						onChange={ toggleParallax }
+					/>
+					<RangeControl
+						label={ __( 'Background Dimness' ) }
+						value={ dimRatio }
+						onChange={ setDimRatio }
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+					/>
+					<PanelBody title={ __( 'Text Alignment' ) }>
+						{ alignmentToolbar }
+					</PanelBody>
+				</InspectorControls>,
 			];
-		}
 
-		return [
-			controls,
-			<section
-				key="preview"
-				data-url={ url }
-				style={ style }
-				className={ classes }
-			>
-				{ title || isSelected ? (
+			if ( ! url ) {
+				const hasTitle = ! isEmpty( title );
+				const icon = hasTitle ? undefined : 'format-image';
+				const label = hasTitle ? (
 					<RichText
 						tagName="h2"
-						placeholder={ __( 'Write title…' ) }
 						value={ title }
 						onChange={ ( value ) => setAttributes( { title: value } ) }
 						isSelected={ isSelected }
 						inlineToolbar
 					/>
-				) : null }
-			</section>,
-		];
-	},
+				) : __( 'Cover Image' );
+
+				return [
+					controls,
+					<ImagePlaceholder key="cover-image-placeholder"
+						{ ...{ className, icon, label, onSelectImage } }
+					/>,
+				];
+			}
+
+			return [
+				controls,
+				<section
+					key="preview"
+					data-url={ url }
+					style={ style }
+					className={ classes }
+				>
+					{ title || isSelected ? (
+						<RichText
+							tagName="h2"
+							placeholder={ __( 'Write title…' ) }
+							value={ title }
+							onChange={ ( value ) => setAttributes( { title: value } ) }
+							isSelected={ isSelected }
+							inlineToolbar
+						/>
+					) : null }
+					<InnerBlocks />
+				</section>,
+			];
+		} ),
 
 	save( { attributes, className } ) {
 		const { url, title, hasParallax, dimRatio, align, contentAlign } = attributes;
@@ -229,6 +256,7 @@ export const settings = {
 		return (
 			<section className={ classes } style={ style }>
 				<h2>{ title }</h2>
+				<InnerBlocks.Content />
 			</section>
 		);
 	},

diff --git a/blocks/library/cover-image/style.scss b/blocks/library/cover-image/style.scss
@@ -1,30 +1,28 @@
-.wp-block-cover-image {
+section.wp-block-cover-image {
 	position: relative;
 	background-size: cover;
 	height: 430px;
 	width: 100%;
 	margin: 0;
 	display: flex;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 
 	&.has-left-content {
-		justify-content: flex-start;
 		h2 {
-			margin-left: 0;
 			text-align: left;
 		}
 	}
 
 	&.has-right-content {
-		justify-content: flex-end;
 		h2 {
-			margin-right: 0;
 			text-align: right;
 		}
 	}
 
 	h2 {
+		width: 100%;
 		color: white;
 		font-size: 24pt;
 		line-height: 1em;
@@ -58,4 +56,8 @@
 		height: inherit;
 	}
 
+	.wp-block-button {
+		width: calc( 100% - 40px );
+	}
+
 }
diff --git a/blocks/library/cover-image/test/index.js b/blocks/library/cover-image/test/index.js
@@ -5,7 +5,14 @@ import { name, settings } from '../';
 import { blockEditRender } from 'blocks/test/helpers';
 
 jest.mock( 'blocks/media-upload', () => () => '*** Mock(Media upload button) ***' );
-
+jest.mock(
+	'@wordpress/data',
+	() => ( {
+		withSelect() {
+			return ( BlockEdit ) => ( props ) => <BlockEdit hasCallAction={ false } { ...props } />;
+		},
+	} ),
+);
 describe( 'core/cover-image', () => {
 	test( 'block edit matches snapshot', () => {
 		const wrapper = blockEditRender( name, settings );