Changeset 3181616

Timestamp:

11/04/2024 04:00:34 PM (15 months ago)

Author:

jorisvanmontfort

Message:

1.3.2 Font-size option single icon

Location:

jvm-rich-text-icons/trunk

Files:

• dist/blocks.build.js (modified) (1 diff)
• plugin.php (modified) (2 diffs)
• readme.txt (modified) (2 diffs)
• src/blocks.js (modified) (7 diffs)

jvm-rich-text-icons/trunk/dist/blocks.build.js

@@ -1 @@
-!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function r(e,t){var n={};for(var r in e)t.indexOf(r)>=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"icon",function(){return f});var o=n(1),__=wp.i18n.__,i=wp.richText.registerFormatType,a=wp.element.Fragment,l=wp.components,c=(l.Toolbar,l.Button,l.Popover,wp.blocks.registerBlockType),s=wp.blockEditor.InspectorControls,u=wp.components.PanelBody,p=wp.components.ComboboxControl,m="jvm/insert-icons",f={name:m,title:__("Insert Icon","jvm-richtext-icons"),tagName:"i",className:null,edit:function(e){var t=e.isOpen,n=e.value,r=e.onChange,i=e.activeAttributes;return wp.element.createElement(a,null,wp.element.createElement(o.a,{name:m,isOpen:t,value:n,onChange:r,activeAttributes:i}))}};wp.domReady(function(){[f].forEach(function(e){var t=e.name,n=r(e,["name"]);t&&i(t,n)})}),c("jvm/single-icon",{title:__("Single icon"),icon:"flag",category:"common",keywords:[__("Icon")],attributes:{icon:{type:"string"}},edit:function(e){var t=jvm_richtext_icon_settings.iconset,n=[],r="",o=jvm_richtext_icon_settings.base_class,i=!0,a=!1,l=void 0;try{for(var c,m=t[Symbol.iterator]();!(i=(c=m.next()).done);i=!0){var f=c.value;n.push({value:f,label:f})}}catch(e){a=!0,l=e}finally{try{!i&&m.return&&m.return()}finally{if(a)throw l}}void 0!==e.attributes.icon?r=e.attributes.icon:void 0!==t[0]&&(r=t[0]),e.setAttributes({icon:r});var v=o+" "+e.attributes.icon;return[wp.element.createElement(s,null,wp.element.createElement(u,{label:__("Icon")},wp.element.createElement(p,{label:__("Icon"),value:r,onChange:function(t){t&&e.setAttributes({icon:t})},options:n,__experimentalRenderItem:function(e){var t=o+" "+e.item.value;return wp.element.createElement("span",null,wp.element.createElement("i",{class:t,"aria-hidden":"true"}," ")," ",e.item.value)},isMulti:"false"}))),wp.element.createElement("div",{className:e.className},wp.element.createElement("i",{class:v,"aria-hidden":"true"}," "))]},save:function(e){var t=jvm_richtext_icon_settings.base_class,n=t+" "+e.attributes.icon;return wp.element.createElement("div",{className:e.className},wp.element.createElement("i",{class:n,"aria-hidden":"true"}," "))}})},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function i(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),__=wp.i18n.__,l=wp.element,c=l.Component,s=l.Fragment,u=(wp.dom.getRectangleFromRange,wp.compose),p=u.compose,m=(u.ifCondition,wp.data.withSelect,wp.blockEditor.BlockControls),f=wp.richText,v=f.toggleFormat,h=f.insert,w=f.create,d=wp.components,b=d.ToolbarGroup,y=d.Popover,g=(d.Panel,d.ToolbarButton),_=d.Button,E=d.TextControl,x=d.Tooltip,j=jvm_richtext_icon_settings.iconset,O=jvm_richtext_icon_settings.base_class,k=function(e){function t(){r(this,t);var e=o(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments));return e.toggle=e.toggle.bind(e),e.state={icons:j,isOpen:!1,keyword:""},e}return i(t,e),a(t,[{key:"search",value:function(e){var t=[],n=!0,r=!1,o=void 0;try{for(var i,a=j[Symbol.iterator]();!(n=(i=a.next()).done);n=!0){var l=i.value;-1!==l.toLowerCase().search(e.toLowerCase())&&t.push(l)}}catch(e){r=!0,o=e}finally{try{!n&&a.return&&a.return()}finally{if(r)throw o}}this.setState({keyword:e,icons:t})}},{key:"toggle",value:function(){this.setState(function(e){return{isOpen:!e.isOpen}}),this.setState({keyword:"",icons:j})}},{key:"render",value:function(){var e=this,t=this.state,n=t.isOpen,r=t.icons,o=t.keyword,i=this.props,a=i.name,l=i.value,c=i.onChange;return wp.element.createElement(s,null,wp.element.createElement(m,null,wp.element.createElement(b,null,wp.element.createElement(g,{icon:"flag","aria-haspopup":"true",label:__("Insert Icon","jvm-richtext-icons"),onClick:this.toggle}),n&&wp.element.createElement(y,{className:"jvm-richtext-icons-popover",position:"bottom left",key:"icon-popover",onClick:function(){},expandOnMobile:!1,headerTitle:__("Insert Icon","jvm-richtext-icons"),onClose:function(){c(v(l,{type:a}))}},wp.element.createElement(E,{value:o,placeholder:__("Search","jvm-richtext-icons"),onChange:function(t){e.search(t)}}),wp.element.createElement("div",{className:"jvm-richtext-icons-panel"},r.length>0?wp.element.createElement("ul",{className:"jvm-richtext-icons-list"},r.map(function(t){return wp.element.createElement("li",{"data-key":t},wp.element.createElement(x,{text:t},wp.element.createElement(_,{isTertiary:!0,onClick:function(){var n=w({html:'<i class="'+O+" "+t+'" aria-hidden="true"> </i>'});c(h(l,n)),e.toggle()}},wp.element.createElement("i",{className:O+" "+t,"aria-hidden":"true"}))))})):wp.element.createElement("p",null,__("No characters found.","block-options")))))))}}]),t}(c);t.a=p()(k)}]);
+!function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";function o(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}Object.defineProperty(t,"__esModule",{value:!0}),n.d(t,"icon",function(){return v});var r=n(1),__=wp.i18n.__,i=wp.richText.registerFormatType,a=wp.element.Fragment,l=wp.components,c=(l.Toolbar,l.Button,l.Popover,wp.blocks.registerBlockType),s=wp.blockEditor.InspectorControls,u=wp.components.PanelBody,p=wp.components.ComboboxControl,m=wp.components.RangeControl,f="jvm/insert-icons",v={name:f,title:__("Insert Icon","jvm-richtext-icons"),tagName:"i",className:null,edit:function(e){var t=e.isOpen,n=e.value,o=e.onChange,i=e.activeAttributes;return wp.element.createElement(a,null,wp.element.createElement(r.a,{name:f,isOpen:t,value:n,onChange:o,activeAttributes:i}))}};wp.domReady(function(){[v].forEach(function(e){var t=e.name,n=o(e,["name"]);t&&i(t,n)})}),c("jvm/single-icon",{title:__("Single icon"),icon:"flag",category:"common",keywords:[__("Icon")],attributes:{icon:{type:"string"},fontSize:{type:"number"}},edit:function(e){var t=jvm_richtext_icon_settings.iconset,n=[],o="",r=32,i=jvm_richtext_icon_settings.base_class,a=!0,l=!1,c=void 0;try{for(var f,v=t[Symbol.iterator]();!(a=(f=v.next()).done);a=!0){var h=f.value;n.push({value:h,label:h})}}catch(e){l=!0,c=e}finally{try{!a&&v.return&&v.return()}finally{if(l)throw c}}void 0!==e.attributes.icon?o=e.attributes.icon:void 0!==t[0]&&(o=t[0]),void 0!==e.attributes.fontSize&&(r=e.attributes.fontSize),e.setAttributes({icon:o,fontSize:r});var w=i+" "+e.attributes.icon,b={fontSize:e.attributes.fontSize+"px"};return[wp.element.createElement(s,null,wp.element.createElement(u,{label:__("Icon")},wp.element.createElement(p,{label:__("Icon"),value:o,onChange:function(t){t&&e.setAttributes({icon:t})},options:n,__experimentalRenderItem:function(e){var t=i+" "+e.item.value;return wp.element.createElement("span",null,wp.element.createElement("i",{class:t,"aria-hidden":"true"}," ")," ",e.item.value)},isMulti:"false"}),wp.element.createElement(m,{label:__("Font Size (px)"),value:r,min:"10",max:"200",onChange:function(t){t&&e.setAttributes({fontSize:t})}}))),wp.element.createElement("div",{className:e.className},wp.element.createElement("i",{class:w,"aria-hidden":"true",style:b}," "))]},save:function(e){var t=jvm_richtext_icon_settings.base_class,n=t+" "+e.attributes.icon,o={fontSize:e.attributes.fontSize+"px"};return wp.element.createElement("div",{className:e.className},wp.element.createElement("i",{class:n,"aria-hidden":"true",style:o}," "))}})},function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}function i(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}var a=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),__=wp.i18n.__,l=wp.element,c=l.Component,s=l.Fragment,u=(wp.dom.getRectangleFromRange,wp.compose),p=u.compose,m=(u.ifCondition,wp.data.withSelect,wp.blockEditor.BlockControls),f=wp.richText,v=f.toggleFormat,h=f.insert,w=f.create,b=wp.components,d=b.ToolbarGroup,y=b.Popover,g=(b.Panel,b.ToolbarButton),_=b.Button,x=b.TextControl,E=b.Tooltip,j=jvm_richtext_icon_settings.iconset,O=jvm_richtext_icon_settings.base_class,C=function(e){function t(){o(this,t);var e=r(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments));return e.toggle=e.toggle.bind(e),e.state={icons:j,isOpen:!1,keyword:""},e}return i(t,e),a(t,[{key:"search",value:function(e){var t=[],n=!0,o=!1,r=void 0;try{for(var i,a=j[Symbol.iterator]();!(n=(i=a.next()).done);n=!0){var l=i.value;-1!==l.toLowerCase().search(e.toLowerCase())&&t.push(l)}}catch(e){o=!0,r=e}finally{try{!n&&a.return&&a.return()}finally{if(o)throw r}}this.setState({keyword:e,icons:t})}},{key:"toggle",value:function(){this.setState(function(e){return{isOpen:!e.isOpen}}),this.setState({keyword:"",icons:j})}},{key:"render",value:function(){var e=this,t=this.state,n=t.isOpen,o=t.icons,r=t.keyword,i=this.props,a=i.name,l=i.value,c=i.onChange;return wp.element.createElement(s,null,wp.element.createElement(m,null,wp.element.createElement(d,null,wp.element.createElement(g,{icon:"flag","aria-haspopup":"true",label:__("Insert Icon","jvm-richtext-icons"),onClick:this.toggle}),n&&wp.element.createElement(y,{className:"jvm-richtext-icons-popover",position:"bottom left",key:"icon-popover",onClick:function(){},expandOnMobile:!1,headerTitle:__("Insert Icon","jvm-richtext-icons"),onClose:function(){c(v(l,{type:a}))}},wp.element.createElement(x,{value:r,placeholder:__("Search","jvm-richtext-icons"),onChange:function(t){e.search(t)}}),wp.element.createElement("div",{className:"jvm-richtext-icons-panel"},o.length>0?wp.element.createElement("ul",{className:"jvm-richtext-icons-list"},o.map(function(t){return wp.element.createElement("li",{"data-key":t},wp.element.createElement(E,{text:t},wp.element.createElement(_,{isTertiary:!0,onClick:function(){var n=w({html:'<i class="'+O+" "+t+'" aria-hidden="true"> </i>'});c(h(l,n)),e.toggle()}},wp.element.createElement("i",{className:O+" "+t,"aria-hidden":"true"}))))})):wp.element.createElement("p",null,__("No characters found.","block-options")))))))}}]),t}(c);t.a=p()(C)}]);

jvm-rich-text-icons/trunk/plugin.php

@@ -3 +3 @@
  * Plugin Name: JVM rich text icons
  * Description: Add Font Awesome icons, or (SVG) icons from a custom icon set to the WordPress block editor.
- * Version: 1.3.1
+ * Version: 1.3.2
  * Author: Joris van Montfort
  * Author URI: https://jorisvm.nl
@@ -11 +11 @@
  * @category Gutenberg
  * @author Joris van Montfort
- * @version 1.3.1
+ * @version 1.3.2
  * @package JVM rich text icons
  */

jvm-rich-text-icons/trunk/readme.txt

@@ -15 +15 @@
 A plugin / toolset for anyone wanting to integrate (SVG) icons into the Gutenberg editor or options created with Advanced Custom Fields. 
 
-Add inline icons to rich text fields like: paragraphs, headings, lists or buttons anywhere in the Gutenberg block editor, or add a dedicated icon block from within the Gutenberg editor.
+Add inline icons to rich text fields like: paragraphs, headings, lists or buttons anywhere in the WordPress block editor, or add a dedicated icon block from within the Gutenberg editor.
 
 This plugin ships with the free Font Awesome icon set as default icon set. You can choose between version 4.x, 5.x and version 6.x.
-This plugin also provides an easy to use interface for creating a custom icon set based on SVG icons. Custom icons can be upload from the plugin settings using an easy to use drag & drop uploader.
+The dedicated icon block contains several styling options to customize the icon in the icon block.
+The plugin also provides an easy to use interface for creating a custom icon set based on SVG icons. Custom icons can be uploaded from the plugin settings using an easy to use drag & drop uploader.
 
-The plugin also creates a new field type for Advanced Custom Fields (ACF) : JVM Icon. Now you can create custom fields that work with a the font awsome icon set or even beter: A custom created icon set.
+For users of Advanced Custom Fields (ACF) the plugin also creates a new field type: JVM Icon. This allows you to create custom fields that work with a the font awsome icon or any custom created icon set.
 
 If font awesome or the built in custom icon set configurator do not meet your needs you can also create your own custom icon set and load it using hooks provided by the plugin.
@@ -88 +89 @@
 
 == Changelog ==
+
+= 1.3.2 =
+Added a font-size (pixels) option for single icon block.
 
 = 1.3.1 =

jvm-rich-text-icons/trunk/src/blocks.js

@@ -12 +12 @@
 const { PanelBody } = wp.components;
 const { ComboboxControl } = wp.components;
+const { RangeControl } = wp.components;
 
 //import icon from './icon';
@@ -69 +70 @@
             type: 'string'
         },
+
+        fontSize: {
+            type: 'number'
+        }
     },
 
@@ -86 +91 @@
         let options = [];
         let selectectValue = '';
+        let currentFontSize = 32;
         let classPrefix = jvm_richtext_icon_settings.base_class
 
@@ -104 +110 @@
         }
 
+        // Get current font size
+        if (props.attributes.fontSize !== undefined) {
+            currentFontSize = props.attributes.fontSize;
+        }
+
         // Update the proerties
-        props.setAttributes( { icon: selectectValue } );
+        props.setAttributes( { icon: selectectValue, fontSize: currentFontSize } );
 
         let cssClass = classPrefix + ' '+props.attributes.icon;
-
+        let cssStyle = {fontSize: props.attributes.fontSize + 'px'};
+        
         return [
             <InspectorControls>
@@ -129 +141 @@
             isMulti='false'
                         />
+                        <RangeControl
+                        label={__('Font Size (px)')}
+                        value={currentFontSize}
+                        min='10'
+                        max='200'
+                        onChange={(i) => {
+                            if (i) {
+                                props.setAttributes( { fontSize: i } );
+                            }
+                        }}
+                        />
                 </PanelBody>
 
@@ -135 +158 @@
             
             <div className={ props.className }>
-                <i class={cssClass} aria-hidden="true"> </i>
+                <i class={cssClass} aria-hidden="true" style={cssStyle}> </i>
             </div>
         ];
@@ -154 +177 @@
         let classPrefix = jvm_richtext_icon_settings.base_class;
         let cssClass = classPrefix + ' '+props.attributes.icon;
+        let cssStyle = {fontSize: props.attributes.fontSize + 'px'};
         return (
             <div className={ props.className }>
-               <i class={cssClass} aria-hidden="true"> </i>
+                <i class={cssClass} aria-hidden="true" style={cssStyle}> </i>
             </div>
         );