Started on features list

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.
 
----
+---

plugin.php

@@ -1,10 +1,10 @@
 <?php
 /**
- * Plugin Name: text-and-image — CGB Gutenberg Block Plugin
- * Plugin URI: https://github.com/ahmadawais/create-guten-block/
+ * Plugin Name: Gutenly
+ * Plugin URI: https://github.com/gubbigubbi/gutenly
  * Description: Gutenly - a collection of must have GB blocks
  * Author: gubbigubbi
- * Author URI: https://AhmadAwais.com/
+ * Author URI: https://github.com/gubbigubbi/
  * Version: 1.0.0
  * License: GPL2+
  * License URI: http://www.gnu.org/licenses/gpl-2.0.txt

src/blocks.js

@@ -10,16 +10,14 @@
  * this is the file that Webpack is compiling.
  */
 
- /**
+/**
  * Import common styles
  */
-import './blocks/style.scss';
-import './blocks/editor.scss';
+import "./blocks/style.scss";
+import "./blocks/editor.scss";
 
 /**
  * Import blocks
  */
-import './blocks/text-and-image';
-
-
-
+import "./blocks/text-and-image";
+import "./blocks/features-list";

src/blocks/features-list/index.js

@@ -0,0 +1,109 @@
+/**
+ * BLOCK: Features
+ *
+ * A simple block to show some features
+ */
+import icons from "../icons";
+
+import { times } from "lodash";
+/**
+ * Internal block libraries
+ */
+
+const { __ } = wp.i18n; // Import __() from wp.i18n
+const { registerBlockType, Editable, MediaUpload, BlockControls } = wp.blocks;
+const { Button, Toolbar, Tooltip, Dashicon } = 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-features-list", {
+	// Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
+	title: __("Features", "CGB"), // 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: [__("features"), __("Features")],
+	attributes: {
+		content: {
+			type: "array",
+			source: "query",
+			selector: ".feature-text",
+			query: {
+				children: {
+					source: "children"
+				}
+			},
+			default: [[], [], [], []]
+		},
+		columns: {
+			type: "number",
+			default: 4
+		}
+	},
+
+	// The "edit" property must be a valid function.
+	edit({ attributes, setAttributes, className, focus, setFocus }) {
+		const { content, columns } = attributes;
+
+		return (
+			<div className={className}>
+				<div className="row flex">
+					{times(columns, index => (
+						<div className="col-3" key={index}>
+							<Editable
+								tagName="div"
+								multiline="p"
+								value={content && content[index] && content[index].children}
+								onChange={nextContent => {
+									setAttributes({
+										content: [
+											...content.slice(0, index),
+											{ children: nextContent },
+											...content.slice(index + 1)
+										]
+									});
+								}}
+								focus={focus && focus.column === index}
+								onFocus={() => setFocus({ column: index })}
+								placeholder={__("New Feature")}
+							/>
+						</div>
+					))}
+				</div>
+
+				<p>preview</p>
+				<div className="row flex">
+					{times(columns, index => (
+						<div className="wp-block-column col-3" key={`column-${index}`}>
+							<div>{content[index].children}</div>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	},
+
+	// The "save" property must be specified and must be a valid function.
+	save({ attributes, className }) {
+		const { content, columns } = attributes;
+		return (
+			<div className={className}>
+				<div className="row flex">
+					{times(columns, index => (
+						<div className="wp-block-column col-3" key={`column-${index}`}>
+							<div className="feature-text">{content[index].children}</div>
+						</div>
+					))}
+				</div>
+			</div>
+		);
+	}
+});

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 {
 }