WordPress.org
Get WordPress

Plugin Directory

Changeset 2113913


Ignore:
Timestamp:
06/28/2019 01:52:58 AM (7 years ago)
Author:
willdelphia
Message:

added support for a tag and href attribute

Location:
magic-block/trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed

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

    r2048444 r2113913  
    2929            attribute: 'style',
    3030        },
     31        href: {
     32            type: 'string',
     33            source: 'attribute',
     34            selector: '.wp-block-magicblock-magicblock',
     35            attribute: 'href',
     36        },
    3137        elemId: {
    3238            type: 'string',
    … …  
    4753                elemTag = props.attributes.elemTag,
    4854                elemId = props.attributes.elemId,
    49                 elemClass = props.attributes.elemClass;
     55                elemClass = props.attributes.elemClass,
     56                href = props.attributes.href;
    5057
    5158        function convertClassString(input) {
    … …  
    6976        }
    7077
     78        function onChangeHref ( newHref ) {
     79            props.setAttributes( { href: newHref } );
     80        }
     81
     82 
     83
     84        const linkPanels = (
     85            <PanelBody title="Link Href">
     86                <PlainText onChange={onChangeHref} value={href} className="magicblock-plaintext"/>
     87            </PanelBody>
     88        );
     89
    7190        return  (
    7291            <Fragment>
    … …  
    84103                                    { label: "dl", value: 'dl'},
    85104                                    { label: "dd", value: 'dd'},
    86                                     { label: "dt", value: 'dt'}
     105                                    { label: "dt", value: 'dt'},
     106                                    { label: "a", value: "a"}
    87107                                     ]}
    88108                                     />
    89109                     </PanelBody>
     110                     {  elemTag === "a" ? linkPanels : null }
    90111                     <PanelBody title="ID">
    91112                        <PlainText onChange={onChangeID} value={elemId} className="magicblock-plaintext"/>
    … …  
    113134        elemId = props.attributes.elemId,
    114135        elemClass = props.attributes.elemClass,
    115         ElemTag = props.attributes.elemTag || "div";
     136        ElemTag = props.attributes.elemTag || "div",
     137        href = props.attributes.href || "";       
     138
     139        const aProps = {};
     140        if(ElemTag === "a" && href){
     141            aProps.href = href;
     142        }
    116143
    117144        return (<ElemTag
    118145                className={elemClass}
    119146                style={inlineSytle}
    120                 id={elemId}>
     147                id={elemId}
     148                {...aProps}
     149                >
    121150                    <InnerBlocks.Content/>
    122151                </ElemTag>);

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

    r2048444 r2113913  
    6868/***/ (function(module, exports) {
    6969
     70var _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; };
     71
    7072console.log('magicblock is up and running');
    7173
    … …  
    106108            attribute: 'style'
    107109        },
     110        href: {
     111            type: 'string',
     112            source: 'attribute',
     113            selector: '.wp-block-magicblock-magicblock',
     114            attribute: 'href'
     115        },
    108116        elemId: {
    109117            type: 'string',
    … …  
    124132            elemTag = props.attributes.elemTag,
    125133            elemId = props.attributes.elemId,
    126             elemClass = props.attributes.elemClass;
     134            elemClass = props.attributes.elemClass,
     135            href = props.attributes.href;
    127136
    128137        function convertClassString(input) {
    … …  
    145154            props.setAttributes({ elemClass: newClass });
    146155        }
     156
     157        function onChangeHref(newHref) {
     158            props.setAttributes({ href: newHref });
     159        }
     160
     161        var linkPanels = wp.element.createElement(
     162            PanelBody,
     163            { title: "Link Href" },
     164            wp.element.createElement(PlainText, { onChange: onChangeHref, value: href, className: "magicblock-plaintext" })
     165        );
    147166
    148167        return wp.element.createElement(
    … …  
    155174                    PanelBody,
    156175                    { title: "Element Type" },
    157                     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' }]
     176                    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" }]
    158177                    })
    159178                ),
     179                elemTag === "a" ? linkPanels : null,
    160180                wp.element.createElement(
    161181                    PanelBody,
    … …  
    206226            elemId = props.attributes.elemId,
    207227            elemClass = props.attributes.elemClass,
    208             ElemTag = props.attributes.elemTag || "div";
     228            ElemTag = props.attributes.elemTag || "div",
     229            href = props.attributes.href || "";
     230
     231        var aProps = {};
     232        if (ElemTag === "a" && href) {
     233            aProps.href = href;
     234        }
    209235
    210236        return wp.element.createElement(
    211237            ElemTag,
    212             {
     238            _extends({
    213239                className: elemClass,
    214240                style: inlineSytle,
    215                 id: elemId },
     241                id: elemId
     242            }, aProps),
    216243            wp.element.createElement(InnerBlocks.Content, null)
    217244        );

  • magic-block/trunk/magicblock.php

    r2112491 r2113913  
    33Plugin Name:  Magic Block
    44Description: 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.0.2
     5Version:      1.1
    66Author:       Will Delphia
    77License:      GPL2
Note: See TracChangeset for help on using the changeset viewer.