Add style editor

websevendev · Dec 31, 2021 · 2f67ba7 · 2f67ba7
1 parent 28b7bb9
commit 2f67ba7
Show file tree

Hide file tree

Showing 8 changed files with 448 additions and 45 deletions.
diff --git a/attributes-for-blocks.php b/attributes-for-blocks.php
@@ -3,7 +3,7 @@
  * Plugin Name: Attributes for Blocks
  * Plugin URI: https://wordpress.org/plugins/attributes-for-blocks
  * Description: Allows to add HTML attributes to Gutenberg blocks.
- * Version: 1.0.1
+ * Version: 1.0.2
  * Author: websevendev
  * Author URI: https://chap.website/author/websevendev
  */

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
 		"@wordpress/hooks": "^3.2.2",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/scripts": "^19.2.2"
+		"@wordpress/scripts": "^19.2.2",
+		"style-to-object": "^0.3.0"
 	}
 }
diff --git a/readme.txt b/readme.txt
@@ -4,7 +4,7 @@ Tags: gutenberg, blocks, attributes, id, style, data, aria, onclick
 Requires at least: 5.6
 Tested up to: 5.8
 Requires PHP: 5.4
-Stable tag: 1.0.1
+Stable tag: 1.0.2
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -59,8 +59,9 @@ Blocks with custom attributes may become invalid, depending on which attributes
 
 == Changelog ==
 
+= 1.0.2 =
+* Add advanced editor for style attribute.
+* Remove jQuery.
+
 = 1.0.1 =
 * Fix special character encoding for dynamic blocks.
-
-= 1.0.0 =
-* Initial release.
diff --git a/src/HelpModal.js b/src/HelpModal.js
@@ -79,6 +79,10 @@ export default HelpModal = () => {
 							${__(`Spaces are allowed, leading or trailing semicolons are not needed.`, 'attributes-for-blocks')}<br>
 							${__(`Styles are not rendered in the block editor.`, 'attributes-for-blocks')}
 						`}</RawHTML>
+						<h5>{__(`Advanced editor`, 'attributes-for-blocks')}</h5>
+						<RawHTML as='p'>{`
+							${__(`Style attribute can be edited with an advanced editor by clicking "Toggle editor".`, 'attributes-for-blocks')}
+						`}</RawHTML>
 						<h4>{__(`ID attribute`, 'attributes-for-blocks')}</h4>
 						<p>{__(`If the block supports it, you should use the built-in "HTML anchor" feature instead.`, 'attributes-for-blocks')}</p>
 						<h4>{__(`Class attribute`, 'attributes-for-blocks')}</h4>

diff --git a/src/InspectorControls.js b/src/InspectorControls.js
@@ -19,6 +19,7 @@ import {
 } from '@wordpress/components';
 
 import HelpModal from './HelpModal';
+import StyleEditor from './StyleEditor';
 
 import {
 	renameProp,
@@ -34,11 +35,13 @@ class InspectorControls extends Component {
 		this.state = {
 			adding: '',
 			message: undefined,
+			styleEditor: JSON.parse(localStorage.getItem('attributesForBlocks/styleEditor')) || false,
 		};
 
 		this.addAttribute = this.addAttribute.bind(this);
 		this.removeAttribute = this.removeAttribute.bind(this);
 		this.toggleAttributeMode = this.toggleAttributeMode.bind(this);
+		this.toggleStyleEditor = this.toggleStyleEditor.bind(this);
 	}
 
 	/**
@@ -53,8 +56,18 @@ class InspectorControls extends Component {
 			 * Focus newly added attribute.
 			 */
 			setTimeout(() => {
-				document.querySelector(`.wsd-afb-action-input#afb-${prevState.adding} input[type="text"]`)?.focus();
-			}, 50);
+				if(prevState.adding === 'style' && this.state.styleEditor) {
+					document.querySelector(`.wsd-afb-style input[type="text"]`)?.focus();
+				} else {
+					document.querySelector(`.wsd-afb-action-input#afb-${prevState.adding} input[type="text"]`)?.focus();
+				}
+			}, 150);
+		}
+		if(prevState.styleEditor !== this.state.styleEditor) {
+			/**
+			 * Sync style editor setting.
+			 */
+			localStorage.setItem('attributesForBlocks/styleEditor', this.state.styleEditor);
 		}
 	}
 
@@ -144,6 +157,17 @@ class InspectorControls extends Component {
 		setAttributes({attributesForBlocks: nextAttributes});
 	}
 
+	/**
+	 * Switch style editor mode.
+	 */
+	toggleStyleEditor(e) {
+		this.setState({styleEditor: !this.state.styleEditor});
+		if(e) {
+			e.preventDefault();
+			return false;
+		}
+	}
+
 	/**
 	 * Render Attributes for Blocks inspector controls.
 	 */
@@ -160,7 +184,7 @@ class InspectorControls extends Component {
 					>
 						<TextControl
 							label={__('Additional attributes', 'attributes-for-blocks')}
-							placeholder={__('Add attribute', 'attributes-for-blocks')}
+							placeholder={__('Attribute name...', 'attributes-for-blocks')}
 							value={adding}
 							onChange={value => this.setState({
 								adding: value,
@@ -178,41 +202,58 @@ class InspectorControls extends Component {
 					</form>
 					<p className='wsd-afb-message'>{this.state.message || '\u00A0'}</p>
 					{attributesForBlocks && Object.keys(attributesForBlocks).map(attribute => {
-						let normalizedName = attribute.replace('@', '');
-						let isOverride = attribute.substring(0, 1) === '@';
-						let label = (
-							<Fragment>
-								<strong>{normalizedName}</strong>
-								{isOverride && ' ' + __('(override)', 'attributes-for-blocks')}
-							</Fragment>
-						);
+						const normalizedName = attribute.replace('@', '');
+						const isOverride = attribute.substring(0, 1) === '@';
+						const editor = normalizedName.toLowerCase() === 'style' && this.state.styleEditor ? 'style' : 'default';
 						return (
-							<div
-								key={attribute}
-								id={'afb-' + normalizedName}
-								className='wsd-afb-action-input'
-							>
-								<TextControl
-									label={label}
-									value={attributesForBlocks[attribute]}
-									onChange={value => this.updateAttribute(attribute, value)}
-								/>
-								<Button
-									className='button icon-button'
-									aria-label={__('Toggle between merge and override mode', 'attributes-for-blocks')}
-									aria-current={isOverride ? __('Override', 'attributes-for-blocks') : __('Merge', 'attributes-for-blocks')}
-									onClick={() => this.toggleAttributeMode(attribute)}
-								>
-									<Dashicon icon='randomize' />
-								</Button>
-								<Button
-									className='button icon-button is-last'
-									aria-label={__('Remove attribute', 'attributes-for-blocks') + ': ' + normalizedName}
-									onClick={() => this.removeAttribute(attribute)}
+							<Fragment>
+								<div
+									key={attribute}
+									id={'afb-' + normalizedName}
+									className='wsd-afb-action-input'
 								>
-									<Dashicon icon='no-alt' />
-								</Button>
-							</div>
+									{normalizedName.toLowerCase() === 'style' && (
+										<div className='wsd-afb-action-link'>
+											<a href='#' onClick={this.toggleStyleEditor}>
+												{__('Toggle editor', 'attributes-for-blocks')}
+											</a>
+										</div>
+									)}
+									<TextControl
+										label={(
+											<Fragment>
+												<strong>{normalizedName}</strong>
+												{isOverride && ' ' + __('(override)', 'attributes-for-blocks')}
+											</Fragment>
+										)}
+										disabled={editor === 'style'}
+										value={attributesForBlocks[attribute]}
+										onChange={value => this.updateAttribute(attribute, value)}
+									/>
+									<Button
+										className='button icon-button'
+										aria-label={__('Toggle between merge and override mode', 'attributes-for-blocks')}
+										aria-current={isOverride ? __('Override', 'attributes-for-blocks') : __('Merge', 'attributes-for-blocks')}
+										onClick={() => this.toggleAttributeMode(attribute)}
+									>
+										<Dashicon icon='randomize' />
+									</Button>
+									<Button
+										className='button icon-button is-last'
+										aria-label={__('Remove attribute', 'attributes-for-blocks') + ': ' + normalizedName}
+										onClick={() => this.removeAttribute(attribute)}
+									>
+										<Dashicon icon='no-alt' />
+									</Button>
+								</div>
+								{editor === 'style' && (
+									<StyleEditor
+										value={attributesForBlocks[attribute]}
+										onChange={value => this.updateAttribute(attribute, value)}
+										toggleStyleEditor={this.toggleStyleEditor}
+									/>
+								)}
+							</Fragment>
 						);
 					})}
 				</BaseControl>