Updated for v2.6 support

gubbigubbi · Apr 6, 2018 · 437c49f · 437c49f
1 parent 4a546b1
commit 437c49f
Show file tree

Hide file tree

Showing 17 changed files with 552 additions and 478 deletions.
diff --git a/src/blocks.js b/src/blocks.js
@@ -24,6 +24,6 @@ import "./blocks/features-list";
 import "./blocks/team-member";
 import "./blocks/section";
 import "./blocks/before-and-after";
-//import "./blocks/two-columns";
+import "./blocks/pdf-download";
 //import "./blocks/fancy-heading";
 
diff --git a/src/blocks/before-and-after/index.js b/src/blocks/before-and-after/index.js
@@ -39,7 +39,7 @@ const {
  */
 registerBlockType("cgb/block-before-and-after", {
 
-	title: __("Before & After", "CGB"), // Block title.
+	title: __("Before & After"), // Block title.
 	icon: "image-flip-horizontal", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
 	category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
 	keywords: [__("before-and-after — CGB Block"), __("Before & After")],

diff --git a/src/blocks/editor.scss b/src/blocks/editor.scss
@@ -7,9 +7,26 @@
 
 // override the default gutenberg editor width
 .edit-post-visual-editor .editor-block-list__block {
-	max-width: 1102px;
+	max-width: 940px;
 }
 
+// .editor-block-list__layout .editor-block-list__block {
+// 	padding-left: 32px;
+// 	padding-right: 32px;
+// 	&:before {
+// 		left: 28px;
+// 		right: 28px;
+// 	}
+// }
+
+// .editor-block-list__layout .editor-block-list__block > .editor-block-mover {
+// 	left: -10px;
+// }
+
+// .editor-block-list__layout .editor-block-list__block > .editor-block-settings-menu {
+// 	right: -12px;
+// }
+
 .image--circle {
 	border-radius: 100%;
 }

diff --git a/src/blocks/fancy-heading/index.js b/src/blocks/fancy-heading/index.js
@@ -25,7 +25,7 @@ const { Heading } = wp.components;
  */
 registerBlockType("cgb/block-fancy-heading", {
 	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
-	title: __("fancy-heading", "CGB"), // Block title.
+	title: __("fancy-heading"), // Block title.
 	icon: "heart", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
 	category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
 	keywords: [__("Fancy heading")],

diff --git a/src/blocks/features-list/blockControls.js b/src/blocks/features-list/blockControls.js
diff --git a/src/blocks/features-list/index.js b/src/blocks/features-list/index.js
@@ -3,6 +3,7 @@
  *
  * A simple block to show a feature
  */
+import classnames from "classnames";
 import icons from "../icons";
 import Inspector from './inspector';
 /**
@@ -12,11 +13,12 @@ import Inspector from './inspector';
 const { __ } = wp.i18n; // Import __() from wp.i18n
 const {
 	registerBlockType,
-	Editable,
+	RichText,
 	MediaUpload,
 	BlockControls,
 	InnerBlocks,
-} = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE
+	BlockAlignmentToolbar
+} = wp.blocks; 
 const {
 	Button,
 	Toolbar,
@@ -37,7 +39,7 @@ const {
  */
 registerBlockType("cgb/block-feature", {
 	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
-	title: __("Feature", "CGB"), // Block title.
+	title: __("Feature"), // Block title.
 	icon: "heart", // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
 	category: "common", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
 	keywords: [__("feature"), __("Feature List")],
@@ -67,18 +69,34 @@ registerBlockType("cgb/block-feature", {
 			attribute: "alt",
 			selector: "img"
 		},
+		circularImg: {
+			type: "boolean",
+			default: "false",
+		},
 		link: {
 			type: "string",
 			default: "/contact"
 		},
 		buttonText: {
 			type: "string",
 			default: "Find out more"
+		},
+		blockAlignment: {
+			type: 'string',
+			default: 'center'
+		},
+	},
+
+	getEditWrapperProps( attributes ) {
+		const { blockAlignment } = attributes;
+		if ( 'left' === blockAlignment || 'right' === blockAlignment || 'full' === blockAlignment ) {
+			return { 'data-align': blockAlignment }
 		}
 	},
 
 	// The "edit" property must be a valid function.
 	edit: props => {
+		const { attributes: { blockAlignment, imgURL, imgAlt, buttonText, link, circularImg }, className } = props;
 		// This control which editable will be focused and falls back to the title editable
 		const focusedEditable = props.focus
 			? props.focus.editable || "title"
@@ -100,17 +118,11 @@ registerBlockType("cgb/block-feature", {
 		};
 
 		const onSelectImage = img => {
-			// fetch the thumb details
-			const image = new wp.api.models.Media({ id: img.id })
-				.fetch()
-				.done(res => {
-					const thumb = res.media_details.sizes["square-thumb-small"];
-					props.setAttributes({
-						imgID: img.id,
-						imgURL: thumb.source_url,
-						imgAlt: img.alt
-					});
-				});
+			props.setAttributes({
+				imgID: img.id,
+				imgURL: img.url,
+				imgAlt: img.alt
+			});
 		};
 		const onRemoveImage = () => {
 			props.setAttributes({
@@ -128,16 +140,42 @@ registerBlockType("cgb/block-feature", {
 			props.setAttributes({ buttonText: value });
 		};
 
+		const updateAlignment = nextAlign => {
+			props.setAttributes({
+				blockAlignment: nextAlign
+			});
+		};
+
+		const onChangeImgType = value => {
+			props.setAttributes({ circularImg: value });
+		};
+
+		const imgClasses = classnames(
+			'center-block',
+			circularImg ? `image--circle` : null
+		);
+
 		return [
 			!!props.focus && (
 				<Inspector
 					{ ...{ 
 						onChangeLink, 
 						onChangeButtonText, 
+						onChangeImgType,
 					...props } }
 				/>
 			),
-			<div className={props.className}>
+			!!props.focus && (
+				<BlockControls key="controls">
+					<BlockAlignmentToolbar
+						value={ blockAlignment }
+						onChange={ updateAlignment }
+						controls={["left", "right", "center"]}
+					/>
+				</BlockControls>
+			),
+			<div className={className}
+			style={ { textAlign: blockAlignment } }>
 				<div className="feature__img mb1">
 					{!attributes.imgID ? (
 						<MediaUpload
@@ -156,20 +194,20 @@ registerBlockType("cgb/block-feature", {
 					) : (
 						<div class="position--relative">
 							<img
-								class="center-block image--circle"
-								src={attributes.imgURL}
-								alt={attributes.imgAlt}
+								class={imgClasses}
+								src={imgURL}
+								alt={imgAlt}
 							/>
 							{props.focus ? (
-								<Button className="remove-image" onClick={onRemoveImage}>
+								<Button className="remove-image" onClick={ onRemoveImage }>
 									{icons.remove}
 								</Button>
 							) : null}
 						</div>
 					)}
 				</div>
 				<div className="feature__content">
-					<Editable
+					<RichText
 						tagName="h3"
 						placeholder={__("Feature title")}
 						onChange={onChangeTitle}
@@ -179,7 +217,7 @@ registerBlockType("cgb/block-feature", {
 					/>
 
 					<div className="feature__description">
-						<Editable
+						<RichText
 							tagName="div"
 							multiline="p"
 							placeholder={__("Feature description")}
@@ -189,8 +227,8 @@ registerBlockType("cgb/block-feature", {
 							onFocus={onFocusDescription}
 						/>
 						<InnerBlocks />
-						<a href={props.attributes.link} class="button w100 button--primary">
-							{props.attributes.buttonText}
+						<a href={ link } class="button w100 button--primary">
+							{ buttonText }
 						</a>
 					</div>
 				</div>
@@ -200,22 +238,33 @@ registerBlockType("cgb/block-feature", {
 
 	// The "save" property must be specified and must be a valid function.
 	save: function(props) {
+
+		const { attributes: { blockAlignment, imgURL, imgAlt, title, description, buttonText, link }, classNames } = props;
+
+		const classes = classnames(
+			classNames,
+			blockAlignment ? `flex--align${blockAlignment}` : null
+		);
+
 		return (
-			<div className={props.className}>
-				<img
-					class="image--circle center-block"
-					src={props.attributes.imgURL}
-					alt={props.attributes.imgAlt}
-				/>
+			<div className={ classes }
+			style = { { textAlign: blockAlignment } }>
+				<div className="featured__image-wrapper">
+					<img
+						class="image--circle"
+						src={ imgURL }
+						alt={ imgAlt }
+					/>
+				</div>
 
 				<div className="feature__content">
-					<h3 className="feature__title">{props.attributes.title}</h3>
+					<h3 className="feature__title">{ title }</h3>
 					<div className="feature__description">
-						{props.attributes.description}
+						{ description }
 					</div>
 					<InnerBlocks.Content />
-					<a href={props.attributes.link} class="button button--primary">
-						{props.attributes.buttonText}
+					<a href={ link } class="button button--primary">
+						{ buttonText }
 					</a>
 				</div>
 			</div>

diff --git a/src/blocks/features-list/inspector.js b/src/blocks/features-list/inspector.js
@@ -4,47 +4,53 @@
 const { __ } = wp.i18n;
 const { Component } = wp.element;
 const {
-  InspectorControls,
-  BlockDescription,
+	InspectorControls,
 } = wp.blocks;
 const {
-  Toolbar,
-  Button,
-  PanelBody,
-  PanelRow,
-  TextControl
+	PanelBody,
+	PanelRow,
+	TextControl,
+	ToggleControl,
 } = wp.components;
 
 /**
  * Create an Inspector Controls wrapper Component
  */
 export default class Inspector extends Component {
+	constructor( props ) {
+		super( ...arguments );
+	}
 
-  constructor( props ) {
-    super( ...arguments );
-  }
-
-  render() {
-    return (
-        <InspectorControls key="inspector">
-            <PanelBody title={__("Link Options")}>
-                <PanelRow>
-                    <TextControl
-                        label={__("Link URL")}
-                        value={this.props.attributes.link}
-                        onChange={this.props.onChangeLink}
-                    />
-                </PanelRow>
-                <PanelRow>
-                    <TextControl
-                        label={__("Link Text")}
-                        value={this.props.attributes.buttonText}
-                        onChange={this.onChangeButtonText}
-                    />
-                </PanelRow>
-            </PanelBody>
-        </InspectorControls>
-    );
-  }
-
-}
+	render() {
+		const { attributes: { link, buttonText, circularImg }, onChangeLink, onChangeButtonText, onChangeImgType } = this.props;
+		return (
+			<InspectorControls key="inspector">
+				<PanelBody title={ __( 'Link Options' ) }>
+					<PanelRow>
+						<TextControl
+							label={ __( 'Link URL' ) }
+							value={ link }
+							onChange={ onChangeLink }
+						/>
+					</PanelRow>
+					<PanelRow>
+						<TextControl
+							label={ __( 'Link Text' ) }
+							value={ buttonText }
+							onChange={ onChangeButtonText }
+						/>
+					</PanelRow>
+				</PanelBody>
+				<PanelBody title={ __('Image Options') }>
+					<PanelRow>
+						<ToggleControl
+							label={ __( 'Circular Image' ) }
+							checked={ !!circularImg }
+							onChange={ onChangeImgType }
+						/>
+					</PanelRow>
+				</PanelBody>
+			</InspectorControls>
+		);
+	}
+}