WordPress.org
Get WordPress

Plugin Directory

Changeset 2230008


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

Revert to older version of codebase.

Location:
magic-block/trunk
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r2229988 r2230008  
    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

    r2229988 r2230008  
    44const { InspectorControls, InnerBlocks, PlainText} = wp.editor;
    55const { Fragment } = wp.element;
    6 const { PanelBody, SelectControl, CheckboxControl, Button} = wp.components;
     6const { PanelBody, SelectControl, CheckboxControl } = wp.components;
     7
    78
    89const icon = () => {
    … …  
    3536            attribute: 'href',
    3637        },
    37         customAttrs: {
    38             type: 'array'
    39         },
    4038        newTab: {
    4139            type: 'boolean'
    … …  
    5654
    5755    edit:  props => {
    58 
    59         const {
    60             inlineSytle,
    61             elemTag,
    62             elemId,
    63             elemClass,
    64             href,
    65             newTab,
    66             customAttrs
    67         } = props.attributes;
     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;
    6862
    6963
    70         function convertClassString ( input ) {
     64        function convertClassString(input) {
    7165            return  input.replace(/\s+$/g, '').replace(/[ ]+/g, ".");
    7266        }
    7367
    74         function onChangeElem ( newElem ) {
     68        function onChangeElem( newElem ) {
    7569            props.setAttributes( { elemTag: newElem } );
    7670        }
    … …  
    9589            props.setAttributes( { newTab: newNewTab } );
    9690        }
    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  
     91 
    13692
    13793        const linkPanels = (
    … …  
    152108                <InspectorControls>
    153109                     <PanelBody title="Element Type">
    154                         <SelectControl value={elemTag} onChange={onChangeElem} options={[
     110                        <SelectControl label="Tag" value={elemTag} onChange={onChangeElem} options={[
    155111                                    { label: "div", value: "div"},
    156112                                    { label: "section", value: 'section'},
    … …  
    182138                        <PlainText onChange={onChangeInlineStyle} value={inlineSytle} className="magicblock-plaintext"/>
    183139                     </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>
    202140                </InspectorControls>
    203141                <div className="magicblock-editor">
    … …  
    213151    },
    214152    save: props => {
    215        
    216         const { inlineSytle, elemId, elemClass, newTab, customAttrs } =   props.attributes;
    217         const ElemTag = props.attributes.elemTag || "div";
    218         const href = props.attributes.href || "";
     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;       
    219159
    220160        const aProps = {};
    … …  
    227167        }
    228168
    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 
    238169        return (<ElemTag
    239                     className={elemClass}
    240                     style={inlineSytle}
    241                     id={elemId}
    242                     {...aProps}
    243                     {...preparedCustomAttrs}
     170                className={elemClass}
     171                style={inlineSytle}
     172                id={elemId}
     173                {...aProps}
    244174                >
    245175                    <InnerBlocks.Content/>

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

    r2229988 r2230008  
    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
    72 function _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 
    7472console.log('magicblock is up and running');
    7573
    … …  
    8381    PanelBody = _wp$components.PanelBody,
    8482    SelectControl = _wp$components.SelectControl,
    85     CheckboxControl = _wp$components.CheckboxControl,
    86     Button = _wp$components.Button;
     83    CheckboxControl = _wp$components.CheckboxControl;
    8784
    8885
    … …  
    118115            attribute: 'href'
    119116        },
    120         customAttrs: {
    121             type: 'array'
    122         },
    123117        newTab: {
    124118            type: 'boolean'
    … …  
    139133
    140134    edit: function edit(props) {
    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 
     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;
    150141
    151142        function convertClassString(input) {
    … …  
    175166        function onChangeNewTab(newNewTab) {
    176167            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 });
    211168        }
    212169
    … …  
    235192                    PanelBody,
    236193                    { title: "Element Type" },
    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" }]
     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" }]
    238195                    }),
    239196                    elemTag === "a" ? wp.element.createElement(
    … …  
    269226                    { title: "Inline CSS" },
    270227                    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                     )
    325228                )
    326229            ),
    … …  
    354257    },
    355258    save: function save(props) {
    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 || "";
     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;
    365265
    366266        var aProps = {};
    … …  
    373273        }
    374274
    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 
    384275        return wp.element.createElement(
    385276            ElemTag,
    … …  
    388279                style: inlineSytle,
    389280                id: elemId
    390             }, aProps, preparedCustomAttrs),
     281            }, aProps),
    391282            wp.element.createElement(InnerBlocks.Content, null)
    392283        );

  • magic-block/trunk/magicblock.php

    r2229988 r2230008  
    22/*
    33Plugin Name:  Magic Block
    4 Description: Registers a container block. It has settings for element, ID, classname, style, and any other attribute.
    5 Version:      1.2
     4Description: 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).
     5Version:      1.2.1
    66Author:       Will Delphia
    77License:      GPL2

  • magic-block/trunk/readme.txt

    r2229988 r2230008  
    11=== Magic Block ===
    22Contributors: willdelphia
    3 Tags:  block, container block, html element, data attributes, div, section, flexbox, css grid, tag, nesting, child blocks, parent blocks
     3Tags: gutenberg, block, container block, html element, html5, div, section, flexbox, css grid, tag, nesting, child blocks, parent blocks
    44Requires at least: 5.0
    5 Tested up to: 5.3.2
     5Tested up to: 5.1
    66Requires PHP: 5.2.4
    77License: GPL2
    … …  
    99License URI:  https://www.gnu.org/licenses/gpl-2.0.html
    1010
    11 Registers a container block. It has settings for element, ID, classname, style, and any other attribute.
     11Registers a container block with the block editor. It has settings for tag (div, section, etc), ID, classname, and inline style.
    1212
    1313== Description ==
    1414
    15 Magic 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.
     15Magic 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.
    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
    23 As 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 
    2523== Screenshots ==
    26241. You can nest magic blocks inside each other to build complex layouts.
    27 2. Custom attributes supported
Note: See TracChangeset for help on using the changeset viewer.