Merge pull request #32 from WebDevStudios/feature/#24-block-save-to-r…

…ender-php Feature/#24 block save to render php
WebDevStudios · Mar 23, 2018 · 4573cbd · 4573cbd
2 parents f026269 + f452ac6
commit 4573cbd
Show file tree

Hide file tree

Showing 5 changed files with 295 additions and 5 deletions.
diff --git a/dist/blocks.build.js b/dist/blocks.build.js
diff --git a/src/blocks/call-to-action/index.js b/src/blocks/call-to-action/index.js
@@ -178,5 +178,52 @@ export default registerBlockType(
 				</section>
 			);
 		},
+		deprecated: [
+			{
+				attributes: {
+					message: {
+						type: 'array',
+						source: 'children',
+						selector: '.content-block',
+					},
+					...BlockTitleAttributes,
+					...BackgroundOptionsAttributes,
+					...TextOptionsAttributes,
+					...OtherOptionsAttributes,
+					...ButtonLinkAttributes,
+				},
+				save( props ) {
+					return (
+						<section
+							className={ classnames(
+								props.className,
+								...BackgroundOptionsClasses( props ),
+								...OtherOptionsClasses( props ),
+							) }
+							style={ {
+								...BackgroundOptionsInlineStyles( props ),
+								...TextOptionsInlineStyles( props ),
+							} }
+						>
+
+							{ BackgroundOptionsVideoOutput( props ) }
+
+							<BlockTitleOutput
+								{ ...props }
+							/>
+
+							<div className="content-block-content content-block">
+								{ props.attributes.message }
+							</div>
+
+							<ButtonLinkOutput
+								{ ...props }
+							/>
+
+						</section>
+					);
+				}
+			}
+		]
 	},
 );
diff --git a/src/blocks/default/index.js b/src/blocks/default/index.js
@@ -155,4 +155,44 @@ export default registerBlockType( 'wds/default', { // Namespaced with 'wds/', lo
 			</section>
 		);
 	},
+	deprecated: [
+		{
+			attributes: {
+				message: {
+					type: 'array',
+					source: 'children',
+					selector: '.content-block',
+				},
+				...BackgroundOptionsAttributes,
+				...TextOptionsAttributes,
+				...OtherOptionsAttributes,
+			},
+			save( props ) {
+				return (
+					<section
+						className={ classnames(
+							props.className,
+							...BackgroundOptionsClasses( props ),
+							...OtherOptionsClasses( props ),
+						) }
+						style={ {
+							...BackgroundOptionsInlineStyles( props ),
+							...TextOptionsInlineStyles( props ),
+						} }
+					>
+
+						{ BackgroundOptionsVideoOutput( props ) }
+
+						<header className="content-block-header">
+							<h2>{ __( 'WDS Example Block with Options' ) }</h2>
+						</header>
+
+						<div className="content-block-content content-block">
+							{ props.attributes.message }
+						</div>
+					</section>
+				);
+			},
+		},
+	],
 } );
diff --git a/src/blocks/hero/index.js b/src/blocks/hero/index.js
@@ -199,5 +199,62 @@ export default registerBlockType(
 				</section>
 			);
 		},
+		deprecated: [
+			{
+				attributes: {
+					message: {
+						type: 'array',
+						source: 'children',
+						selector: '.content-block',
+					},
+					alignment: {
+						type: 'string',
+					},
+					...BlockTitleAttributes,
+					...BackgroundOptionsAttributes,
+					...TextOptionsAttributes,
+					...OtherOptionsAttributes,
+					...ButtonLinkAttributes,
+				},
+				save( props ) {
+					return (
+						<section
+							className={ classnames(
+								props.className,
+								...BackgroundOptionsClasses( props ),
+								...OtherOptionsClasses( props ),
+							) }
+							style={ {
+								...BackgroundOptionsInlineStyles( props ),
+								...TextOptionsInlineStyles( props ),
+								textAlign: props.attributes.alignment,
+							} }
+						>
+
+							{ BackgroundOptionsVideoOutput( props ) }
+
+							<BlockTitleOutput
+								{ ...props }
+							/>
+
+							<div className="content-block-content content-block">
+								{ props.attributes.message }
+							</div>
+
+							{ props.attributes.buttonUrl ? (
+								<footer className="contenet-block-footer">
+									<ButtonLinkOutput
+										{ ...props }
+									/>
+								</footer>
+							) : (
+								null
+							) }
+
+						</section>
+					);
+				},
+			},
+		],
 	},
 );
diff --git a/src/blocks/two-column-block/index.js b/src/blocks/two-column-block/index.js
@@ -61,7 +61,7 @@ import OtherOptions, { OtherOptionsAttributes, OtherOptionsClasses } from '../..
  */
 export default registerBlockType( 'wds/two-column', { // Namespaced with 'wds/', lowercase, hyphenated.
 	// Localize title using wp.i18n.__()
-	title: __( 'Two-Column Block' ),
+	title: __( 'WDS Two-Column Block' ),
 	// Description: Write a quick description.
 	description: __( 'Two equal-width columns displaying a combination of text and/or an image.' ),
 	// Category options: common, formatting, layout, widgets, embed.
@@ -493,4 +493,150 @@ export default registerBlockType( 'wds/two-column', { // Namespaced with 'wds/',
 			</section>
 		);
 	},
+	deprecated: [
+		{
+			attributes: {
+				contentLeft: {
+					type: 'array',
+					source: 'children',
+					selector: '.content-block-left',
+				},
+				contentRight: {
+					type: 'array',
+					source: 'children',
+					selector: '.content-block-right',
+				},
+				alignmentLeft: {
+					type: 'string',
+				},
+				alignmentRight: {
+					type: 'string',
+				},
+				imgURL: {
+					type: 'string',
+					source: 'attribute',
+					attribute: 'src',
+					selector: 'img',
+				},
+				imgID: {
+					type: 'number',
+				},
+				imgAlt: {
+					type: 'string',
+					source: 'attribute',
+					attribute: 'alt',
+					selector: 'img',
+				},
+				layout: {
+					type: 'string',
+				},
+				columnOrder: {
+					type: 'boolean',
+					default: false,
+				},
+				...BlockTitleAttributes,
+				...BackgroundOptionsAttributes,
+				...TextOptionsAttributes,
+				...OtherOptionsAttributes,
+			},
+			save(props) {
+				// Display the output of the Left content block.
+				function displayLeftContentOutput() {
+					return (
+						<div
+							key="content-block"
+							className="content-block-content content-block-left"
+							style={ { textAlign: props.attributes.alignmentLeft } }
+						>
+							{ props.attributes.contentLeft }
+						</div>
+					);
+				}
+
+				// Display the output of the Right content block.
+				function displayRightContentOutput() {
+					return (
+						<div
+							key="content-block"
+							className="content-block-content content-block-right"
+							style={ { textAlign: props.attributes.alignmentRight } }
+						>
+							{ props.attributes.contentRight }
+						</div>
+					);
+				}
+
+				// Display the output of the Image block.
+				function displayImageOutput() {
+					return (
+						<div
+							key="content-block-image"
+							className="content-block-content content-block"
+							style={ { textAlign: props.attributes.alignmentRight } }
+						>
+							<img
+								src={ props.attributes.imgURL }
+								alt={ props.attributes.imgAlt }
+							/>
+						</div>
+					);
+				}
+
+				// Check our layout type and display blocks as needed.
+				function displayLayoutOutput() {
+					if ( 'text-image' === props.attributes.layout ) {
+						return [
+							displayLeftContentOutput(),
+							displayImageOutput(),
+						];
+					} else if ( 'image-text' === props.attributes.layout ) {
+						return [
+							displayImageOutput(),
+							displayLeftContentOutput(),
+						];
+					} else if ( 'text-text' === props.attributes.layout || ! props.attributes.layout ) {
+						// If the toggle is clicked, display the Right column first.
+						if ( props.attributes.columnOrder ) {
+							return [
+								displayRightContentOutput(),
+								displayLeftContentOutput(),
+							];
+						}
+
+						// Otherwise, display the columns as usual.
+						return [
+							displayLeftContentOutput(),
+							displayRightContentOutput(),
+						];
+					}
+				}
+
+				return (
+					<section
+						className={ classnames(
+							props.className,
+							'content-block grid-container two-column',
+							...BackgroundOptionsClasses( props ),
+							...OtherOptionsClasses( props ),
+						) }
+						style={ {
+							...BackgroundOptionsInlineStyles( props ),
+							...TextOptionsInlineStyles( props ),
+						} }
+					>
+
+						{ BackgroundOptionsVideoOutput( props ) }
+
+						<BlockTitleOutput
+							{ ...props }
+						/>
+
+						<div className="content-block-container">
+							{ displayLayoutOutput() }
+						</div>
+					</section>
+				);
+			}
+		}
+	]
 } );