Merge pull request #7 from bangank36/feat/register-custom-block

Gitenberg: Add sample block

package.json

@@ -14,6 +14,7 @@
 		"@automattic/isolated-block-editor": "^2.16.0",
 		"@emotion/react": "^11.9.3",
 		"@wordpress/base-styles": "^4.6.0",
+		"@wordpress/url": "^3.35.0",
 		"entities": "2.0.0",
 		"markdown-it": "12.1.0",
 		"path": "^0.12.7",

src/blocks-library/constants.js

@@ -0,0 +1,18 @@
+/**
+ * Input types that supports the range, along with the type to handle their values.
+ */
+export const CF7BLOCKS_RANGE_SUPPORTED_INPUT_TYPES = {
+	number: 'number',
+	date: 'date',
+	range: 'number',
+};
+
+export const CF7BLOCKS_PLACEHOLDER_SUPPORTED_TYPES = [
+	'text',
+	'email',
+	'url',
+	'tel',
+	'number',
+	'date',
+	'textarea',
+];

src/blocks-library/editor.scss

@@ -0,0 +1,21 @@
+/** Custom Styles **/
+@import "./selection-base/editor.scss";
+@import "./form-template/editor.scss";
+@import "./acceptance/editor.scss";
+@import "./input-base/editor.scss";
+
+.cf7-block-field {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+
+	& > input,
+	& > textarea {
+		width: 100%;
+		padding: 5px;
+	}
+
+	textarea {
+		min-height: 300px;
+	}
+}

src/blocks-library/index.js

@@ -0,0 +1,4 @@
+/**
+ * Blocks
+ */
+import './shields-badge';

src/blocks-library/shields-badge/block.json

@@ -0,0 +1,61 @@
+{
+    "$schema": "https://json.schemastore.org/block.json",
+    "apiVersion": 2,
+    "name": "gitenberg/shields-badge",
+    "title": "Shields Badge",
+    "category": "text",
+    "description": "Badge",
+    "keywords": [
+        "badge"
+    ],
+    "version": "1.0.0",
+    "textdomain": "gitenberg",
+    "attributes": {
+        "style": {
+            "type": "string",
+            "default": "flat-square"
+        },
+        "label": {
+            "type": "string",
+            "default": "healthinesses"
+        },
+        "logo": {
+            "type": "string",
+            "default": "appveyor"
+        },
+        "logoColor": {
+            "type": "string",
+            "default": "violet"
+        },
+        "logoWidth": {
+            "type": "number",
+            "default": 40
+        },
+        "link": {
+            "type": "array",
+            "default": ["http://left", "http://right"]
+        },
+        "labelColor": {
+            "type": "string",
+            "default": "abcdef"
+        },
+        "color": {
+            "type": "string",
+            "default": "fedcba"
+        },
+        "cacheSeconds": {
+            "type": "number",
+            "default": 3600
+        }
+    },
+    "supports": {
+        "multiple": false,
+        "spacing": {
+            "margin": true
+        },
+        "customClassName": false,
+        "anchor": false,
+        "html": false
+    },
+    "styles": []
+}

src/blocks-library/shields-badge/edit.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress Dependencies
+ */
+import { isEmpty } from 'lodash';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+/**
+ *  Custom Dependencies
+ */
+import classnames from 'classnames';
+import Inspector from './inspector';
+
+export default function edit( props ) {
+	const blockProps = useBlockProps( {
+		className: classnames( 'cf7-submit-field' ),
+	} );
+
+	const { label, logo, logoColor, logoWidth, labelColor, color, style } = props.attributes;
+	const shieldsUrl = addQueryArgs( 'https://shields.io/badge/style-flat--square-green', {
+		label, 
+		logo, 
+		logoColor, 
+		logoWidth, 
+		labelColor, 
+		color,
+		style
+	})
+
+	return (
+		<>
+			<div { ...blockProps }>
+				<img src={shieldsUrl}/>
+			</div>
+			<Inspector { ...props } />
+		</>
+	);
+}

src/blocks-library/shields-badge/index.js

@@ -0,0 +1,16 @@
+import { registerBlockType } from '@wordpress/blocks';
+import metadata from './block.json';
+
+import edit from './edit';
+import save from './save';
+
+import { button } from '@wordpress/icons';
+
+console.log('import');
+
+registerBlockType( metadata, {
+	apiVersion: 2,
+	edit,
+	save,
+	icon: button,
+} );

src/blocks-library/shields-badge/inspector.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress Dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { 
+	TextControl, 
+	SelectControl,
+	PanelBody } from '@wordpress/components';
+
+function Inspector( props ) {
+	const { label, logo, logoColor, logoWidth, labelColor, color, style } = props.attributes;
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Parameters', 'gitenberg' ) }>
+				<SelectControl
+					label={__('Badge Style', 'gitenberg')}
+					value={ style }
+					options={ [
+						{ label: 'Plastic', value: 'plastic' },
+						{ label: 'Square', value: 'flat' },
+						{ label: 'Flat square', value: 'flat-square' },
+						{ label: 'For the badge', value: 'for-the-badge' },
+						{ label: 'Social', value: 'social' }
+					] }
+					onChange={(newValue) => props.setAttributes({ style: newValue })}
+				/>
+				<TextControl
+					style={ { maxWidth: '100%' } }
+					value={label}
+					label={__('Label', 'gitenberg')}
+					help={__('Left-hand-side text', 'gitenberg')}
+					onChange={(newValue) => props.setAttributes({ label: newValue })}
+				/>
+				<TextControl
+					style={ { maxWidth: '100%' } }
+					value={logo}
+					label={__('Logo', 'gitenberg')}
+					help={__('Insert the logo name or custom logo image.', 'gitenberg')}
+					onChange={(newValue) => props.setAttributes({ logo: newValue })}
+				/>
+				<TextControl
+					style={ { maxWidth: '100%' } }
+					value={ logoColor }
+					label={__('Logo Color', 'gitenberg')}
+					onChange={ ( newValue ) =>
+						props.setAttributes( { logoColor: newValue } )
+					}
+				/>
+				<TextControl
+					style={ { maxWidth: '100%' } }
+					value={ logoWidth }
+					label={__('Logo Width', 'gitenberg')}
+					onChange={ ( newValue ) =>
+						props.setAttributes( { logoWidth: newValue } )
+					}
+				/>
+				<TextControl
+					style={ { maxWidth: '100%' } }
+					value={ labelColor }
+					label={__('Label Color', 'gitenberg')}
+					onChange={ ( newValue ) =>
+						props.setAttributes( { labelColor: newValue } )
+					}
+				/>
+				<TextControl
+					style={ { maxWidth: '100%' } }
+					value={ color }
+					label={__('Badge Color', 'gitenberg')}
+					help={__('Background color for the right part.', 'gitenberg')}
+					onChange={ ( newValue ) =>
+						props.setAttributes( { color: newValue } )
+					}
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+export default Inspector;

src/blocks-library/shields-badge/save.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress Dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import { addQueryArgs } from '@wordpress/url';
+
+export default function save( props ) {
+	const { label, logo, logoColor, logoWidth, labelColor, color, style } = props.attributes;
+	const shieldsUrl = addQueryArgs( 'https://shields.io/badge/style-flat--square-green', {
+		label, 
+		logo, 
+		logoColor, 
+		logoWidth, 
+		labelColor, 
+		color,
+		style
+	})
+
+	return (
+		<div { ...useBlockProps.save() }>
+			<img src={shieldsUrl}/>
+		</div>
+	);
+}

src/blocks-library/shields-badge/style.scss

@@ -0,0 +1,17 @@
+
+
+.wp-block-cf7-blocks-input-base {
+
+	label {
+		display: flex;
+		flex-direction: column;
+	}
+
+	input,
+	textarea {
+		width: 100%;
+		padding: 5px;
+		min-height: 30px;
+	}
+
+}

src/blocks-library/style.scss

@@ -0,0 +1,10 @@
+@import "./input-base/style.scss";
+@import "./selection-base//style.scss";
+
+.wpcf7-form > p {
+	display: none;
+}
+
+.wpcf7-form > p br {
+	display: none;
+}