WordPress.org
Get WordPress

Plugin Directory

Changeset 2114800


Ignore:
Timestamp:
06/29/2019 07:24:04 PM (7 years ago)
Author:
willdelphia
Message:

adding "open in new tab" option to <a> tags

Location:
magic-block/trunk
Files:
4 edited

Legend:

Unmodified
Added
Removed

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

    r2112486 r2114800  
    4848    background: rgba(230, 186, 173, 0.214);
    4949}
     50
     51.magicblock-newtab {
     52    margin-top: 1em;
     53}
     54
     55.edit-post-settings-sidebar__panel-block .components-panel__body .magicblock-newtab .components-base-control {
     56    margin-bottom: .3em;
     57}
     58

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

    r2114557 r2114800  
    44const { InspectorControls, InnerBlocks, PlainText} = wp.editor;
    55const { Fragment } = wp.element;
    6 const { PanelBody, SelectControl } = wp.components;
     6const { PanelBody, SelectControl, CheckboxControl } = wp.components;
     7
    78
    89const icon = () => {
    … …  
    3536            attribute: 'href',
    3637        },
     38        newTab: {
     39            type: 'boolean'
     40        },
    3741        elemId: {
    3842            type: 'string',
    … …  
    5458                elemId = props.attributes.elemId,
    5559                elemClass = props.attributes.elemClass,
    56                 href = props.attributes.href;
     60                href = props.attributes.href,
     61                newTab = props.attributes.newTab;
     62
    5763
    5864        function convertClassString(input) {
    … …  
    8086        }
    8187
     88        function onChangeNewTab ( newNewTab ) {
     89            props.setAttributes( { newTab: newNewTab } );
     90        }
    8291 
    8392
    8493        const linkPanels = (
    85             <PanelBody title="Link Href">
     94            <PanelBody title="Href">
    8695                <PlainText onChange={onChangeHref} value={href} className="magicblock-plaintext"/>
     96                <div className="magicblock-flex magicblock-newtab">
     97                    <CheckboxControl
     98                        label="Open in new tab"
     99                        checked={newTab}
     100                        onChange={onChangeNewTab}
     101                        />
     102                </div>
    87103            </PanelBody>
    88104        );
    … …  
    139155        elemClass = props.attributes.elemClass,
    140156        ElemTag = props.attributes.elemTag || "div",
    141         href = props.attributes.href || "";       
     157        href = props.attributes.href || "",
     158        newTab = props.attributes.newTab;       
    142159
    143160        const aProps = {};
    144161        if(ElemTag === "a" && href){
    145162            aProps.href = href;
     163            if(newTab) {
     164                aProps.target = "_blank";
     165                aProps.rel = "noopener noreferrer";
     166            }
    146167        }
    147168

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

    r2114557 r2114800  
    8080var _wp$components = wp.components,
    8181    PanelBody = _wp$components.PanelBody,
    82     SelectControl = _wp$components.SelectControl;
     82    SelectControl = _wp$components.SelectControl,
     83    CheckboxControl = _wp$components.CheckboxControl;
    8384
    8485
    … …  
    114115            attribute: 'href'
    115116        },
     117        newTab: {
     118            type: 'boolean'
     119        },
    116120        elemId: {
    117121            type: 'string',
    … …  
    133137            elemId = props.attributes.elemId,
    134138            elemClass = props.attributes.elemClass,
    135             href = props.attributes.href;
     139            href = props.attributes.href,
     140            newTab = props.attributes.newTab;
    136141
    137142        function convertClassString(input) {
    … …  
    159164        }
    160165
     166        function onChangeNewTab(newNewTab) {
     167            props.setAttributes({ newTab: newNewTab });
     168        }
     169
    161170        var linkPanels = wp.element.createElement(
    162171            PanelBody,
    163             { title: "Link Href" },
    164             wp.element.createElement(PlainText, { onChange: onChangeHref, value: href, className: "magicblock-plaintext" })
     172            { title: "Href" },
     173            wp.element.createElement(PlainText, { onChange: onChangeHref, value: href, className: "magicblock-plaintext" }),
     174            wp.element.createElement(
     175                "div",
     176                { className: "magicblock-flex magicblock-newtab" },
     177                wp.element.createElement(CheckboxControl, {
     178                    label: "Open in new tab",
     179                    checked: newTab,
     180                    onChange: onChangeNewTab
     181                })
     182            )
    165183        );
    166184
    … …  
    243261            elemClass = props.attributes.elemClass,
    244262            ElemTag = props.attributes.elemTag || "div",
    245             href = props.attributes.href || "";
     263            href = props.attributes.href || "",
     264            newTab = props.attributes.newTab;
    246265
    247266        var aProps = {};
    248267        if (ElemTag === "a" && href) {
    249268            aProps.href = href;
     269            if (newTab) {
     270                aProps.target = "_blank";
     271                aProps.rel = "noopener noreferrer";
     272            }
    250273        }
    251274

  • magic-block/trunk/magicblock.php

    r2114557 r2114800  
    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.1.1
     5Version:      1.1.2
    66Author:       Will Delphia
    77License:      GPL2
Note: See TracChangeset for help on using the changeset viewer.