diff --git a/README.md b/README.md index f823c7f..026c02c 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,29 @@ -#Gutenly - A collection of must have Gutenberg blocks by Rhys Clay +# Gutenly - A collection of must have Gutenberg blocks by Rhys Clay This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block). +## Current blocks + +* Image & Text : a simple, side by side image and text block +* Feature list (in development): a list of features with nice thumbnails + Getting started: -## 👉 `npm start` -- Use to compile and run the block in development mode. -- Watches for any changes and reports back any errors in your code. +## 👉 `npm start` + +* Use to compile and run the block in development mode. +* Watches for any changes and reports back any errors in your code. + +## 👉 `npm run build` + +* Use to build production code for your block inside `dist` folder. +* Runs once and reports back the gzip file sizes of the produced code. -## 👉 `npm run build` -- Use to build production code for your block inside `dist` folder. -- Runs once and reports back the gzip file sizes of the produced code. +## 👉 `npm run eject` -## 👉 `npm run eject` -- Use to eject your plugin out of `create-guten-block`. -- Provides all the configurations so you can customize the project as you want. -- It's a one-way street, `eject` and you have to maintain everything yourself. -- You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own. +* Use to eject your plugin out of `create-guten-block`. +* Provides all the configurations so you can customize the project as you want. +* It's a one-way street, `eject` and you have to maintain everything yourself. +* You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own. ---- \ No newline at end of file +--- diff --git a/plugin.php b/plugin.php index ab5f5d9..b39f079 100644 --- a/plugin.php +++ b/plugin.php @@ -1,10 +1,10 @@ +
+ {times(columns, index => ( +
+ { + setAttributes({ + content: [ + ...content.slice(0, index), + { children: nextContent }, + ...content.slice(index + 1) + ] + }); + }} + focus={focus && focus.column === index} + onFocus={() => setFocus({ column: index })} + placeholder={__("New Feature")} + /> +
+ ))} +
+ +

preview

+
+ {times(columns, index => ( +
+
{content[index].children}
+
+ ))} +
+ + ); + }, + + // The "save" property must be specified and must be a valid function. + save({ attributes, className }) { + const { content, columns } = attributes; + return ( +
+
+ {times(columns, index => ( +
+
{content[index].children}
+
+ ))} +
+
+ ); + } +}); diff --git a/src/blocks/text-and-image/icons.js b/src/blocks/icons.js similarity index 100% rename from src/blocks/text-and-image/icons.js rename to src/blocks/icons.js diff --git a/src/blocks/style.scss b/src/blocks/style.scss index fa59b86..98f1d77 100644 --- a/src/blocks/style.scss +++ b/src/blocks/style.scss @@ -3,23 +3,25 @@ * * CSS for both Frontend+Backend. */ - .row { - margin-left: -$grid-gutter-width; - margin-right: -$grid-gutter-width; - > * { - padding-left: $grid-gutter-width; - padding-right: $grid-gutter-width; - } +.row { + margin-left: -$grid-gutter-width; + margin-right: -$grid-gutter-width; + > * { + padding-left: $grid-gutter-width; + padding-right: $grid-gutter-width; + } } .flex { - display: flex; - align-items: center; + display: flex; + align-items: center; } .col-6 { - width: 50%; + width: 50%; +} +.col-3 { + width: calc(100% / 4); } // scoped styles -.wp-block-cgb-block-text-and-image { - +.wp-block-cgb-block-text-and-image { } diff --git a/src/blocks/text-and-image/index.js b/src/blocks/text-and-image/index.js index 7188144..0258e14 100644 --- a/src/blocks/text-and-image/index.js +++ b/src/blocks/text-and-image/index.js @@ -3,19 +3,13 @@ * * A simple layout block to show and image and some text side by side */ -import icons from './icons'; +import icons from "../icons"; /** * Internal block libraries */ const { __ } = wp.i18n; // Import __() from wp.i18n -const { - registerBlockType, - Editable, - MediaUpload, - BlockControls, - //BlockAlignmentToolbar -} = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE +const { registerBlockType, Editable, MediaUpload, BlockControls } = wp.blocks; // Import registerBlockType() from wp.blocks as well as Editable so we can use TinyMCE const { Button, Toolbar, Tooltip, Dashicon } = wp.components; /** * Register: aa Gutenberg Block. @@ -29,39 +23,37 @@ const { Button, Toolbar, Tooltip, Dashicon } = wp.components; * @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-and-image - CGB Block', 'CGB'), // Block title. - icon: 'shield', // 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", "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")], 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' - }, + type: "boolean", + default: false + } }, // The "edit" property must be a valid function. @@ -73,50 +65,51 @@ registerBlockType('cgb/block-text-and-image', { props.setAttributes({ imgID: img.id, imgURL: img.url, - imgAlt: img.alt, + imgAlt: img.alt }); }; const onRemoveImage = () => { props.setAttributes({ imgID: null, imgURL: null, - imgAlt: null, + imgAlt: null }); }; const toggleTextFirstAlignment = () => { props.setAttributes({ textFirstAlignment: !props.attributes.textFirstAlignment }); - }; return (
+ {!!props.focus && ( + + + + + + + + )} - { - !!props.focus && ( - - - - - - - - ) - } - -
+
{!props.attributes.imgID ? ( ( )} - > - + /> ) : ( -
- {props.attributes.imgAlt} - {props.focus ? ( - - ) : null} -
- )} +
+ {props.attributes.imgAlt} + {props.focus ? ( + + ) : null} +
+ )}
-
-
+
+ ); }, // 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.message} -
+
+
{props.attributes.message}
- {props.attributes.imgAlt} + {props.attributes.imgAlt}
); - }, + } }); diff --git a/src/init.php b/src/init.php index f068eab..83b5739 100644 --- a/src/init.php +++ b/src/init.php @@ -20,18 +20,18 @@ * * @since 1.0.0 */ -function text_and_image_cgb_block_assets() { +function gutenly_cgb_block_assets() { // Styles. wp_enqueue_style( - 'text_and_image-cgb-style-css', // Handle. + 'gutenly-cgb-style-css', // Handle. plugins_url( 'dist/blocks.style.build.css', dirname( __FILE__ ) ), // Block style CSS. array( 'wp-blocks' ) // Dependency to include the CSS after it. // filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // Version: filemtime — Gets file modification time. ); -} // End function text_and_image_cgb_block_assets(). +} // End function gutenly_cgb_block_assets(). // Hook: Frontend assets. -add_action( 'enqueue_block_assets', 'text_and_image_cgb_block_assets' ); +add_action( 'enqueue_block_assets', 'gutenly_cgb_block_assets' ); /** * Enqueue Gutenberg block assets for backend editor. @@ -42,10 +42,10 @@ function text_and_image_cgb_block_assets() { * * @since 1.0.0 */ -function text_and_image_cgb_editor_assets() { +function gutenly_cgb_editor_assets() { // Scripts. wp_enqueue_script( - 'text_and_image-cgb-block-js', // Handle. + 'gutenly-cgb-block-js', // Handle. plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack. array( 'wp-blocks', 'wp-i18n', 'wp-element' ) // Dependencies, defined above. // filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ) // Version: filemtime — Gets file modification time. @@ -53,12 +53,12 @@ function text_and_image_cgb_editor_assets() { // Styles. wp_enqueue_style( - 'text_and_image-cgb-block-editor-css', // Handle. + 'gutenly-cgb-block-editor-css', // Handle. plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ), // Block editor CSS. array( 'wp-edit-blocks' ) // Dependency to include the CSS after it. // filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' ) // Version: filemtime — Gets file modification time. ); -} // End function text_and_image_cgb_editor_assets(). +} // End function gutenly_cgb_editor_assets(). // Hook: Editor assets. -add_action( 'enqueue_block_editor_assets', 'text_and_image_cgb_editor_assets' ); \ No newline at end of file +add_action( 'enqueue_block_editor_assets', 'gutenly_cgb_editor_assets' ); \ No newline at end of file