{!attributes.imgID ? (
{props.focus ? (
-
@@ -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 (
-
{props.focus ? (
-
- 
+
-
-
-
-
-
-
-
- );
- }
-
-}
\ No newline at end of file
+ render() {
+ const { attributes: { link, buttonText, circularImg }, onChangeLink, onChangeButtonText, onChangeImgType } = this.props;
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/blocks/pdf-download/index.js b/src/blocks/pdf-download/index.js
new file mode 100644
index 0000000..ffd8981
--- /dev/null
+++ b/src/blocks/pdf-download/index.js
@@ -0,0 +1,156 @@
+/**
+ * BLOCK: PDF Download
+ *
+ * A simple block to show a pdf download link
+ */
+import icons from "../icons";
+import Inspector from './inspector';
+/**
+ * Internal block libraries
+ */
+
+const { __ } = wp.i18n; // Import __() from wp.i18n
+const {
+ registerBlockType,
+ RichText,
+ BlockControls,
+} = wp.blocks;
+const {
+ Button,
+ Toolbar,
+ Tooltip,
+ Dashicon,
+ TextControl
+} = wp.components;
+/**
+ * Register: aa Gutenberg Block.
+ *
+ * Registers a new block provided a unique name and an object defining its
+ * behavior. Once registered, the block is made editor as an option to any
+ * editor interface where blocks are implemented.
+ *
+ * @param {string} name Block name.
+ * @param {Object} settings Block settings.
+ * @return {?WPBlock} The block, if it has been successfully
+ * registered; otherwise `undefined`.
+ */
+registerBlockType("cgb/block-pdf-download", {
+ // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
+ title: __("PDF Download"), // Block title.
+ icon: "nametag", // 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: [__("pdf"), __("PDF Download")],
+ attributes: {
+ title: {
+ type: "string",
+ source: "children",
+ selector: "h3"
+ },
+ description: {
+ type: "array",
+ source: "children",
+ selector: ".pdf-download__description"
+ },
+ // imgURL: {
+ // type: "string",
+ // },
+ // imgID: {
+ // type: "number",
+ // },
+ // imgAlt: {
+ // type: "string",
+ // },
+ url: {
+ type: "string"
+ }
+ },
+
+ // The "edit" property must be a valid function.
+ edit: props => {
+ // This control which editable will be focused and falls back to the title editable
+ const focusedEditable = props.focus
+ ? props.focus.editable || "title"
+ : null;
+
+ const attributes = props.attributes;
+
+ const onChangeTitle = value => {
+ props.setAttributes({ title: value });
+ };
+ const onFocusTitle = focus => {
+ props.setFocus(_.extend({}, focus, { editable: "title" }));
+ };
+
+ const onChangeDescription = value => {
+ props.setAttributes({ description: value });
+ };
+ const onFocusDescription = focus => {
+ props.setFocus(_.extend({}, focus, { editable: "description" }));
+ };
+
+ const onChangeUrl = value => {
+ props.setAttributes({ url: value })
+ }
+
+ // const onSelectImage = img => {
+ // props.setAttributes({
+ // imgID: img.id,
+ // imgURL: img.url,
+ // imgAlt: img.alt,
+ // });
+ // };
+ // const onRemoveImage = () => {
+ // props.setAttributes({
+ // imgID: null,
+ // imgURL: null,
+ // imgAlt: null
+ // });
+ // };
+
+ return [
+ !!props.focus && (
+
+
+
+
+ (
+
+ )}
+ />
+ ) : (
+
+
+
+ );
+ }
+}
diff --git a/src/blocks/section/index.js b/src/blocks/section/index.js
index e5c2eaa..0da6c80 100644
--- a/src/blocks/section/index.js
+++ b/src/blocks/section/index.js
@@ -39,7 +39,7 @@ const validAlignments = ["wide", "full"];
*/
registerBlockType("cgb/block-section", {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
- title: __("Section", "CGB"), // Block title.
+ title: __("Section"), // Block title.
icon: "editor-table", // 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: [__("team"), __("Section")],
diff --git a/src/blocks/section/inspector.js b/src/blocks/section/inspector.js
index 435a3b4..9aa906c 100644
--- a/src/blocks/section/inspector.js
+++ b/src/blocks/section/inspector.js
@@ -4,70 +4,67 @@
const { __ } = wp.i18n;
const { Component } = wp.element;
const {
- InspectorControls,
- BlockDescription,
- ColorPalette,
+ InspectorControls,
+ ColorPalette,
} = wp.blocks;
const {
- PanelBody,
- PanelRow,
- PanelColor,
- TextControl,
+ PanelBody,
+ PanelRow,
+ PanelColor,
+ TextControl,
} = wp.components;
/**
* Create an Inspector Controls wrapper Component
*/
export default class Inspector extends Component {
+ constructor( props ) {
+ super( ...arguments );
+ }
- constructor( props ) {
- super( ...arguments );
- }
+ render() {
+ return (
+
+
+
+
+
+
- render() {
- return (
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
- );
- }
-
-}
\ No newline at end of file
+
+
+
+
+ );
+ }
+}
diff --git a/src/blocks/team-member/index.js b/src/blocks/team-member/index.js
index f8f38b7..f7778db 100644
--- a/src/blocks/team-member/index.js
+++ b/src/blocks/team-member/index.js
@@ -39,7 +39,7 @@ const {
*/
registerBlockType("cgb/block-team-member", {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
- title: __("Team Member", "CGB"), // Block title.
+ title: __("Team Member"), // Block title.
icon: "nametag", // 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: [__("team"), __("Team Member")],
diff --git a/src/blocks/text-and-image/index.js b/src/blocks/text-and-image/index.js
index 6e7add5..141ed80 100644
--- a/src/blocks/text-and-image/index.js
+++ b/src/blocks/text-and-image/index.js
@@ -7,7 +7,7 @@
/**
* Block Dependencies
*/
-import icons from "../icons";
+import icons from '../icons';
import Inspector from './inspector';
/**
* Internal block libraries
@@ -16,20 +16,15 @@ import Inspector from './inspector';
const { __ } = wp.i18n; // Import __() from wp.i18n
const {
registerBlockType,
- Editable,
MediaUpload,
BlockControls,
InnerBlocks,
- InspectorControls
} = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE
const {
Button,
Toolbar,
Tooltip,
Dashicon,
- PanelBody,
- PanelRow,
- TextControl
} = wp.components;
/**
* Register: aa Gutenberg Block.
@@ -43,163 +38,160 @@ const {
* @return {?WPBlock} The block, if it has been successfully
* registered; otherwise `undefined`.
*/
-registerBlockType("cgb/block-text-and-image", {
+registerBlockType( 'cgb/block-text-and-image', {
// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
- title: __("Text & Image", "CGB"), // 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: [__("text-and-image — CGB Block"), __("Text and Image")],
+ title: __( 'Text & Image' ), // 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: [ __( 'text-and-image — CGB Block' ), __( 'Text and Image' ) ],
attributes: {
message: {
- type: "array",
- source: "children",
- selector: ".message-body"
+ type: 'array',
+ source: 'children',
+ selector: '.message-body',
},
imgURL: {
- type: "string",
- source: "attribute",
- attribute: "src",
- selector: "img"
+ type: 'string',
+ source: 'attribute',
+ attribute: 'src',
+ selector: 'img',
},
imgID: {
- type: "number"
+ type: 'number',
},
imgAlt: {
- type: "string",
- source: "attribute",
- attribute: "alt",
- selector: "img"
+ type: 'string',
+ source: 'attribute',
+ attribute: 'alt',
+ selector: 'img',
},
textFirstAlignment: {
- type: "boolean",
- default: false
+ type: 'boolean',
+ default: false,
},
columnWidth: {
- type: "number",
+ type: 'number',
default: 50,
- }
+ },
},
// The "edit" property must be a valid function.
edit: props => {
- const onChangeMessage = value => {
- props.setAttributes({ message: value });
- };
const onSelectImage = img => {
- props.setAttributes({
+ props.setAttributes( {
imgID: img.id,
imgURL: img.url,
- imgAlt: img.alt
- });
+ imgAlt: img.alt,
+ } );
};
const onRemoveImage = () => {
- props.setAttributes({
+ props.setAttributes( {
imgID: null,
imgURL: null,
- imgAlt: null
- });
+ imgAlt: null,
+ } );
};
const toggleTextFirstAlignment = () => {
- props.setAttributes({
- textFirstAlignment: !props.attributes.textFirstAlignment
- });
+ props.setAttributes( {
+ textFirstAlignment: ! props.attributes.textFirstAlignment,
+ } );
};
const onChangeColumnWidth = value => {
- props.setAttributes({
- columnWidth: value
- })
+ props.setAttributes( {
+ columnWidth: value,
+ } );
};
return [
!! props.focus && (
+
+
diff --git a/src/blocks/features-list/inspector.js b/src/blocks/features-list/inspector.js
index e8f5470..7a24bbc 100644
--- 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 (
-
+ 
+
-
{props.attributes.title}
+{ title }
- {props.attributes.description}
+ { description }
+
+ ];
+ },
+
+ // The "save" property must be specified and must be a valid function.
+ save: function(props) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+});
diff --git a/src/blocks/pdf-download/inspector.js b/src/blocks/pdf-download/inspector.js
new file mode 100644
index 0000000..4855816
--- /dev/null
+++ b/src/blocks/pdf-download/inspector.js
@@ -0,0 +1,76 @@
+/**
+ * Internal block libraries
+ */
+const { __ } = wp.i18n;
+const { Component } = wp.element;
+const {
+ InspectorControls,
+ MediaUpload,
+ UrlInput,
+} = wp.blocks;
+const {
+ Toolbar,
+ Button,
+ PanelBody,
+ PanelRow,
+} = wp.components;
+
+import icons from '../icons';
+
+/**
+ * Create an Inspector Controls wrapper Component
+ */
+export default class Inspector extends Component {
+ constructor( props ) {
+ super( ...arguments );
+ }
+
+ render() {
+ const { attributes: { url }, onChangeUrl } = this.props;
+ return (
+
+ {props.attributes.title}
+
+ {props.attributes.description}
+
+
+ 
+ {this.props.focus ? (
+
+ ) : null}
+
+ )} */ }
+
+
+ {this.props.focus ? (
+
+ ) : null}
+
- {!!props.focus && (
+ ),
+
+ { !! props.focus && (
-
+
- )}
+ ) }
-
,
];
},
// The "save" property must be specified and must be a valid function.
- save: function(props) {
- const colOrder = props.attributes.textFirstAlignment
- ? "row-reverse"
- : "row";
+ save: function( props ) {
+ const colOrder = props.attributes.textFirstAlignment ?
+ 'row-reverse' :
+ 'row';
return (
-
+
+
- {!props.attributes.imgID ? (
+
-
+ { ! props.attributes.imgID ? (
(
+ value={ props.attributes.imgID }
+ render={ ( { open } ) => (
- )}
+ ) }
/>
) : (
- {props.focus ? (
-
- )}
+ ) }
- {props.focus ? (
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
- );
- }
-
-}
\ No newline at end of file
+ render() {
+ const { attributes: { columnWidth }, onChangeColumnWidth } = this.props;
+
+ return (
+
+
+
+
+
+
+
+ );
+ }
+}
diff --git a/src/blocks/two-columns/index.js b/src/blocks/two-columns/index.js
deleted file mode 100644
index 819d09c..0000000
--- a/src/blocks/two-columns/index.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- * BLOCK: Two Columns
- *
- * A temporary block to show 2 columns until the native columns block improves
- */
-
-/**
- * Block Dependencies
- */
-import icons from "../icons";
-import Inspector from './inspector';
-import { times } from 'lodash';
-import memoize from 'memize';
-/**
- * Internal block libraries
- */
-
-const { __, sprintf } = wp.i18n; // Import __() from wp.i18n
-const {
- registerBlockType,
- BlockControls,
- InnerBlocks,
- InspectorControls
-} = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE
-const {
- Button,
- Toolbar,
- Tooltip,
- Dashicon,
- PanelBody,
- PanelRow,
- TextControl
-} = wp.components;
-
-/**
- * Returns the layouts configuration for a given number of columns.
- *
- * @param {number} columns Number of columns.
- *
- * @return {Object[]} Columns layout configuration.
- */
-const getColumnLayouts = memoize( ( columns ) => {
- return times( columns, ( n ) => ( {
- name: `column-${ n + 1 }`,
- label: sprintf( __( 'Column %d' ), n + 1 ),
- icon: 'columns',
- } ) );
-} );
-
-/**
- * Register: aa Gutenberg Block.
- *
- * Registers a new block provided a unique name and an object defining its
- * behavior. Once registered, the block is made editor as an option to any
- * editor interface where blocks are implemented.
- *
- * @param {string} name Block name.
- * @param {Object} settings Block settings.
- * @return {?WPBlock} The block, if it has been successfully
- * registered; otherwise `undefined`.
- */
-registerBlockType("cgb/block-two-columns", {
- // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
- title: __("Two Columns", "CGB"), // Block title.
- icon: "dashicons-screenoptions", // Block icon from Dashicons
- category: "layout", // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
- keywords: [__("two-columns — CGB Block"), __("Two Columns")],
- attributes: {
- columns: {
- type: 'number',
- default: 2,
- },
- textFirstAlignment: {
- type: "boolean",
- default: false
- },
- columnWidth: {
- type: "number",
- default: 50,
- }
- },
-
- // The "edit" property must be a valid function.
- edit: props => {
-
- const toggleTextFirstAlignment = () => {
- props.setAttributes({
- textFirstAlignment: !props.attributes.textFirstAlignment
- });
- };
- const onChangeColumnWidth = value => {
- props.setAttributes({
- columnWidth: value
- })
- };
- return [
- !! props.focus && (
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-
-}
\ No newline at end of file
diff --git a/src/common.scss b/src/common.scss
index deccc33..bb50aec 100644
--- a/src/common.scss
+++ b/src/common.scss
@@ -60,3 +60,14 @@ $team-member__img--width: 120px;
padding: calc(1em + calc(#{$team-member__img--width} / 2)) 1em 1em;
}
}
+
+.wp-block-cgb-block-pdf-download {
+ padding: 1rem;
+
+ margin: 1rem 0;
+ background-color: #3ab4d2;
+ border-left: 5px solid darken(#3ab4d2, 10%);
+ float: left;
+ width: 100%;
+ h3, p { margin-bottom: 0; margin-top: 0; color: #fff; }
+}
+
);
- }
-});
+ },
+} );
diff --git a/src/blocks/text-and-image/inspector.js b/src/blocks/text-and-image/inspector.js
index 54c2e18..e4526ff 100644
--- a/src/blocks/text-and-image/inspector.js
+++ b/src/blocks/text-and-image/inspector.js
@@ -4,52 +4,40 @@
const { __ } = wp.i18n;
const { Component } = wp.element;
const {
- InspectorControls,
- BlockDescription,
+ InspectorControls,
} = wp.blocks;
const {
- Toolbar,
- Button,
- PanelBody,
- PanelRow,
- RangeControl
+ PanelBody,
+ PanelRow,
+ RangeControl,
} = wp.components;
/**
* Create an Inspector Controls wrapper Component
*/
export default class Inspector extends Component {
-
- constructor( props ) {
- super( ...arguments );
- }
-
- render() {
- return (
-
-
+
+
+
{ __( 'Block settings' ) }
-
- {!!props.focus && (
-
-
-
-
-
-
-
- )}
-
-
- ];
- },
-
- // The "save" property must be specified and must be a valid function.
- save: function(props) {
- const colOrder = props.attributes.textFirstAlignment
- ? "row-reverse"
- : "row";
- return (
-
-
-
-
-
-
-
-
- );
- }
-});
diff --git a/src/blocks/two-columns/inspector.js b/src/blocks/two-columns/inspector.js
deleted file mode 100644
index 54c2e18..0000000
--- a/src/blocks/two-columns/inspector.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Internal block libraries
- */
-const { __ } = wp.i18n;
-const { Component } = wp.element;
-const {
- InspectorControls,
- BlockDescription,
-} = wp.blocks;
-const {
- Toolbar,
- Button,
- PanelBody,
- PanelRow,
- RangeControl
-} = wp.components;
-
-/**
- * Create an Inspector Controls wrapper Component
- */
-export default class Inspector extends Component {
-
- constructor( props ) {
- super( ...arguments );
- }
-
- render() {
- return (
-
-
-
-
-
-
- { __( 'Block settings' ) }
-