WordPress.org
Get WordPress

Plugin Directory

Changeset 3458442


Ignore:
Timestamp:
02/10/2026 10:01:30 PM (7 weeks ago)
Author:
jorisvanmontfort
Message:

1.4.0

Location:
jvm-rich-text-icons/trunk
Files:
3 added
1 deleted
13 edited

Legend:

Unmodified
Added
Removed

  • jvm-rich-text-icons/trunk/dist/acf.js

    r2617244 r3458442  
    1 (function($){
     1(function ($) {
     2  if (typeof acf === "undefined") return;
    23
    3     function select2_init_args( element, parent ) {
    4         return {
    5             key         : $( parent ).data('key'),
    6             allowNull   : $( element ).data('allow_null'),
    7             ajax        : 1,
    8             ajaxAction  : 'acf/fields/jvm-richtext-insert-icons/query'
     4  function select2_init_args(element, parent) {
     5    return {
     6      key: $(parent).data("key"),
     7      allowNull: $(element).data("allow_null"),
     8      ajax: 1,
     9      ajaxAction: "acf/fields/jvm-richtext-insert-icons/query",
     10    };
     11  }
     12
     13  function select2_init(fa_field) {
     14    var $select = $(fa_field);
     15    var parent = $($select).closest(".acf-field-font-awesome");
     16
     17    acf.select2.init($select, select2_init_args(fa_field, parent), parent);
     18  }
     19
     20  acf.add_action("select2_init", function ($input, args, settings, $field) {
     21    if (
     22      $field instanceof jQuery &&
     23      $field.hasClass("jvm_rich_text_icon-edit")
     24    ) {
     25      $field.addClass("select2_initalized");
     26    }
     27  });
     28
     29  // Add our classes to FontAwesome select2 fields
     30  acf.add_filter("select2_args", function (args, $select, settings, $field) {
     31    if ($select.hasClass("select2-jvm_rich_text_icon")) {
     32      args.dropdownCssClass = "fa-select2-drop fa" + ACFFA.major_version;
     33      args.containerCssClass = "fa-select2 fa" + ACFFA.major_version;
     34      args.escapeMarkup = function (markup) {
     35        if (typeof markup !== "string") {
     36          return markup;
    937        }
     38        return acf.escHtml(markup);
     39      };
    1040    }
    1141
    12     function select2_init( fa_field ) {
    13         var $select = $( fa_field );
    14         var parent = $( $select ).closest('.acf-field-font-awesome');
     42    return args;
     43  });
    1544
    16         acf.select2.init( $select, select2_init_args( fa_field, parent ), parent );
     45  // Uncheck standard icon set choices if 'custom icon set' is checked, and show the custom icon set select box
     46  $(document).on(
     47    "change",
     48    '.acf-field[data-name="icon_sets"] input[type="checkbox"]',
     49    function () {
     50      var parent = $(this).closest(".acf-field-object-font-awesome");
     51      if ($(this).is('[value="custom"]') && $(this).is(":checked")) {
     52        $('input[type="checkbox"]:not([value="custom"])', parent).prop(
     53          "checked",
     54          false,
     55        );
     56        $(".acf-field-setting-custom_icon_set", parent).show();
     57      } else {
     58        $('input[type="checkbox"][value="custom"]', parent).prop(
     59          "checked",
     60          false,
     61        );
     62        $(".acf-field-setting-custom_icon_set", parent).hide();
     63      }
     64    },
     65  );
     66
     67  // Handle new menu items with FontAwesome fields assigned to them
     68  $(document).on("menu-item-added", function (event, $menuMarkup) {
     69    var $fields = $(
     70      "select.jvm_rich_text_icon-edit:not(.select2_initalized)",
     71      $menuMarkup,
     72    );
     73
     74    if ($fields.length) {
     75      $fields.each(function (index, field) {
     76        select2_init(field);
     77      });
    1778    }
     79  });
    1880
    19     acf.add_action( 'select2_init', function( $input, args, settings, $field ) {
    20         if ( $field instanceof jQuery && $field.hasClass('jvm_rich_text_icon-edit') ) {
    21             $field.addClass('select2_initalized');
    22         }
    23     });
     81  // Update field previews and init select2 in field edit area
     82  acf.add_action(
     83    "ready_field/type=jvm_rich_text_icon append_field/type=jvm_rich_text_icon show_field/type=jvm_rich_text_icon",
     84    function ($el) {
     85      var $fields = $(
     86        "select.select2-jvm-rich-text-icon-edit:not(.select2_initalized)",
     87        $el,
     88      );
    2489
    25     // Add our classes to FontAwesome select2 fields
    26     acf.add_filter( 'select2_args', function( args, $select, settings, $field ) {
    27         if ( $select.hasClass('select2-jvm_rich_text_icon') ) {
    28             args.dropdownCssClass = 'fa-select2-drop fa' + ACFFA.major_version;
    29             args.containerCssClass = 'fa-select2 fa' + ACFFA.major_version;
    30             args.escapeMarkup = function( markup ) {
    31                 if (typeof markup !== 'string') {
    32                     return markup;
    33                 }
    34                 return acf.escHtml( markup );
    35             }
    36         }
    37 
    38         return args;
    39     });
    40 
    41     // Uncheck standard icon set choices if 'custom icon set' is checked, and show the custom icon set select box
    42     $( document ).on( 'change', '.acf-field[data-name="icon_sets"] input[type="checkbox"]', function() {
    43         var parent = $( this ).closest('.acf-field-object-font-awesome');
    44         if ( $( this ).is('[value="custom"]') && $( this ).is(':checked') ) {
    45             $( 'input[type="checkbox"]:not([value="custom"])', parent ).prop('checked', false);
    46             $( '.acf-field-setting-custom_icon_set', parent ).show();
    47         } else {
    48             $( 'input[type="checkbox"][value="custom"]', parent ).prop('checked', false);
    49             $( '.acf-field-setting-custom_icon_set', parent ).hide();
    50         }
    51     });
    52 
    53     // Handle new menu items with FontAwesome fields assigned to them
    54     $( document ).on( 'menu-item-added', function( event, $menuMarkup ) {
    55         var $fields = $( 'select.jvm_rich_text_icon-edit:not(.select2_initalized)', $menuMarkup );
    56 
    57         if ( $fields.length ) {
    58             $fields.each( function( index, field ) {
    59                 select2_init( field );
    60             });
    61         }
    62     });
    63    
    64     // Update field previews and init select2 in field edit area
    65     acf.add_action( 'ready_field/type=jvm_rich_text_icon append_field/type=jvm_rich_text_icon show_field/type=jvm_rich_text_icon', function( $el ) {
    66         var $fields = $( 'select.select2-jvm-rich-text-icon-edit:not(.select2_initalized)', $el );
    67 
    68         if ( $fields.length ) {
    69             $fields.each( function( index, field ) {
    70                 select2_init( field );
    71             });
    72         }
    73     });
    74 
     90      if ($fields.length) {
     91        $fields.each(function (index, field) {
     92          select2_init(field);
     93        });
     94      }
     95    },
     96  );
    7597})(jQuery);

  • jvm-rich-text-icons/trunk/package.json

    r2499999 r3458442  
    44  "private": true,
    55  "scripts": {
    6     "start": "cgb-scripts start",
    7     "build": "cgb-scripts build",
    8     "eject": "cgb-scripts eject"
     6    "start": "webpack --watch --mode=development --config webpack.config.js",
     7    "build": "webpack --config webpack.config.js"
    98  },
    10   "dependencies": {
    11     "cgb-scripts": "1.23.1"
     9  "devDependencies": {
     10    "@wordpress/scripts": "^31.4.0"
    1211  }
    1312}

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

    r3416099 r3458442  
    33 * Plugin Name: JVM Rich Text Icons
    44 * Description: Add Font Awesome icons, or (SVG) icons from a custom icon set to the WordPress block editor.
    5  * Version: 1.3.7
     5 * Version: 1.4.0
    66 * Author: Joris van Montfort
    77 * Author URI: https://jorisvm.nl
    … …  
    1111 * @category Gutenberg
    1212 * @author Joris van Montfort
    13  * @version 1.3.7
     13 * @version 1.4.0
    1414 * @package JVM Rich Text Icons
    1515 */

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

    r3416095 r3458442  
    55Requires at least: 5.4
    66Tested up to: 6.9
    7 Stable tag: trunk
     7Stable tag: 1.4.0
    88License: GPLv2 or later
    99License URI: http://www.gnu.org/licenses/gpl-2.0.html
    … …  
    1313
    1414== Description ==
    15 A plugin / toolset for anyone wanting to integrate (SVG) icons into the Gutenberg editor or options created with Advanced Custom Fields.
    16 
    17 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.
    18 
    19 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.
    20 The dedicated icon block contains several styling options to customize the icon in the icon block.
    21 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.
    22 
    23 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.
    24 
    25 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.
    26 
    27 The plugin simply inserts icons in the following HTML format:
    28 
    29 `
    30 <i class="icon fa fa-address-book" aria-hidden="true"> </i>
    31 `
    32 
    33 The CSS class names and available icons can be all be modified to your liking if you are prepared to write some PHP hooks for your WordPress theme. Please note that you should keep the plugin settings set to use 'Font Awesome 4.7'.
    34 If you would like to load a custom created webfont or icon set you crafted yourself please read on. If you have the SVG files you can set the plugin settings to 'Custom SVG icon set' and upload your SVG files from the plugin settings.
    35 
    36 **CSS file**
    37 A slightly customized version of the Font Awesome 4.7 CSS file is loaded by default on the front end and backend to make the plugin work out of the box, but you can also choose Font Awesome Free version 5.x or 6.x from the settings screen.
    38 If you want to use a custom created icon set it is advised to overide the icon set json file and CSS file using hooks provided by this plugin.
    39 
    40 **Custom icon set file**
    41 If the plugin is set to Font Awesome 4.7 icon set (default behaviour) the icons are loaded from: wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/icons.json. The json file contains all css classes that can be turned into icons by Font Awesome 4.7 CSS file. You can load a custom json icon set file  by calling a filter hook in your (child) theme functions.php.
    42 For example:
    43 
    44 `
    45 function add_my_icons($file) {
    46     $file = get_stylesheet_directory().'/path_to_my/icons.json';
    47     return $file;
    48 }
    49 
    50 add_filter( 'jvm_richtext_icons_iconset_file', 'add_my_icons');
    51 `
    52 
    53 The icon config file can also be in fontello format since version 1.0.3. Have a look at: <https://fontello.com> to create your customized icon set.
    54 
    55 **Custom CSS file**
    56 By default the Font Awesome 4.7 CSS is loaded from: wp-content/plugins/jvm-richtext-insert-icons/dist/fa-4.7/font-awesome.min.css. You can load a custom CSS file for your icon set by calling a filter hook in your (child) theme functions.php.
    57 For example:
    58 
    59 `
    60 function add_my_css($cssfile) {
    61     $cssfile = get_stylesheet_directory_uri().'/path_to_my/cssfile.css';
    62     return $cssfile;
    63 }
    64 
    65 add_filter( 'jvm_richtext_icons_css_file', 'add_my_css');
    66 `
    67 
    68 If you choose the load your own CSS file and want to disable the default CSS file use the following code:
     15
     16Add icons to any rich text field in the WordPress block editor. Insert icons inline in paragraphs, headings, lists, buttons, or use the dedicated single icon block.
     17
     18= Features =
     19
     20* **Icon picker** - Select icons from a searchable popup in the block editor toolbar.
     21* **Font Awesome included** - Ships with Font Awesome 4.7, 5.x and 6.x. Choose your preferred version from the settings.
     22* **Custom SVG icon set** - Upload your own SVG icons via a drag & drop uploader in the plugin settings. This is the recommended approach for the best performance.
     23* **Single icon block** - A dedicated block with font size, color, alignment and spacing options.
     24* **ACF integration** - Adds a "JVM Icon" field type for Advanced Custom Fields.
     25
     26= How it works =
     27
     28Pick an icon from the toolbar while editing any rich text field. The plugin inserts a small HTML tag that gets styled by the chosen icon set.
     29
     30= Why use a custom SVG icon set? =
     31
     32When you use a custom SVG icon set, the plugin defaults to **inline SVG rendering**. This is a great choice for performance! Google PageSpeed Insights will thank you.
     33
     34* **Better page speed** - No render-blocking CSS or font files to download. Icons are part of the HTML itself.
     35* **Only loads what you use** - Unlike Font Awesome which loads CSS for hundreds of icons, inline SVG only includes the icons that are actually on the page.
     36* **No external requests** - Everything is served inline, so there are no extra HTTP requests for font or CSS files.
     37* **Inherits text color** - Icons automatically use the surrounding text color, no extra CSS needed.
     38* **Fully reversible** - The stored content in the database is not modified. You can switch between render technologies at any time from the plugin settings if you want to.
     39
     40Alternative render technologies (CSS masks, ::before / ::after pseudo-elements) are also available for custom SVG icons if your use case requires it.
     41
     42= For developers =
     43
     44The plugin provides several filter hooks to customize its behavior. You can load your own icon set, CSS file, or change the icon class prefix. The icon config file can also be in Fontello format (see <https://fontello.com>).
     45
     46**Load a custom icon set file**
     47
     48`
     49add_filter( 'jvm_richtext_icons_iconset_file', function($file) {
     50    return get_stylesheet_directory() . '/path_to_my/icons.json';
     51});
     52`
     53
     54**Load a custom CSS file**
     55
     56`
     57add_filter( 'jvm_richtext_icons_css_file', function($cssfile) {
     58    return get_stylesheet_directory_uri() . '/path_to_my/cssfile.css';
     59});
     60`
     61
     62To disable the default CSS file entirely:
    6963
    7064`
    7165add_filter( 'jvm_richtext_icons_css_file', '__return_false');
    7266`
    73 All icon markup has the classname "icon" prefixed to the icon HTML inserted. If you want to use some other prefix you can add a filter. Like this:
    74 
    75 `
    76 function my_icon_class($css_class_name) {
     67
     68**Change the icon class prefix**
     69
     70`
     71add_filter( 'jvm_richtext_icons_base_class', function() {
    7772    return 'my-custom-css-class-name';
    78 }
    79 
    80 add_filter( 'jvm_richtext_icons_base_class', 'my_icon_class');
    81 `
    82 
    83 Use this hook to disable the entire plugin settings screen that was added in 1.0.9:
    84 `
    85 add_filter('jvm_richtext_icons_show_settings', '__return_false');
    86 `
    87 
    88 Please note that settings will still be loaded so please make sure you have set the settings to default font awesome if you are loading a custom icon set with the plugin hooks.
     73});
     74`
     75
     76**Disable the settings screen**
     77
     78`
     79add_filter( 'jvm_richtext_icons_show_settings', '__return_false');
     80`
     81
     82Please note that if you are loading a custom icon set with the plugin hooks, you should keep the plugin settings set to "Font Awesome 4.7" (default).
    8983
    9084== Changelog ==
     85
     86= 1.4.0 =
     87* New render technology: Inline SVG. When using a custom SVG icon set you can now choose "Inline SVG" as render technology. This replaces the `<i>` tags with inline `<svg>` elements on the frontend using output buffering. Benefits: no CSS overhead for unused icons, only icons that are actually on the page are included, and icons inherit the current text color via `fill: currentColor`. The block editor continues to use CSS-based rendering so icons remain visible while editing. The stored HTML in the database is not modified, so you can switch back to any CSS-based technology at any time.
     88* Migrated build tooling from the deprecated cgb-scripts (Create Guten Block) to @wordpress/scripts. JavaScript source files now use proper `@wordpress/*` package imports, and the build generates a `blocks.asset.php` file for automatic dependency management.
     89* Fixed "acf is not defined" error on admin screens where Advanced Custom Fields is not active.
     90* Code quality review of the entire codebase: added settings sanitization with whitelisted values, added capability checks in AJAX handlers, improved error handling for file operations and JSON parsing, fixed a text domain typo, and replaced deprecated PHP syntax.
    9191
    9292= 1.3.7 =
    … …  
    178178
    179179= 1.0.5 =
    180 Added a hook for modifying the editor javascript file loaded for advanced users. 
     180Added a hook for modifying the editor javascript file loaded for advanced users.
    181181Example usage:
    182182
    … …  
    205205= 1.0.0 =
    206206Initial release
    207 
    208 = Stable =
    209 1.0.0

  • jvm-rich-text-icons/trunk/src/acf_plugin_jvm_rich_text_icons.php

    r3091309 r3458442  
    88
    99class JVM_acf_plugin_jvm_rich_text_icons {
    10    
     10
    1111    // vars
    12     var $settings;
    13    
    14    
     12    public $settings;
     13
     14
    1515    /*
    1616    *  __construct
    … …  
    2424    *  @return  void
    2525    */
    26    
     26
    2727    public function __construct() {
    28        
     28
    2929        // settings
    3030        // - these will be passed into the field class.
    … …  
    3434            'path'      => plugin_dir_path( __FILE__ )
    3535        );
    36        
    37        
     36
     37
    3838        // include field
    3939        add_action('acf/include_field_types',   array($this, 'include_field')); // v5
    … …  
    4343        add_action( 'acf/input/admin_footer', array( $this, 'fix_select2_html') );
    4444    }
    45    
     45
    4646
    4747    public function select2_ajax_request () {
    … …  
    6868                    'text' => '<i class="'.$css_class.' '.$ic. '" aria-hidden="true"></i> '.$ic
    6969                ];
    70             }     
     70            }
    7171        }
    7272
    … …  
    8383        if (!is_admin()) {
    8484            return;
    85         }       
     85        }
    8686
    8787        echo '<script>
     88          if (typeof acf === \'undefined\') { /* ACF not loaded on this screen */ } else
    8889          acf.add_filter(\'select2_args\', function(args) {
    8990            args.templateSelection = function(selection) {
    … …  
    109110        </script>';
    110111    }
    111    
     112
    112113
    113114    public function load_admin_assets() {
    … …  
    138139    *  @return  void
    139140    */
    140    
     141
    141142    public function include_field( $version = false ) {
    142        
     143
    143144        // support empty $version
    144145        if( !$version ) $version = 5;
    145        
    146        
     146
     147
    147148        // load textdomain
    148         load_plugin_textdomain( 'jvm-richtext-insert-icons', false, plugin_basename( dirname( __FILE__ ) ) . '/lang' ); 
    149        
    150        
     149        load_plugin_textdomain( 'jvm-richtext-insert-icons', false, plugin_basename( dirname( __FILE__ ) ) . '/lang' );
     150
     151
    151152        // include
    152153        include_once('fields/class-jvm_acf_jvm_rich_text_icons' . $version . '.php');
    153154    }
    154    
     155
    155156}
    156157

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

    r3181616 r3458442  
    1 /**
    2  * WordPress dependencies
    3  */
    4 const { __ } = wp.i18n;
    5 const { registerFormatType } = wp.richText;
    6 const { Fragment } = wp.element;
    7 const { Toolbar, Button, Popover } = wp.components;
     1import { __ } from "@wordpress/i18n";
     2import { registerFormatType } from "@wordpress/rich-text";
     3import { Fragment } from "@wordpress/element";
     4import { registerBlockType } from "@wordpress/blocks";
     5import { InspectorControls } from "@wordpress/block-editor";
     6import {
     7  PanelBody,
     8  ComboboxControl,
     9  RangeControl,
     10} from "@wordpress/components";
     11import domReady from "@wordpress/dom-ready";
    812
    9 // For the single icon blok
    10 const { registerBlockType } = wp.blocks;
    11 const { InspectorControls } = wp.blockEditor;
    12 const { PanelBody } = wp.components;
    13 const { ComboboxControl } = wp.components;
    14 const { RangeControl } = wp.components;
    15 
    16 //import icon from './icon';
    17 
    18 import IconMap from './controls';
     13import IconMap from "./controls";
    1914
    2015/**
    2116 * Block constants
    2217 */
    23 const name = 'jvm/insert-icons';
    24 
     18const name = "jvm/insert-icons";
    2519
    2620export const icon = {
    27     name,
    28     title: __('Insert Icon', 'jvm-richtext-icons'),
    29     tagName: 'i',
    30     className: null,
    31     edit( { isOpen, value, onChange, activeAttributes } ) {
    32         return (
    33             <Fragment>
    34                 <IconMap
    35                     name={ name }
    36                     isOpen={ isOpen }
    37                     value={ value }
    38                     onChange={ onChange }
    39                     activeAttributes={ activeAttributes }
    40                 />
    41             </Fragment>
    42         );
    43     }
     21  name,
     22  title: __("Insert Icon", "jvm-richtext-icons"),
     23  tagName: "i",
     24  className: null,
     25  edit({ isOpen, value, onChange, activeAttributes }) {
     26    return (
     27      <Fragment>
     28        <IconMap
     29          name={name}
     30          isOpen={isOpen}
     31          value={value}
     32          onChange={onChange}
     33          activeAttributes={activeAttributes}
     34        />
     35      </Fragment>
     36    );
     37  },
    4438};
    4539
    46 
    4740// Register the icon button
    48 wp.domReady(function(){
    49     [
    50         icon,
    51     ].forEach( ( { name, ...settings } ) => {
    52         if ( name ) {
    53             registerFormatType( name, settings );
    54         }
    55     } );   
     41domReady(function () {
     42  [icon].forEach(({ name, ...settings }) => {
     43    if (name) {
     44      registerFormatType(name, settings);
     45    }
     46  });
    5647});
    5748
    58 registerBlockType( 'jvm/single-icon', {
    59     // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    60     title: __( 'Single icon' ), // Block title.
    61     icon: 'flag', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    62     category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    63     keywords: [
    64         __( 'Icon' )
    65     ],
     49registerBlockType("jvm/single-icon", {
     50  title: __("Single icon"),
     51  icon: "flag",
     52  category: "common",
     53  keywords: [__("Icon")],
    6654
    67 
    68     attributes: {
    69         icon: {
    70             type: 'string'
    71         },
    72 
    73         fontSize: {
    74             type: 'number'
    75         }
     55  attributes: {
     56    icon: {
     57      type: "string",
    7658    },
    7759
    78     /**
    79      * The edit function describes the structure of your block in the context of the editor.
    80      * This represents what the editor will render when the block is used.
    81      *
    82      * The "edit" property must be a valid function.
    83      *
    84      * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
    85      *
    86      * @param {Object} props Props.
    87      * @returns {Mixed} JSX Component.
    88      */
    89     edit: ( props ) => {
    90         let icons = jvm_richtext_icon_settings.iconset;
    91         let options = [];
    92         let selectectValue = '';
    93         let currentFontSize = 32;
    94         let classPrefix = jvm_richtext_icon_settings.base_class
     60    fontSize: {
     61      type: "number",
     62    },
     63  },
    9564
    96         for (let icon of icons) {
    97             options.push({
    98                 value : icon,
    99                 label : icon
    100             });
    101         }
     65  edit: (props) => {
     66    let icons = jvm_richtext_icon_settings.iconset;
     67    let options = [];
     68    let selectectValue = "";
     69    let currentFontSize = 32;
     70    let classPrefix = jvm_richtext_icon_settings.base_class;
    10271
    103         // Get the current or first icon
    104         if (props.attributes.icon !== undefined) {
    105             selectectValue = props.attributes.icon;
    106         }else {
    107             if (icons[0] !== undefined) {
    108                 selectectValue = icons[0];
    109             }
    110         }
     72    for (let icon of icons) {
     73      options.push({
     74        value: icon,
     75        label: icon,
     76      });
     77    }
    11178
    112         // Get current font size
    113         if (props.attributes.fontSize !== undefined) {
    114             currentFontSize = props.attributes.fontSize;
    115         }
     79    // Get the current or first icon
     80    if (props.attributes.icon !== undefined) {
     81      selectectValue = props.attributes.icon;
     82    } else {
     83      if (icons[0] !== undefined) {
     84        selectectValue = icons[0];
     85      }
     86    }
    11687
    117         // Update the proerties
    118         props.setAttributes( { icon: selectectValue, fontSize: currentFontSize } );
     88    // Get current font size
     89    if (props.attributes.fontSize !== undefined) {
     90      currentFontSize = props.attributes.fontSize;
     91    }
    11992
    120         let cssClass = classPrefix + ' '+props.attributes.icon;
    121         let cssStyle = {fontSize: props.attributes.fontSize + 'px'};
    122        
    123         return [
    124             <InspectorControls>
    125                 <PanelBody
    126                     label={__( 'Icon' )}
    127                 >
    128                     <ComboboxControl
    129                         label={__('Icon')}
    130                         value={selectectValue}
    131                         onChange={(i) => {
    132                             if (i) {
    133                                 props.setAttributes( { icon: i } );
    134                             }
    135                         }}
    136                         options={options}
    137                         __experimentalRenderItem={(opt) => {
    138                             let cssClass = classPrefix + ' '+opt.item.value;
    139                             return <span><i class={cssClass} aria-hidden="true"> </i> {opt.item.value}</span>;
    140                         }}
    141             isMulti='false'
    142                         />
    143                         <RangeControl
    144                         label={__('Font Size (px)')}
    145                         value={currentFontSize}
    146                         min='10'
    147                         max='200'
    148                         onChange={(i) => {
    149                             if (i) {
    150                                 props.setAttributes( { fontSize: i } );
    151                             }
    152                         }}
    153                         />
    154                 </PanelBody>
     93    // Update the proerties
     94    props.setAttributes({ icon: selectectValue, fontSize: currentFontSize });
    15595
    156             </InspectorControls>
    157             ,
    158            
    159             <div className={ props.className }>
    160                 <i class={cssClass} aria-hidden="true" style={cssStyle}> </i>
    161             </div>
    162         ];
    163     },
     96    let cssClass = classPrefix + " " + props.attributes.icon;
     97    let cssStyle = { fontSize: props.attributes.fontSize + "px" };
    16498
    165     /**
    166      * The save function defines the way in which the different attributes should be combined
    167      * into the final markup, which is then serialized by Gutenberg into post_content.
    168      *
    169      * The "save" property must be specified and must be a valid function.
    170      *
    171      * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
    172      *
    173      * @param {Object} props Props.
    174      * @returns {Mixed} JSX Frontend HTML.
    175      */
    176     save: ( props ) => {
    177         let classPrefix = jvm_richtext_icon_settings.base_class;
    178         let cssClass = classPrefix + ' '+props.attributes.icon;
    179         let cssStyle = {fontSize: props.attributes.fontSize + 'px'};
    180         return (
    181             <div className={ props.className }>
    182                 <i class={cssClass} aria-hidden="true" style={cssStyle}> </i>
    183             </div>
    184         );
    185     },
    186 } );
     99    return [
     100      <InspectorControls>
     101        <PanelBody label={__("Icon")}>
     102          <ComboboxControl
     103            label={__("Icon")}
     104            value={selectectValue}
     105            onChange={(i) => {
     106              if (i) {
     107                props.setAttributes({ icon: i });
     108              }
     109            }}
     110            options={options}
     111            __experimentalRenderItem={(opt) => {
     112              let cssClass = classPrefix + " " + opt.item.value;
     113              return (
     114                <span>
     115                  <i class={cssClass} aria-hidden="true">
     116                    {" "}
     117                  </i>{" "}
     118                  {opt.item.value}
     119                </span>
     120              );
     121            }}
     122            isMulti="false"
     123          />
     124          <RangeControl
     125            label={__("Font Size (px)")}
     126            value={currentFontSize}
     127            min="10"
     128            max="200"
     129            onChange={(i) => {
     130              if (i) {
     131                props.setAttributes({ fontSize: i });
     132              }
     133            }}
     134          />
     135        </PanelBody>
     136      </InspectorControls>,
     137
     138      <div className={props.className}>
     139        <i class={cssClass} aria-hidden="true" style={cssStyle}>
     140          {" "}
     141        </i>
     142      </div>,
     143    ];
     144  },
     145
     146  save: (props) => {
     147    let classPrefix = jvm_richtext_icon_settings.base_class;
     148    let cssClass = classPrefix + " " + props.attributes.icon;
     149    let cssStyle = { fontSize: props.attributes.fontSize + "px" };
     150    return (
     151      <div className={props.className}>
     152        <i class={cssClass} aria-hidden="true" style={cssStyle}>
     153          {" "}
     154        </i>
     155      </div>
     156    );
     157  },
     158});

  • jvm-rich-text-icons/trunk/src/controls.js

    r2890094 r3458442  
    1 /**
    2  * WordPress dependencies
    3  */
    4 const { __ } = wp.i18n;
    5 const { Component, Fragment } = wp.element;
    6 const { getRectangleFromRange } = wp.dom;
    7 const { compose, ifCondition } = wp.compose;
    8 const { withSelect } = wp.data;
    9 const { BlockControls} = wp.blockEditor;
    10 const { toggleFormat, insert, create } = wp.richText;
    11 const { ToolbarGroup, Popover, Panel, ToolbarButton, Button, TextControl, Tooltip } = wp.components;
     1import { __ } from "@wordpress/i18n";
     2import { Component, Fragment } from "@wordpress/element";
     3import { compose } from "@wordpress/compose";
     4import { BlockControls } from "@wordpress/block-editor";
     5import { toggleFormat, insert, create } from "@wordpress/rich-text";
     6import {
     7  ToolbarGroup,
     8  Popover,
     9  ToolbarButton,
     10  Button,
     11  TextControl,
     12  Tooltip,
     13} from "@wordpress/components";
    1214
    1315let Icons = jvm_richtext_icon_settings.iconset;
    … …  
    1517
    1618class IconMap extends Component {
    17     constructor() {
    18         super( ...arguments );
     19  constructor() {
     20    super(...arguments);
    1921
    20         this.toggle = this.toggle.bind( this );
     22    this.toggle = this.toggle.bind(this);
    2123
    22         this.state = {
    23             icons: Icons,
    24             isOpen: false,
    25             keyword: '',
    26         };
     24    this.state = {
     25      icons: Icons,
     26      isOpen: false,
     27      keyword: "",
     28    };
     29  }
     30
     31  search(keyword) {
     32    let filtered = [];
     33
     34    for (let icon of Icons) {
     35      if (icon.toLowerCase().search(keyword.toLowerCase()) !== -1) {
     36        filtered.push(icon);
     37      }
    2738    }
    2839
    29     search( keyword ) {
    30         let filtered = [];
     40    this.setState({ keyword, icons: filtered });
     41  }
    3142
    32         for (let icon of Icons) {   
    33             if ( icon.toLowerCase().search(
    34                 keyword.toLowerCase() ) !== -1 ) {
    35                 filtered.push(icon);
    36             }
    37         }
     43  toggle() {
     44    this.setState((state) => ({
     45      isOpen: !state.isOpen,
     46    }));
    3847
    39         this.setState( { keyword, icons: filtered } );
    40     }
     48    this.setState({ keyword: "", icons: Icons });
     49  }
    4150
    42     toggle() {
    43         this.setState( ( state ) => ( {
    44             isOpen: ! state.isOpen,
    45         } ) );
     51  render() {
     52    const { isOpen, icons, keyword } = this.state;
     53    const { name, value, onChange } = this.props;
    4654
    47         this.setState( {  keyword: '', icons: Icons } );
     55    return (
     56      <Fragment>
     57        <BlockControls>
     58          <ToolbarGroup>
     59            <ToolbarButton
     60              icon={"flag"}
     61              aria-haspopup="true"
     62              label={__("Insert Icon", "jvm-richtext-icons")}
     63              onClick={this.toggle}
     64            ></ToolbarButton>
    4865
    49         //const selection = window.getSelection();
    50         //anchorRange = selection.rangeCount > 0 ? selection.getRangeAt( 0 ) : null;
    51         //onChange( toggleFormat( value, { type: name } ) );
    52     }
     66            {isOpen && (
     67              <Popover
     68                className="jvm-richtext-icons-popover"
     69                position="bottom left"
     70                key="icon-popover"
     71                onClick={() => {}}
     72                expandOnMobile={false}
     73                headerTitle={__("Insert Icon", "jvm-richtext-icons")}
     74                onClose={() => {
     75                  onChange(toggleFormat(value, { type: name }));
     76                }}
     77              >
     78                <TextControl
     79                  value={keyword}
     80                  placeholder={__("Search", "jvm-richtext-icons")}
     81                  onChange={(newKeyword) => {
     82                    this.search(newKeyword);
     83                  }}
     84                />
     85                <div className="jvm-richtext-icons-panel">
     86                  {icons.length > 0 ? (
     87                    <ul className="jvm-richtext-icons-list">
     88                      {icons.map((icon) => {
     89                        return (
     90                          <li data-key={icon}>
     91                            <Tooltip text={icon}>
     92                              <Button
     93                                isTertiary
     94                                onClick={() => {
     95                                  let temp = create({
     96                                    html:
     97                                      '<i class="' +
     98                                      classPrefix +
     99                                      " " +
     100                                      icon +
     101                                      '" aria-hidden="true"> </i>',
     102                                  });
    53103
    54     render() {
    55         const { isOpen, icons, keyword } = this.state;
    56         const { name, value, onChange } = this.props;
    57    
     104                                  onChange(insert(value, temp));
    58105
    59         return (
    60             <Fragment>
    61                 <BlockControls>
    62                     <ToolbarGroup>
    63                         <ToolbarButton
    64                             icon={ "flag" }
    65                             aria-haspopup="true"
    66                             label={ __('Insert Icon', 'jvm-richtext-icons') }
    67                             onClick={ this.toggle }
    68                         >
    69                         </ToolbarButton>
    70                    
    71                         { isOpen && (
    72                             <Popover
    73                                 className="jvm-richtext-icons-popover"
    74                                 position="bottom left"
    75                                 key="icon-popover"
    76                                 onClick={ () => {} }
    77                                
    78                                 expandOnMobile={ false }
    79                                 headerTitle={ __( 'Insert Icon', 'jvm-richtext-icons' ) }
    80                                 onClose={ () => {
    81                                     onChange( toggleFormat( value, { type: name } ) );
    82                                 } }
    83                             >
    84                                 <TextControl
    85                                     value={ keyword }
    86                                     placeholder={ __( 'Search', 'jvm-richtext-icons' ) }
    87                                     onChange={ ( newKeyword ) => {
    88                                         this.search( newKeyword );
    89                                     } }
    90                                 />
    91                                 <div
    92                                     className="jvm-richtext-icons-panel"
    93                                 >
    94                                    
    95                                     { icons.length > 0 ? (
    96                                         <ul className="jvm-richtext-icons-list">
    97                                             {
    98                                                 //for (let icon of icons) {   
    99                                                 icons.map(( icon ) => {
    100                                                 return (
    101                                                     <li data-key={ icon }>
    102                                                         <Tooltip text={icon}>
    103                                                             <Button
    104                                                                 isTertiary
    105                                                                 onClick={ () => {
    106                                                                     let temp = create({'html' : '<i class="'+classPrefix+' '+icon+'" aria-hidden="true"> </i>'});
    107 
    108                                                                     onChange( insert( value,  temp ) );
    109                                                                    
    110                                                                     this.toggle();
    111                                                                 } }
    112                                                             >
    113                                                                 <i className={ classPrefix + ' ' + icon } aria-hidden="true"></i>
    114                                                             </Button>
    115                                                         </Tooltip>
    116                                                     </li>
    117                                                 );
    118                                             } ) }
    119                                         </ul>
    120                                     ) : (
    121                                         <p>{ __( 'No characters found.', 'block-options' ) }</p>
    122                                     ) }
    123                                 </div>
    124                             </Popover>
    125                         ) }
    126                        
    127 
    128                         </ToolbarGroup>
    129                     </BlockControls>
    130                 </Fragment>
    131         );
    132     }
     106                                  this.toggle();
     107                                }}
     108                              >
     109                                <i
     110                                  className={classPrefix + " " + icon}
     111                                  aria-hidden="true"
     112                                ></i>
     113                              </Button>
     114                            </Tooltip>
     115                          </li>
     116                        );
     117                      })}
     118                    </ul>
     119                  ) : (
     120                    <p>{__("No characters found.", "block-options")}</p>
     121                  )}
     122                </div>
     123              </Popover>
     124            )}
     125          </ToolbarGroup>
     126        </BlockControls>
     127      </Fragment>
     128    );
     129  }
    133130}
    134131
    135 export default compose()( IconMap );
     132export default compose()(IconMap);

  • jvm-rich-text-icons/trunk/src/init.php

    r3403407 r3458442  
    2929        add_filter( 'plugin_action_links', array( $this, 'plugin_action_links' ), 10, 2 );
    3030        add_filter( 'plugin_row_meta', array( $this, 'plugin_row_meta' ), 10, 2 );
     31        add_action( 'template_redirect', array( $this, 'maybe_start_inline_svg_buffer' ) );
    3132
    3233
    … …  
    132133     */
    133134    public function load_admin_assets($hook_suffix) {
    134         if( 'post.php' == $hook_suffix 
    135             || 'post-new.php' == $hook_suffix 
     135        if( 'post.php' == $hook_suffix
     136            || 'post-new.php' == $hook_suffix
    136137            || 'widgets.php' == $hook_suffix
    137138            || 'site-editor.php' == $hook_suffix) {
    138139
    139140            // Register block editor script for backend.
     141            $asset_file = include plugin_dir_path( __DIR__ ) . 'dist/blocks.asset.php';
    140142            wp_enqueue_script(
    141                 'jvm-rich-text-icons-js', // Handle.
    142                 plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ), // Block.build.js: We register the block here. Built with Webpack.
    143                 array(),
    144                 //array( 'wp-i18n', 'wp-element', 'wp-editor' ), // Dependencies, defined above.
    145                 '1.2.3',
    146                 true // Enqueue the script in the footer.
     143                'jvm-rich-text-icons-js',
     144                plugins_url( '/dist/blocks.js', dirname( __FILE__ ) ),
     145                $asset_file['dependencies'],
     146                $asset_file['version'],
     147                true
    147148            );
    148149
    … …  
    181182            $icon_set = $settings['icon_set'];
    182183        }
    183        
     184
    184185        if ($icon_set == 'custom-svg') {
    185186            wp_register_style('jvm-rich-text-icons-svg', false);
    186187            wp_enqueue_style( 'jvm-rich-text-icons-svg' );
    187188
    188             wp_add_inline_style('jvm-rich-text-icons-svg', JVM_Richtext_icons::parse_dynamic_css());
     189            if ($settings['technology'] == 'inline-svg' && !is_admin()) {
     190                wp_add_inline_style('jvm-rich-text-icons-svg', 'svg.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;fill:currentColor}');
     191            } else {
     192                // In admin/editor always load mask-based CSS so <i> tags render correctly
     193                wp_add_inline_style('jvm-rich-text-icons-svg', JVM_Richtext_icons::parse_dynamic_css());
     194            }
    189195        }else {
    190196
    … …  
    211217
    212218    /**
     219     * Start output buffering for inline SVG replacement on the frontend.
     220     */
     221    public function maybe_start_inline_svg_buffer() {
     222        $settings = self::get_settings();
     223        if ($settings['icon_set'] == 'custom-svg' && $settings['technology'] == 'inline-svg') {
     224            ob_start(array($this, 'replace_icons_with_inline_svg'));
     225        }
     226    }
     227
     228    /**
     229     * Replace <i class="icon icon-name"> tags with inline SVG elements.
     230     * @param string $html
     231     * @return string
     232     */
     233    public function replace_icons_with_inline_svg($html) {
     234        $prefix = self::get_class_prefix();
     235        $svg_dir = self::get_svg_directory();
     236        static $svg_cache = [];
     237
     238        $html = preg_replace_callback(
     239            '/<i\b([^>]*)\bclass="' . preg_quote($prefix, '/') . ' ([^"]*)"([^>]*)>\s*<\/i>/',
     240            function ($matches) use ($prefix, $svg_dir, &$svg_cache) {
     241                $classes = $matches[2];
     242                $extra_attrs = trim($matches[1] . ' ' . $matches[3]);
     243                // Remove aria-hidden from extra attrs since we add it ourselves
     244                $extra_attrs = preg_replace('/\s*aria-hidden="[^"]*"/', '', $extra_attrs);
     245                $extra_attrs = trim($extra_attrs);
     246
     247                // The last class is the icon name (e.g. "fas fa-location-dot" -> "fa-location-dot")
     248                $class_parts = explode(' ', $classes);
     249                $icon_name = end($class_parts);
     250
     251                if (!isset($svg_cache[$icon_name])) {
     252                    $file = $svg_dir . $icon_name . '.svg';
     253                    if (file_exists($file)) {
     254                        $svg_cache[$icon_name] = file_get_contents($file);
     255                    } else {
     256                        $svg_cache[$icon_name] = false;
     257                    }
     258                }
     259
     260                if ($svg_cache[$icon_name] === false) {
     261                    return $matches[0];
     262                }
     263
     264                $svg = $svg_cache[$icon_name];
     265                // Add class, aria-hidden and any extra attributes (e.g. style) to the SVG element
     266                $attrs = 'class="' . esc_attr($prefix . ' ' . $classes) . '" aria-hidden="true"';
     267                if (!empty($extra_attrs)) {
     268                    $attrs .= ' ' . $extra_attrs;
     269                }
     270                $svg = preg_replace('/<svg\b/', '<svg ' . $attrs, $svg, 1);
     271
     272                return $svg;
     273            },
     274            $html
     275        );
     276
     277        return $html;
     278    }
     279
     280    /**
    213281     * Get the class prefix for the css
    214282     * @return [string]
    … …  
    229297            $icon_set = $settings['icon_set'];
    230298        }
    231        
     299
    232300
    233301        if ($icon_set == 'custom-svg') {
    … …  
    253321                $iconData = file_get_contents($iconFile);
    254322                $data = json_decode($iconData);
     323                if ($data === null) {
     324                    return $icons;
     325                }
    255326                $icons = [];
    256327                // Check if data is fontello format
    … …  
    263334                }
    264335
    265                 $icons = apply_filters('jvm_richtext_icons_iconset', $icons);           
    266             }           
     336                $icons = apply_filters('jvm_richtext_icons_iconset', $icons);
     337            }
    267338        }
    268339
    … …  
    310381
    311382            include plugin_dir_path( __DIR__ ).'views/'.$fileName;
    312            
     383
    313384            $out = ob_get_clean();
    314385

  • jvm-rich-text-icons/trunk/src/settings.php

    r3403397 r3458442  
    9696                ]
    9797            );
    98         } 
     98        }
    9999    }
    100100
    … …  
    103103     */
    104104    public function ajax_delete_icon() {
     105        if (!current_user_can('upload_files')) {
     106            wp_send_json(["success" => false]);
     107            exit;
     108        }
     109
    105110        if (isset($_POST['file']) && wp_verify_nonce($_POST['nonce'], 'jvm-rich-text-icons-delete-icon' )) {
    106111            $file = sanitize_file_name($_POST['file']);
    … …  
    114119            }
    115120        }
    116        
     121
    117122        wp_send_json(["success" => false]);
    118123        exit;
    … …  
    123128     */
    124129    public function ajax_upload_icon() {
     130        if (!current_user_can('upload_files')) {
     131            wp_send_json(["success" => false]);
     132            exit;
     133        }
     134
    125135        if (isset($_FILES['file']) && wp_verify_nonce($_GET['nonce'], 'jvm-rich-text-icons-upload-icon' )) {
    126136            // Check if file is SVG as we only accept SVG files
    127137            $pi = pathinfo($_FILES['file']['name']);
    128138            if ($_FILES['file']['type'] == 'image/svg+xml' && strtolower($pi['extension']) == 'svg') {
    129                
     139
    130140                $base = JVM_Richtext_icons::get_svg_directory();
    131141                $new_file_name = $this->generate_unique_svg_file_name($_FILES['file']['name']);
    … …  
    179189        // This page will be under "Settings"
    180190        add_options_page(
    181             'Settings Admin', 
    182             __('JVM rich text icons', 'jvm-rich-text-icons'), 
    183             'manage_options', 
    184             'jvm-rich-text-icons', 
     191            'Settings Admin',
     192            __('JVM rich text icons', 'jvm-rich-text-icons'),
     193            'manage_options',
     194            'jvm-rich-text-icons',
    185195            array( $this, 'create_admin_page' )
    186196        );
    … …  
    202212     * Register and add settings
    203213     */
    204     public function page_init() {       
     214    public function page_init() {
    205215        // Set class property
    206216        $this->options = JVM_Richtext_icons::get_settings();
    … …  
    215225        add_settings_field(
    216226            'icon_set', // ID
    217             __('Icon set', 'jvm-rich-text-icons'), // Title 
     227            __('Icon set', 'jvm-rich-text-icons'), // Title
    218228            function () {
    219229                echo '<select id="jvm-rich-text-icons_icon_set" name="jvm-rich-text-icons[icon_set]">';
    … …  
    228238                echo '<option value="custom-svg"'.$checked.'>'.__('Custom SVG icon set', 'jvm-rich-text-icons').'</option>';
    229239                echo '</select>';
    230             }, 
     240            },
    231241            'jvm-rich-text-icons', // Page
    232             'general' // Section           
     242            'general' // Section
    233243        );
    234244
    … …  
    236246            add_settings_field(
    237247                'technology', // ID
    238                 __('Render technology', 'jvm-rich-text-icons'), // Title 
     248                __('Render technology', 'jvm-rich-text-icons'), // Title
    239249                function () {
    240250                    echo '<select name="jvm-rich-text-icons[technology]">';
    241                    
     251
     252                    $checked = $this->options['technology'] == 'inline-svg' ? ' selected' : '';
     253                    echo '<option value="inline-svg"'.$checked.'>'.__('Inline SVG', 'jvm-rich-text-icons').'</option>';
     254
    242255                    $checked = $this->options['technology'] == 'html-css' ? ' selected' : '';
    243256                    echo '<option value="html-css"'.$checked.'>'.__('HTML + CSS', 'jvm-rich-text-icons').'</option>';
    … …  
    248261                    echo '<option value="html-css-after"'.$checked.'>'.__('HTML + CSS ::after pseudo-element', 'jvm-rich-text-icons').'</option>';
    249262
    250                     //echo '<option value="inline-svg">'.__('Inline SVG elements', 'jvm-rich-text-icons').'</option>';
    251263                    echo '</select>';
    252                 }, 
     264                },
    253265                'jvm-rich-text-icons', // Page
    254                 'general' // Section           
     266                'general' // Section
    255267            );
    256268        }
    … …  
    273285     */
    274286    public function sanitize( $input ) {
    275 
    276         // Hmmm....
    277         return $input;
     287        $sanitized = [];
     288
     289        $valid_icon_sets = ['default', 'fa-5', 'fa-6', 'custom-svg'];
     290        if (isset($input['icon_set']) && in_array($input['icon_set'], $valid_icon_sets, true)) {
     291            $sanitized['icon_set'] = $input['icon_set'];
     292        }
     293
     294        $valid_technologies = ['html-css', 'html-css-before', 'html-css-after', 'inline-svg'];
     295        if (isset($input['technology']) && in_array($input['technology'], $valid_technologies, true)) {
     296            $sanitized['technology'] = $input['technology'];
     297        }
     298
     299        return $sanitized;
    278300    }
    279301}

  • jvm-rich-text-icons/trunk/views/dynamic_css.php

    r3338997 r3458442  
    11.wp-block {
    2     /* Fixes the iframe site editor */   
     2    /* Fixes the iframe site editor */
    33}
    44<?php
    … …  
    99    display: inline-block;
    1010    height: 1em;
    11     background-color: currentColor; 
    12     mask-repeat: no-repeat; 
     11    background-color: currentColor;
     12    mask-repeat: no-repeat;
    1313    mask-repeat: no-repeat;
    1414    -webkit-mask-repeat: no-repeat;
    … …  
    2121
    2222
    23 <?php 
     23<?php
    2424    foreach ($files as $file) {
    2525        $pi = pathinfo($file);
    26        
     26
    2727        $icon_class = sanitize_title($pi['filename']);
    2828        $file_content = file_get_contents($file);
     29        if ($file_content === false) { continue; }
    2930        $width = 0;
    3031        $height = 0;
    … …  
    3637        if ($svg) {
    3738            $viewBox = $svg[0]->getAttribute('viewBox');
    38            
     39
    3940            if ($viewBox) {
    4041                list($x, $y, $width, $height) = explode(' ', $viewBox);
    4142
    42                 //echo $width;   
     43                //echo $width;
    4344                //echo $height;
    4445
    45                
    4646
    47                 //echo 'ratio:'.$ratio."\n"; 
     47
     48                //echo 'ratio:'.$ratio."\n";
    4849            }else {
    4950                // Might have width and height on svg
    … …  
    5152                $height = str_replace('px', '', $svg[0]->getAttribute('height'));
    5253            }
    53            
     54
    5455            if (!empty($width) && !empty($height)) {
    5556                $ratio = $width / $height;
    5657            }
    5758        }
    58            
     59
    5960
    6061?>

  • jvm-rich-text-icons/trunk/views/dynamic_css_after.php

    r3338997 r3458442  
    11.wp-block {
    2     /* Fixes the iframe site editor */   
     2    /* Fixes the iframe site editor */
    33}
    44<?php
    … …  
    1414}
    1515i.<?php echo $prefix_class;?>:after {
    16     content: '';   
     16    content: '';
    1717    position: absolute;
    1818    height: 100%;
    … …  
    2020    top: 0;
    2121    left: 0;
    22     background-color: currentColor; 
    23     mask-repeat: no-repeat; 
     22    background-color: currentColor;
     23    mask-repeat: no-repeat;
    2424    mask-repeat: no-repeat;
    2525    -webkit-mask-repeat: no-repeat;
    … …  
    2929    -webkit-mask-position: 50% 50%;
    3030}
    31 <?php 
     31<?php
    3232    foreach ($files as $file) {
    3333        $pi = pathinfo($file);
    34        
     34
    3535        $icon_class = sanitize_title($pi['filename']);
    3636        $file_content = file_get_contents($file);
     37        if ($file_content === false) { continue; }
    3738?>
    3839i.<?php echo $prefix_class;?>.<?php echo $icon_class;?>:after {

  • jvm-rich-text-icons/trunk/views/dynamic_css_before.php

    r3338997 r3458442  
    11.wp-block {
    2     /* Fixes the iframe site editor */   
     2    /* Fixes the iframe site editor */
    33}
    44<?php
    … …  
    1414}
    1515i.<?php echo $prefix_class;?>:before {
    16     content: '';   
     16    content: '';
    1717    position: absolute;
    1818    height: 100%;
    … …  
    2020    top: 0;
    2121    left: 0;
    22     background-color: currentColor; 
    23     mask-repeat: no-repeat; 
     22    background-color: currentColor;
     23    mask-repeat: no-repeat;
    2424    mask-repeat: no-repeat;
    2525    -webkit-mask-repeat: no-repeat;
    … …  
    3131
    3232
    33 <?php 
     33<?php
    3434    foreach ($files as $file) {
    3535        $pi = pathinfo($file);
    36        
     36
    3737        $icon_class = sanitize_title($pi['filename']);
    3838        $file_content = file_get_contents($file);
     39        if ($file_content === false) { continue; }
    3940?>
    4041i.<?php echo $prefix_class;?>.<?php echo $icon_class;?>:before {

  • jvm-rich-text-icons/trunk/views/icon-list.php

    r2999517 r3458442  
    88    foreach ($files as $file) {
    99        $pi = pathinfo($file);
    10        
     10
    1111        $icon_class = sanitize_title($pi['filename']);
    1212
    … …  
    2222    </div>
    2323</div>
    24 <p id="svg-file-list-empty" <?php echo empty($files) ? '' : 'style="display:none;"';?>><?php _e('No custom icons have been uploaded. Please upload some SVG files to create your custom icon set.', 'jvm-richt-text-icons');?></p>
     24<p id="svg-file-list-empty" <?php echo empty($files) ? '' : 'style="display:none;"';?>><?php _e('No custom icons have been uploaded. Please upload some SVG files to create your custom icon set.', 'jvm-rich-text-icons');?></p>
Note: See TracChangeset for help on using the changeset viewer.