WordPress.org
Get WordPress

Plugin Directory

Changeset 2229988


Ignore:
Timestamp:
01/19/2020 09:26:11 PM (6 years ago)
Author:
willdelphia
Message:

version 1.2: custom attributes

Location:
magic-block/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • magic-block/trunk/css/magicblock.css

    r2114800 r2229988  
    5757}
    5858
     59.magicblock-custom-attr-pair {
     60    margin-bottom: 10px;
     61    padding: 1em;
     62    border-radius: 5px;
     63    border: solid 1px grey;
     64}
     65
     66.magicblock-custom-attr-pair > div {
     67    margin-bottom: 1em;
     68}
     69
     70.magicblock-custom-attr-key-field {
     71    display: flex;
     72    align-items: center;
     73}
     74
     75.magicblock-custom-attr-key-field-prefix {
     76    margin-right: .5em;
     77}
     78
     79.magicblock-custom-attr-label {
     80    font-weight: 600;
     81    margin-bottom: .5em;
     82}
     83
     84.magic-block-right-align {
     85    text-align: right;
     86}

  • magic-block/trunk/js/magicblock-jsx.js

    r2114800 r2229988  
    44const { InspectorControls, InnerBlocks, PlainText} = wp.editor;
    55const { Fragment } = wp.element;
    6 const { PanelBody, SelectControl, CheckboxControl } = wp.components;
    7 
     6const { PanelBody, SelectControl, CheckboxControl, Button} = wp.components;
    87
    98const icon = () => {
    … …  
    3635            attribute: 'href',
    3736        },
     37        customAttrs: {
     38            type: 'array'
     39        },
    3840        newTab: {
    3941            type: 'boolean'
    … …  
    5456
    5557    edit:  props => {
    56         let inlineSytle = props.attributes.inlineStyle,
    57                 elemTag = props.attributes.elemTag,
    58                 elemId = props.attributes.elemId,
    59                 elemClass = props.attributes.elemClass,
    60                 href = props.attributes.href,
    61                 newTab = props.attributes.newTab;
    62 
    63 
    64         function convertClassString(input) {
     58
     59        const {
     60            inlineSytle,
     61            elemTag,
     62            elemId,
     63            elemClass,
     64            href,
     65            newTab,
     66            customAttrs
     67        } = props.attributes;
     68
     69
     70        function convertClassString ( input ) {
    6571            return  input.replace(/\s+$/g, '').replace(/[ ]+/g, ".");
    6672        }
    6773
    68         function onChangeElem( newElem ) {
     74        function onChangeElem ( newElem ) {
    6975            props.setAttributes( { elemTag: newElem } );
    7076        }
    … …  
    8995            props.setAttributes( { newTab: newNewTab } );
    9096        }
    91  
     97
     98        function addNewCustomAttr () {
     99            let newCustomAttrArray;
     100            if(customAttrs){
     101                newCustomAttrArray = [
     102                    ...customAttrs,
     103                    {
     104                        key: '',
     105                        value: ''
     106                    }
     107                 ];
     108            }
     109            else {
     110                newCustomAttrArray = [{
     111                    key: '',
     112                    value: ''
     113                }];
     114            }
     115            props.setAttributes({customAttrs: newCustomAttrArray});
     116        }
     117
     118        function deleteCustomAttr (index) {
     119            const newCustomAttrArray = [...customAttrs];
     120            newCustomAttrArray.splice(index, 1);
     121            props.setAttributes({customAttrs: newCustomAttrArray});
     122        }
     123
     124        function setKeyForCustomAttrs ( index, newKey ) {
     125            const newCustomAttrArray = [...customAttrs];
     126            newCustomAttrArray[index].key = newKey.replace(/"  *"|^-|^_|^[0-9]|[^\w-]/g, '');
     127            props.setAttributes({customAttrs: newCustomAttrArray});
     128        }
     129
     130        function setValueForCustomAttrs ( index, newValue,  ) {
     131            const newCustomAttrArray = [...customAttrs];
     132            newCustomAttrArray[index].value = newValue.replace(/"/, '');
     133            props.setAttributes({customAttrs: newCustomAttrArray});
     134        }
     135 
    92136
    93137        const linkPanels = (
    … …  
    108152                <InspectorControls>
    109153                     <PanelBody title="Element Type">
    110                         <SelectControl label="Tag" value={elemTag} onChange={onChangeElem} options={[
     154                        <SelectControl value={elemTag} onChange={onChangeElem} options={[
    111155                                    { label: "div", value: "div"},
    112156                                    { label: "section", value: 'section'},
    … …  
    138182                        <PlainText onChange={onChangeInlineStyle} value={inlineSytle} className="magicblock-plaintext"/>
    139183                     </PanelBody>
     184                     <PanelBody title="Custom Attributes">
     185                         {customAttrs && customAttrs.map((attr, index) => (
     186                             <div className="magicblock-custom-attr-pair">
     187                                <div>
     188                                     <div className="magicblock-custom-attr-label">Name</div>
     189                                     <div className="magicblock-custom-attr-key-field">
     190                                         <PlainText onChange={newKey => setKeyForCustomAttrs(index, newKey)} value={attr.key} className="magicblock-plaintext"/>
     191                                     </div>
     192                                </div>
     193                                <div>
     194                                    <div className="magicblock-custom-attr-label">Value</div>
     195                                    <PlainText onChange={newValue => setValueForCustomAttrs(index, newValue)} value={attr.value} className="magicblock-plaintext"/>
     196                                </div>
     197                                <Button isSmall={true} onClick={() => deleteCustomAttr(index)}>Delete</Button>
     198                             </div>
     199                         ))}
     200                        <div class="magic-block-right-align"><Button isSmall={true} onClick={addNewCustomAttr}>New Attribute</Button></div>
     201                     </PanelBody>
    140202                </InspectorControls>
    141203                <div className="magicblock-editor">
    … …  
    151213    },
    152214    save: props => {
    153         let inlineSytle = props.attributes.inlineStyle,
    154         elemId = props.attributes.elemId,
    155         elemClass = props.attributes.elemClass,
    156         ElemTag = props.attributes.elemTag || "div",
    157         href = props.attributes.href || "",
    158         newTab = props.attributes.newTab;       
     215       
     216        const { inlineSytle, elemId, elemClass, newTab, customAttrs } =   props.attributes;
     217        const ElemTag = props.attributes.elemTag || "div";
     218        const href = props.attributes.href || "";
    159219
    160220        const aProps = {};
    … …  
    167227        }
    168228
     229        const preparedCustomAttrs = {};
     230        if(customAttrs){
     231            customAttrs.forEach(pair => {
     232                if(pair.key.length > 0){
     233                    preparedCustomAttrs[pair.key.replace(/"  *"|^-|^_|^[0-9]|[^\w-]/g, '')] = pair.value.replace(/"/, '');
     234                }
     235            })
     236        }
     237
    169238        return (<ElemTag
    170                 className={elemClass}
    171                 style={inlineSytle}
    172                 id={elemId}
    173                 {...aProps}
     239                    className={elemClass}
     240                    style={inlineSytle}
     241                    id={elemId}
     242                    {...aProps}
     243                    {...preparedCustomAttrs}
    174244                >
    175245                    <InnerBlocks.Content/>

  • magic-block/trunk/js/magicblock.build.js

    r2114800 r2229988  
    7070var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
    7171
     72function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
     73
    7274console.log('magicblock is up and running');
    7375
    … …  
    8183    PanelBody = _wp$components.PanelBody,
    8284    SelectControl = _wp$components.SelectControl,
    83     CheckboxControl = _wp$components.CheckboxControl;
     85    CheckboxControl = _wp$components.CheckboxControl,
     86    Button = _wp$components.Button;
    8487
    8588
    … …  
    115118            attribute: 'href'
    116119        },
     120        customAttrs: {
     121            type: 'array'
     122        },
    117123        newTab: {
    118124            type: 'boolean'
    … …  
    133139
    134140    edit: function edit(props) {
    135         var inlineSytle = props.attributes.inlineStyle,
    136             elemTag = props.attributes.elemTag,
    137             elemId = props.attributes.elemId,
    138             elemClass = props.attributes.elemClass,
    139             href = props.attributes.href,
    140             newTab = props.attributes.newTab;
     141        var _props$attributes = props.attributes,
     142            inlineSytle = _props$attributes.inlineSytle,
     143            elemTag = _props$attributes.elemTag,
     144            elemId = _props$attributes.elemId,
     145            elemClass = _props$attributes.elemClass,
     146            href = _props$attributes.href,
     147            newTab = _props$attributes.newTab,
     148            customAttrs = _props$attributes.customAttrs;
     149
    141150
    142151        function convertClassString(input) {
    … …  
    166175        function onChangeNewTab(newNewTab) {
    167176            props.setAttributes({ newTab: newNewTab });
     177        }
     178
     179        function addNewCustomAttr() {
     180            var newCustomAttrArray = void 0;
     181            if (customAttrs) {
     182                newCustomAttrArray = [].concat(_toConsumableArray(customAttrs), [{
     183                    key: '',
     184                    value: ''
     185                }]);
     186            } else {
     187                newCustomAttrArray = [{
     188                    key: '',
     189                    value: ''
     190                }];
     191            }
     192            props.setAttributes({ customAttrs: newCustomAttrArray });
     193        }
     194
     195        function deleteCustomAttr(index) {
     196            var newCustomAttrArray = [].concat(_toConsumableArray(customAttrs));
     197            newCustomAttrArray.splice(index, 1);
     198            props.setAttributes({ customAttrs: newCustomAttrArray });
     199        }
     200
     201        function setKeyForCustomAttrs(index, newKey) {
     202            var newCustomAttrArray = [].concat(_toConsumableArray(customAttrs));
     203            newCustomAttrArray[index].key = newKey.replace(/"  *"|^-|^_|^[0-9]|[^\w-]/g, '');
     204            props.setAttributes({ customAttrs: newCustomAttrArray });
     205        }
     206
     207        function setValueForCustomAttrs(index, newValue) {
     208            var newCustomAttrArray = [].concat(_toConsumableArray(customAttrs));
     209            newCustomAttrArray[index].value = newValue.replace(/"/, '');
     210            props.setAttributes({ customAttrs: newCustomAttrArray });
    168211        }
    169212
    … …  
    192235                    PanelBody,
    193236                    { title: "Element Type" },
    194                     wp.element.createElement(SelectControl, { label: "Tag", value: elemTag, onChange: onChangeElem, options: [{ label: "div", value: "div" }, { label: "section", value: 'section' }, { label: "main", value: 'main' }, { label: "aside", value: 'aside' }, { label: "article", value: 'article' }, { label: "header", value: 'header' }, { label: "footer", value: 'footer' }, { label: "nav", value: 'nav' }, { label: "dl", value: 'dl' }, { label: "dd", value: 'dd' }, { label: "dt", value: 'dt' }, { label: "a", value: "a" }]
     237                    wp.element.createElement(SelectControl, { value: elemTag, onChange: onChangeElem, options: [{ label: "div", value: "div" }, { label: "section", value: 'section' }, { label: "main", value: 'main' }, { label: "aside", value: 'aside' }, { label: "article", value: 'article' }, { label: "header", value: 'header' }, { label: "footer", value: 'footer' }, { label: "nav", value: 'nav' }, { label: "dl", value: 'dl' }, { label: "dd", value: 'dd' }, { label: "dt", value: 'dt' }, { label: "a", value: "a" }]
    195238                    }),
    196239                    elemTag === "a" ? wp.element.createElement(
    … …  
    226269                    { title: "Inline CSS" },
    227270                    wp.element.createElement(PlainText, { onChange: onChangeInlineStyle, value: inlineSytle, className: "magicblock-plaintext" })
     271                ),
     272                wp.element.createElement(
     273                    PanelBody,
     274                    { title: "Custom Attributes" },
     275                    customAttrs && customAttrs.map(function (attr, index) {
     276                        return wp.element.createElement(
     277                            "div",
     278                            { className: "magicblock-custom-attr-pair" },
     279                            wp.element.createElement(
     280                                "div",
     281                                null,
     282                                wp.element.createElement(
     283                                    "div",
     284                                    { className: "magicblock-custom-attr-label" },
     285                                    "Name"
     286                                ),
     287                                wp.element.createElement(
     288                                    "div",
     289                                    { className: "magicblock-custom-attr-key-field" },
     290                                    wp.element.createElement(PlainText, { onChange: function onChange(newKey) {
     291                                            return setKeyForCustomAttrs(index, newKey);
     292                                        }, value: attr.key, className: "magicblock-plaintext" })
     293                                )
     294                            ),
     295                            wp.element.createElement(
     296                                "div",
     297                                null,
     298                                wp.element.createElement(
     299                                    "div",
     300                                    { className: "magicblock-custom-attr-label" },
     301                                    "Value"
     302                                ),
     303                                wp.element.createElement(PlainText, { onChange: function onChange(newValue) {
     304                                        return setValueForCustomAttrs(index, newValue);
     305                                    }, value: attr.value, className: "magicblock-plaintext" })
     306                            ),
     307                            wp.element.createElement(
     308                                Button,
     309                                { isSmall: true, onClick: function onClick() {
     310                                        return deleteCustomAttr(index);
     311                                    } },
     312                                "Delete"
     313                            )
     314                        );
     315                    }),
     316                    wp.element.createElement(
     317                        "div",
     318                        { "class": "magic-block-right-align" },
     319                        wp.element.createElement(
     320                            Button,
     321                            { isSmall: true, onClick: addNewCustomAttr },
     322                            "New Attribute"
     323                        )
     324                    )
    228325                )
    229326            ),
    … …  
    257354    },
    258355    save: function save(props) {
    259         var inlineSytle = props.attributes.inlineStyle,
    260             elemId = props.attributes.elemId,
    261             elemClass = props.attributes.elemClass,
    262             ElemTag = props.attributes.elemTag || "div",
    263             href = props.attributes.href || "",
    264             newTab = props.attributes.newTab;
     356        var _props$attributes2 = props.attributes,
     357            inlineSytle = _props$attributes2.inlineSytle,
     358            elemId = _props$attributes2.elemId,
     359            elemClass = _props$attributes2.elemClass,
     360            newTab = _props$attributes2.newTab,
     361            customAttrs = _props$attributes2.customAttrs;
     362
     363        var ElemTag = props.attributes.elemTag || "div";
     364        var href = props.attributes.href || "";
    265365
    266366        var aProps = {};
    … …  
    273373        }
    274374
     375        var preparedCustomAttrs = {};
     376        if (customAttrs) {
     377            customAttrs.forEach(function (pair) {
     378                if (pair.key.length > 0) {
     379                    preparedCustomAttrs[pair.key.replace(/"  *"|^-|^_|^[0-9]|[^\w-]/g, '')] = pair.value.replace(/"/, '');
     380                }
     381            });
     382        }
     383
    275384        return wp.element.createElement(
    276385            ElemTag,
    … …  
    279388                style: inlineSytle,
    280389                id: elemId
    281             }, aProps),
     390            }, aProps, preparedCustomAttrs),
    282391            wp.element.createElement(InnerBlocks.Content, null)
    283392        );

  • magic-block/trunk/magicblock.php

    r2114800 r2229988  
    22/*
    33Plugin Name:  Magic Block
    4 Description: Registers a container block with the  WP5+ (Gutenberg) editor. This block has settings for element type (div, section, etc), id, classname, and style (inline css).
    5 Version:      1.1.2
     4Description: Registers a container block. It has settings for element, ID, classname, style, and any other attribute.
     5Version:      1.2
    66Author:       Will Delphia
    77License:      GPL2

  • magic-block/trunk/readme.txt

    r2114807 r2229988  
    11=== Magic Block ===
    22Contributors: willdelphia
    3 Tags:  block, container block, html element, html5, div, section, flexbox, css grid, tag, nesting, child blocks, parent blocks
     3Tags:  block, container block, html element, data attributes, div, section, flexbox, css grid, tag, nesting, child blocks, parent blocks
    44Requires at least: 5.0
    5 Tested up to: 5.2.2
     5Tested up to: 5.3.2
    66Requires PHP: 5.2.4
    77License: GPL2
    … …  
    99License URI:  https://www.gnu.org/licenses/gpl-2.0.html
    1010
    11 Registers a container block with the block editor. It has settings for tag (div, section, etc), ID, classname, and inline style.
     11Registers a container block. It has settings for element, ID, classname, style, and any other attribute.
    1212
    1313== Description ==
    1414
    15 Magic Block registers a container block with the block editor (Wordpress 5+). This block has settings for tag (div, section, etc), ID, classname, and inline style.
     15Magic Block registers a container block with the block editor. This block has settings for element (div, section, etc), ID, classname, inline style, and any other attribute (including data-*, and aria-*) via a custom attributes section.
    1616
    1717Magic Block is designed for people who want full control over post HTML structure, or wish to use the editor to create complex layouts such as Flexbox, CSS Grid, Bootstrap, etc...
    … …  
    2121In the editor view, each Magic Block has a thin grey outline so you can easily see which child elements belong to it. It also provides a display of element type, ID, and classes so you can keep track of how to target them with your CSS.
    2222
     23As of Wordpress 5.3 you might not need this plugin since the core now ships with a "Group Block" which is similar in purpose, although it has fewer options.
     24
    2325== Screenshots ==
    24261. You can nest magic blocks inside each other to build complex layouts.
     272. Custom attributes supported
Note: See TracChangeset for help on using the changeset viewer.