WordPress.org
Get WordPress

Plugin Directory

Changeset 1989706


Ignore:
Timestamp:
12/09/2018 05:13:47 AM (7 years ago)
Author:
davidsword
Message:

version release

Location:
sword-layouts
Files:
6 added
4 edited
7 copied

Legend:

Unmodified
Added
Removed

  • sword-layouts/tags/1.0.8/dist/blocks.build.js

    r1938060 r1989706  
    1 !function(e){function t(a){if(n[a])return n[a].exports;var l=n[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,t),l.l=!0,l.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,a){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(1)},function(e,t,n){"use strict";var a=n(2),l=(n.n(a),n(3)),r=(n.n(l),n(4)),o=n(5),i=n.n(o),u=wp.i18n.__,c=wp.editor,d=c.AlignmentToolbar,m=c.BlockControls,s=c.InspectorControls,g=c.MediaUpload,p=c.MediaPlaceholder,f=c.RichText,w=c.ColorPalette,v=c.getColorClassName,b=wp.blocks.registerBlockType,x=wp.components,C=x.ToggleControl,h=x.RangeControl,y=x.IconButton,E=x.PanelBody,B=x.PanelColor,L=x.Toolbar;b("swrdlyts/tile",{title:u("Tile Layout"),description:u("Creates two columns, half image, half padded text. Use multiple, invert to tile."),icon:r.a,category:"layout",keywords:[u("tile"),u("stagger"),u("image")],attributes:{imgURL:{type:"string",source:"attribute",selector:".imageBox",attribute:"data-imgurl",default:""},imgID:{type:"number",default:""},content:{type:"array",source:"children",selector:".textBoxContent",default:""},invert:{type:"boolean",default:!1},backgroundColor:{type:"string",default:"rgba(0,0,0,0)"},textColor:{type:"string",default:""},paddingTB:{type:"string",default:"65"},width:{type:"string",default:"80"},alignment:{type:"string"}},getEditWrapperProps:function(e){return{"data-align":"full","data-move-toolbar-right":e.invert?"false":"true"}},edit:function(e){var t=e.attributes,n=e.setAttributes,a=e.className,l=e.isSelected,r=function(e){n({content:e})},o=function(){n({invert:!t.invert})},c=function(e){n({imgID:e.id,imgURL:e.url})},b=function(e){n({alignment:e})},x=t.imgID?"Change Image":"Select Image",k=t.imgID?"edit":"add",T=v("color",t.textColor);return[!!l&&wp.element.createElement(s,{key:"inspector"},wp.element.createElement(E,null,wp.element.createElement(C,{id:"invert-form-toggle",label:u("Invert Layout"),checked:!!t.invert,onChange:o}),wp.element.createElement(h,{label:u("Padding: Top Bottom"),value:t.paddingTB,onChange:function(e){return n({paddingTB:e})},min:20,max:150,step:5}),wp.element.createElement(h,{label:u("Width Text Content"),value:t.width,onChange:function(e){return n({width:e})},min:50,max:90,step:2}),wp.element.createElement(B,{title:u("Background Color"),colorValue:t.backgroundColor},wp.element.createElement(w,{label:u("Background Color"),value:t.backgroundColor,onChange:function(e){n({backgroundColor:e})}})),wp.element.createElement(B,{title:u("Text Color"),colorValue:t.textColor},wp.element.createElement(w,{label:u("Text Color"),value:t.textColor,onChange:function(e){n({textColor:e})}})))),wp.element.createElement("div",{className:i()("alignfull",a),"data-invert":t.invert?"true":"false","data-align":"full","data-paddingTB":t.paddingTB,"data-width":t.width,style:{backgroundColor:t.backgroundColor}},wp.element.createElement("div",{className:"imageBox",style:{backgroundImage:"url("+t.imgURL+")"},"data-imgurl":t.imgURL,"data-imgid":t.imgID,"data-hasimg":t.imgID?"true":"false"},!t.imgID&&wp.element.createElement(p,{icon:"format-gallery",className:a,labels:{title:u("Tile Image"),name:u("")},onSelect:c,accept:"image/*",type:"image"})),wp.element.createElement("div",{className:"textBox"},!!l&&wp.element.createElement(m,{key:"controls"},wp.element.createElement(d,{value:t.alignment,onChange:b}),wp.element.createElement(L,null,t.imgID&&wp.element.createElement(g,{onSelect:c,type:"image",value:t.imgID,render:function(e){var t=e.open;return wp.element.createElement(y,{label:x,icon:k,onClick:t})}}))),wp.element.createElement(f,{tagname:"div",multiline:"p",placeholder:"....",className:i()("textBoxContent",T),style:{textAlign:t.alignment,color:t.textColor,padding:t.paddingTB+"px 0",width:t.width+"%"},value:t.content,onChange:r,isSelected:l})))]},save:function(e){var t=v("color",e.attributes.textColor);return wp.element.createElement("div",{className:e.className,"data-invert":e.attributes.invert,"data-align":"full","data-paddingTB":e.attributes.paddingTB,"data-width":e.attributes.width,style:{backgroundColor:e.attributes.backgroundColor}},wp.element.createElement("div",{className:"imageBox","data-imgurl":e.attributes.imgURL,"data-imgid":e.attributes.imgID,style:{backgroundImage:"url("+e.attributes.imgURL+")"}}),wp.element.createElement("div",{className:"textBox"},wp.element.createElement("div",{className:i()("textBoxContent",t),style:{textAlign:e.attributes.alignment,color:e.attributes.textColor,padding:e.attributes.paddingTB+"px 0",width:e.attributes.width+"%"}},e.attributes.content)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var a=wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20px",height:"20px",viewBox:"0 0 512 512"}," ",wp.element.createElement("path",{fillRule:"evenodd",d:"M256.000,512.000 L256.000,256.000 L512.000,256.000 L512.000,512.000 L256.000,512.000 ZM0.000,0.000 L256.000,0.000 L256.000,256.000 L0.000,256.000 L0.000,0.000 ZM337.000,99.000 L502.000,99.000 L502.000,158.000 L337.000,158.000 L337.000,99.000 ZM175.000,414.000 L10.000,414.000 L10.000,355.000 L175.000,355.000 L175.000,414.000 Z"})," ");t.a=a},function(e,t,n){var a,l;!function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var l=typeof a;if("string"===l||"number"===l)e.push(a);else if(Array.isArray(a)&&a.length){var o=n.apply(null,a);o&&e.push(o)}else if("object"===l)for(var i in a)r.call(a,i)&&a[i]&&e.push(i)}}return e.join(" ")}var r={}.hasOwnProperty;"undefined"!==typeof e&&e.exports?(n.default=n,e.exports=n):(a=[],void 0!==(l=function(){return n}.apply(t,a))&&(e.exports=l))}()}]);
     1!function(e){function t(a){if(n[a])return n[a].exports;var l=n[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,t),l.l=!0,l.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,a){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(1)},function(e,t,n){"use strict";var a=n(2),l=(n.n(a),n(3)),o=(n.n(l),n(4)),r=wp.i18n.__,i=wp.editor,c=i.BlockControls,m=i.InspectorControls,g=i.MediaUpload,u=i.MediaPlaceholder,d=i.RichText,s=i.PanelColorSettings,p=i.getColorClassName,b=i.AlignmentToolbar,w=i.BlockAlignmentToolbar,f=wp.blocks.registerBlockType,v=wp.components,C=v.ToggleControl,x=v.RangeControl,h=v.IconButton,y=v.PanelBody,k=v.Toolbar;f("swrdlyts/tile",{title:r("Tile Layout"),description:r("Creates two columns, half image, half padded text. Use multiple, invert to tile."),icon:o.a,category:"layout",keywords:[r("tile"),r("stagger"),r("image")],attributes:{imgURL:{type:"string",source:"attribute",selector:".imageBox",attribute:"data-imgurl",default:""},imgID:{type:"number",default:""},content:{type:"array",source:"children",selector:".textBoxContent",default:""},invert:{type:"boolean",default:!1},backgroundColor:{type:"string",default:"rgba(0,0,0,0)"},textColor:{type:"string",default:""},paddingTB:{type:"string",default:"65"},width:{type:"string",default:"80"},alignment:{type:"string"},blockalignment:{type:"string"}},getEditWrapperProps:function(e){var t=e.invert?"false":"true";return{"data-align":e.blockalignment,"data-move-toolbar-right":t}},edit:function(e){var t=e.attributes,n=e.setAttributes,a=e.className,l=e.isSelected,o=function(e){n({content:e})},i=function(){n({invert:!t.invert})},f=function(e){n({imgID:e.id,imgURL:e.url})},v=function(e){n({alignment:e})},B=function(e){n({blockalignment:e})},E=t.imgID?"Change Image":"Select Image",L=t.imgID?"edit":"add",T=p("color",t.textColor);return[!!l&&wp.element.createElement(m,{key:"inspector"},wp.element.createElement(y,null,wp.element.createElement(C,{id:"invert-form-toggle",label:r("Invert Layout"),checked:!!t.invert,onChange:i}),wp.element.createElement(x,{label:r("Padding: Top Bottom"),value:t.paddingTB,onChange:function(e){return n({paddingTB:e})},min:20,max:150,step:5}),wp.element.createElement(x,{label:r("Width Text Content"),value:t.width,onChange:function(e){return n({width:e})},min:50,max:90,step:2}),wp.element.createElement(s,{title:r("Background Color"),colorValue:t.backgroundColor,initialOpen:!1,colorSettings:[{value:t.backgroundColor,onChange:function(e){n({backgroundColor:e})},label:r("Background Color")}]}),wp.element.createElement(s,{title:r("Text Color"),colorValue:t.textColor,initialOpen:!1,colorSettings:[{value:t.textColor,onChange:function(e){n({textColor:e})},label:r("Text Color")}]}))),wp.element.createElement("div",{className:"align"+(t.blockalignment?t.blockalignment:"")+" "+(a||""),"data-invert":t.invert?"true":"false","data-paddingTB":t.paddingTB,"data-width":t.width,style:{backgroundColor:t.backgroundColor}},wp.element.createElement("div",{className:"imageBox",style:{backgroundImage:"url("+t.imgURL+")"},"data-imgurl":t.imgURL,"data-imgid":t.imgID,"data-hasimg":t.imgID?"true":"false"},!t.imgID&&wp.element.createElement(u,{icon:"format-gallery",className:a,labels:{title:r("Tile Image"),name:r("")},onSelect:f,accept:"image/*",type:"image"})),wp.element.createElement("div",{className:"textBox"},!!l&&wp.element.createElement(c,{key:"controls"},wp.element.createElement(b,{value:t.alignment,onChange:v}),wp.element.createElement(w,{value:t.alignment,onChange:B,controls:["wide","full"]}),wp.element.createElement(k,null,t.imgID&&wp.element.createElement(g,{onSelect:f,type:"image",value:t.imgID,render:function(e){var t=e.open;return wp.element.createElement(h,{label:E,icon:L,onClick:t})}}))),wp.element.createElement(d,{tagname:"div",multiline:"p",placeholder:"....",className:"textBoxContent "+(T||""),style:{textAlign:t.alignment,color:t.textColor,padding:t.paddingTB+"px 0",width:t.width+"%"},value:t.content,onChange:o,isSelected:l})))]},save:function(e){var t=p("color",e.attributes.textColor);return wp.element.createElement("div",{className:"align"+(e.attributes.blockalignment?e.attributes.blockalignment:"")+" "+(e.className?e.className:""),"data-invert":e.attributes.invert,"data-paddingTB":e.attributes.paddingTB,"data-width":e.attributes.width,style:{backgroundColor:e.attributes.backgroundColor}},wp.element.createElement("div",{className:"imageBox","data-imgurl":e.attributes.imgURL,"data-imgid":e.attributes.imgID,style:{backgroundImage:"url("+e.attributes.imgURL+")"}}),wp.element.createElement("div",{className:"textBox"},wp.element.createElement("div",{className:"textBoxContent "+(t||""),style:{textAlign:e.attributes.alignment,color:e.attributes.textColor,padding:e.attributes.paddingTB+"px 0",width:e.attributes.width+"%"}},e.attributes.content)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var a=wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20px",height:"20px",viewBox:"0 0 512 512"}," ",wp.element.createElement("path",{fillRule:"evenodd",d:"M256.000,512.000 L256.000,256.000 L512.000,256.000 L512.000,512.000 L256.000,512.000 ZM0.000,0.000 L256.000,0.000 L256.000,256.000 L0.000,256.000 L0.000,0.000 ZM337.000,99.000 L502.000,99.000 L502.000,158.000 L337.000,158.000 L337.000,99.000 ZM175.000,414.000 L10.000,414.000 L10.000,355.000 L175.000,355.000 L175.000,414.000 Z"})," ");t.a=a}]);

  • sword-layouts/tags/1.0.8/dist/blocks.style.build.css

    r1938061 r1989706  
    1 .wp-block-swrdlyts-tile{display:-ms-flexbox;display:flex;margin:0 auto !important;max-width:100% !important;width:100% !important}.wp-block-swrdlyts-tile>div{-ms-flex:1;flex:1}.wp-block-swrdlyts-tile>.imageBox{background-color:#eee;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;text-align:center}.wp-block-swrdlyts-tile>.imageBox *{z-index:2}.wp-block-swrdlyts-tile>.imageBox:before{content:"";display:block;left:0;padding-bottom:100%;top:0;z-index:1}.wp-block-swrdlyts-tile>.textBox{-ms-flex-item-align:center;align-self:center;margin:0 auto}.wp-block-swrdlyts-tile>.textBox .textBoxContent{margin-left:auto;margin-right:auto;width:70%}.wp-block-swrdlyts-tile>.textBox p{color:inherit !important}@media screen and (min-width: 800px){.wp-block-swrdlyts-tile[data-invert=true]{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media screen and (max-width: 800px){.wp-block-swrdlyts-tile{-ms-flex-direction:column;flex-direction:column}}@media screen and (max-width: 500px){.wp-block-swrdlyts-tile>div.textBox{margin:10vh 0}.wp-block-swrdlyts-tile>div.textBox .textBoxContent{width:80%}}
     1.wp-block-swrdlyts-tile{display:-ms-flexbox;display:flex;margin:0 auto !important}.wp-block-swrdlyts-tile>div{-ms-flex:1;flex:1}.wp-block-swrdlyts-tile>.imageBox{background-color:#eee;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;text-align:center}.wp-block-swrdlyts-tile>.imageBox *{z-index:2}.wp-block-swrdlyts-tile>.imageBox:before{content:"";display:block;left:0;padding-bottom:100%;top:0;z-index:1}.wp-block-swrdlyts-tile>.textBox{-ms-flex-item-align:center;align-self:center;margin:0 auto}.wp-block-swrdlyts-tile>.textBox .textBoxContent{margin-left:auto;margin-right:auto;width:70%}.wp-block-swrdlyts-tile>.textBox p{color:inherit !important}@media screen and (min-width: 800px){.wp-block-swrdlyts-tile[data-invert=true]{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media screen and (max-width: 800px){.wp-block-swrdlyts-tile{-ms-flex-direction:column;flex-direction:column}}@media screen and (max-width: 500px){.wp-block-swrdlyts-tile>div.textBox{margin:10vh 0}.wp-block-swrdlyts-tile>div.textBox .textBoxContent{width:80%}}

  • sword-layouts/tags/1.0.8/readme.txt

    r1938061 r1989706  
    33Donate link:       https://davidsword.ca/🍺/
    44Tags:              Gutenberg, Blocks, Layouts, Modern, Page Builder, Design
    5 Requires at least: 4.9.5
    6 Tested up to:      4.9.8
    7 Stable tag:        1.0.7
     5Requires at least: 5.0.0
     6Tested up to:      5.0.0
     7Stable tag:        1.0.8
    88Requires PHP:      5.6.0
    99
    1010Tile block for Gutenberg that help create more interesting and modern WordPress pages.
     11
    1112
    1213== Description ==
    … …  
    1819* Fully responsive
    1920
     21[youtube https://www.youtube.com/watch?v=NPl8eegbots]
     22
    2023= Please Note =
    2124
    22 * 🚀 This is a beta plugin for the beta plugin [Gutenberg](https://wordpress.org/plugins/gutenberg/) - things will be rocky.
    23 * 🚧 This is a WIP, more layouts will be added and the plugin name will change to "Sword Layouts"
     25* 🚀 This is a beta plugin - things will be rocky.
     26* 🚧 This is a Work In Progress
    2427* ⚠️ Please [open a support request](https://wordpress.org/support/plugin/sword-layouts) [or add as an issue on Github](https://github.com/davidsword/sword-layouts/issues) before summiting a negative review, *I'm happy to help,* please provide as much information as possible (screen recordings, WordPress and PHP versions, able-to-replicate instructions).
     28* 👨🏻‍💻 Please visit [Github](https://github.com/davidsword/sword-layouts/) for development
     29* 🤓 If you have any additional requests, please use [the Support tab](https://wordpress.org/support/plugin/sword-layouts).
    2530
    2631= Big shouts to =
    2732
    2833 - 🙏 [@ahmadawais](https://github.com/ahmadawais/create-guten-block) for the create-guten-block foundation
    29  - 🙏 [@zgordon](https://gutenberg.courses/development/) for the teaching
    30 
    31 
    32 ---
     34 - 🙏 [@zgordon](https://gutenberg.courses/development/) for the Gutenberg teaching
    3335
    3436
    … …  
    3840 - download the plugin and extract the files and upload `sword-layouts` to your `/wp-content/plugins/` directory
    3941 - Activate the plugin through the 'Plugins' menu in WordPress
     42
    4043
    4144== Frequently Asked Questions ==
    … …  
    65682. Tile - within Gutenberg
    6669
     70
    6771== Changelog ==
     72
     73= 1.0.8 =
     74* Dec 8, 2018
     75* Compatibility for WP 5.0 (better late than never!)
     76* README changes, added video
     77* fixed Enqueue
     78* remove use of npm `classnames`
     79* `alignfull` now set with BlockAlignmentToolbar instead of being hardcoded
     80* replaced ColorPalette and PanelColor with PanelColorSettings
    6881
    6982= 1.0.7 =
    … …  
    112125* Initial release
    113126
     127
    114128== Upgrade Notice ==
    115129
    116 = 1.0.4 =
     130= 1.0.8 =
     131* Dec 8, 2018
     132* Blocks built before this release will be broken. See JS console for instructions on how to edit the HTML to fix, but better off just rebuilding the blocks. Moving forward this won't happen.
    117133
    118 * blue skys
     134== TODO ==
    119135
    120 = 1.0.1 =
    121 
    122 * blue skys
    123 
    124 = 1.0.0 =
    125 
    126 * blue skys
    127 
    128 == Additional Notes ==
    129 
    130 * 👨🏻‍💻 Please visit [Github](https://github.com/davidsword/sword-layouts/) for build files and full documentation
    131 * 🤓 If you have any additional requests into [the Support tab](https://wordpress.org/support/plugin/sword-layouts).
    132 
    133 === @TODO ===
    134 
    135  - [] focus on AlignmentToolbar only when in RichText, not the entire block
     136- [ ] Add FAQ about "Padding: Top Bottom", as it only applies on mobile and when the text is greater than the images size squared.
     137- [ ] Placeholder text for RichText not prominent enough
     138- [ ] Add Contrast checker
     139- [ ] Move InspectorControls to own component

  • sword-layouts/tags/1.0.8/sword-layouts.php

    r1938061 r1989706  
    33 * Plugin Name: Gutenberg Tile Block
    44 * Plugin URI: https://github.com/davidsword/sword-layouts
    5  * Description: Tile blocks for Gutenberg
     5 * Description: Tile layout blocks for Gutenberg
    66 * Author: davidsword
    77 * Author URI: https://davidsword.ca/
    8  * Version: 1.0.7
     8 * Version: 1.0.8
    99 * License: GPL3
    1010 * License URI: https://raw.githubusercontent.com/davidsword/sword-layouts/master/LICENSE
    … …  
    1616
    1717/**
    18  * Load in the Editor assets for the FRONT and BACKEND
     18 * FRONTEND & EDITOR
    1919 */
    20 function sword_layouts_block_assets() {
     20add_action( 'enqueue_block_assets', function () {
    2121    wp_enqueue_style(
    2222        'swrdlyts-style-css',
    2323        plugins_url( 'dist/blocks.style.build.css', __FILE__ ),
    24         array( 'wp-blocks' ),
     24        [ 'wp-editor' ],
    2525        sword_layouts_version()
    2626    );
    2727    return true;
    28 }
    29 add_action( 'enqueue_block_assets', 'sword_layouts_block_assets' );
     28}, 99 );
    3029
    3130/**
    32  * Load in the Editor assets for the BACKEND only
     31 * EDITOR
    3332 */
    34 function sword_layouts_editor_assets() {
     33add_action( 'enqueue_block_editor_assets', function () {
    3534    wp_enqueue_script(
    3635        'swrdlyts-block-js',
    3736        plugins_url( '/dist/blocks.build.js', __FILE__ ),
    38         array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
     37        [ 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ],
    3938        sword_layouts_version(),
    4039        true
    … …  
    4342        'swrdlyts-block-editor-css',
    4443        plugins_url( 'dist/blocks.editor.build.css', __FILE__ ),
    45         array( 'wp-edit-blocks' ),
     44        [ 'wp-edit-blocks' ],
    4645        sword_layouts_version()
    4746    );
    4847    return true;
    49 }
    50 add_action( 'enqueue_block_editor_assets', 'sword_layouts_editor_assets' );
     48}, 99 );
    5149
    5250/**

  • sword-layouts/trunk/dist/blocks.build.js

    r1938060 r1989706  
    1 !function(e){function t(a){if(n[a])return n[a].exports;var l=n[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,t),l.l=!0,l.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,a){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(1)},function(e,t,n){"use strict";var a=n(2),l=(n.n(a),n(3)),r=(n.n(l),n(4)),o=n(5),i=n.n(o),u=wp.i18n.__,c=wp.editor,d=c.AlignmentToolbar,m=c.BlockControls,s=c.InspectorControls,g=c.MediaUpload,p=c.MediaPlaceholder,f=c.RichText,w=c.ColorPalette,v=c.getColorClassName,b=wp.blocks.registerBlockType,x=wp.components,C=x.ToggleControl,h=x.RangeControl,y=x.IconButton,E=x.PanelBody,B=x.PanelColor,L=x.Toolbar;b("swrdlyts/tile",{title:u("Tile Layout"),description:u("Creates two columns, half image, half padded text. Use multiple, invert to tile."),icon:r.a,category:"layout",keywords:[u("tile"),u("stagger"),u("image")],attributes:{imgURL:{type:"string",source:"attribute",selector:".imageBox",attribute:"data-imgurl",default:""},imgID:{type:"number",default:""},content:{type:"array",source:"children",selector:".textBoxContent",default:""},invert:{type:"boolean",default:!1},backgroundColor:{type:"string",default:"rgba(0,0,0,0)"},textColor:{type:"string",default:""},paddingTB:{type:"string",default:"65"},width:{type:"string",default:"80"},alignment:{type:"string"}},getEditWrapperProps:function(e){return{"data-align":"full","data-move-toolbar-right":e.invert?"false":"true"}},edit:function(e){var t=e.attributes,n=e.setAttributes,a=e.className,l=e.isSelected,r=function(e){n({content:e})},o=function(){n({invert:!t.invert})},c=function(e){n({imgID:e.id,imgURL:e.url})},b=function(e){n({alignment:e})},x=t.imgID?"Change Image":"Select Image",k=t.imgID?"edit":"add",T=v("color",t.textColor);return[!!l&&wp.element.createElement(s,{key:"inspector"},wp.element.createElement(E,null,wp.element.createElement(C,{id:"invert-form-toggle",label:u("Invert Layout"),checked:!!t.invert,onChange:o}),wp.element.createElement(h,{label:u("Padding: Top Bottom"),value:t.paddingTB,onChange:function(e){return n({paddingTB:e})},min:20,max:150,step:5}),wp.element.createElement(h,{label:u("Width Text Content"),value:t.width,onChange:function(e){return n({width:e})},min:50,max:90,step:2}),wp.element.createElement(B,{title:u("Background Color"),colorValue:t.backgroundColor},wp.element.createElement(w,{label:u("Background Color"),value:t.backgroundColor,onChange:function(e){n({backgroundColor:e})}})),wp.element.createElement(B,{title:u("Text Color"),colorValue:t.textColor},wp.element.createElement(w,{label:u("Text Color"),value:t.textColor,onChange:function(e){n({textColor:e})}})))),wp.element.createElement("div",{className:i()("alignfull",a),"data-invert":t.invert?"true":"false","data-align":"full","data-paddingTB":t.paddingTB,"data-width":t.width,style:{backgroundColor:t.backgroundColor}},wp.element.createElement("div",{className:"imageBox",style:{backgroundImage:"url("+t.imgURL+")"},"data-imgurl":t.imgURL,"data-imgid":t.imgID,"data-hasimg":t.imgID?"true":"false"},!t.imgID&&wp.element.createElement(p,{icon:"format-gallery",className:a,labels:{title:u("Tile Image"),name:u("")},onSelect:c,accept:"image/*",type:"image"})),wp.element.createElement("div",{className:"textBox"},!!l&&wp.element.createElement(m,{key:"controls"},wp.element.createElement(d,{value:t.alignment,onChange:b}),wp.element.createElement(L,null,t.imgID&&wp.element.createElement(g,{onSelect:c,type:"image",value:t.imgID,render:function(e){var t=e.open;return wp.element.createElement(y,{label:x,icon:k,onClick:t})}}))),wp.element.createElement(f,{tagname:"div",multiline:"p",placeholder:"....",className:i()("textBoxContent",T),style:{textAlign:t.alignment,color:t.textColor,padding:t.paddingTB+"px 0",width:t.width+"%"},value:t.content,onChange:r,isSelected:l})))]},save:function(e){var t=v("color",e.attributes.textColor);return wp.element.createElement("div",{className:e.className,"data-invert":e.attributes.invert,"data-align":"full","data-paddingTB":e.attributes.paddingTB,"data-width":e.attributes.width,style:{backgroundColor:e.attributes.backgroundColor}},wp.element.createElement("div",{className:"imageBox","data-imgurl":e.attributes.imgURL,"data-imgid":e.attributes.imgID,style:{backgroundImage:"url("+e.attributes.imgURL+")"}}),wp.element.createElement("div",{className:"textBox"},wp.element.createElement("div",{className:i()("textBoxContent",t),style:{textAlign:e.attributes.alignment,color:e.attributes.textColor,padding:e.attributes.paddingTB+"px 0",width:e.attributes.width+"%"}},e.attributes.content)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var a=wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20px",height:"20px",viewBox:"0 0 512 512"}," ",wp.element.createElement("path",{fillRule:"evenodd",d:"M256.000,512.000 L256.000,256.000 L512.000,256.000 L512.000,512.000 L256.000,512.000 ZM0.000,0.000 L256.000,0.000 L256.000,256.000 L0.000,256.000 L0.000,0.000 ZM337.000,99.000 L502.000,99.000 L502.000,158.000 L337.000,158.000 L337.000,99.000 ZM175.000,414.000 L10.000,414.000 L10.000,355.000 L175.000,355.000 L175.000,414.000 Z"})," ");t.a=a},function(e,t,n){var a,l;!function(){"use strict";function n(){for(var e=[],t=0;t<arguments.length;t++){var a=arguments[t];if(a){var l=typeof a;if("string"===l||"number"===l)e.push(a);else if(Array.isArray(a)&&a.length){var o=n.apply(null,a);o&&e.push(o)}else if("object"===l)for(var i in a)r.call(a,i)&&a[i]&&e.push(i)}}return e.join(" ")}var r={}.hasOwnProperty;"undefined"!==typeof e&&e.exports?(n.default=n,e.exports=n):(a=[],void 0!==(l=function(){return n}.apply(t,a))&&(e.exports=l))}()}]);
     1!function(e){function t(a){if(n[a])return n[a].exports;var l=n[a]={i:a,l:!1,exports:{}};return e[a].call(l.exports,l,l.exports,t),l.l=!0,l.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,a){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:a})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});n(1)},function(e,t,n){"use strict";var a=n(2),l=(n.n(a),n(3)),o=(n.n(l),n(4)),r=wp.i18n.__,i=wp.editor,c=i.BlockControls,m=i.InspectorControls,g=i.MediaUpload,u=i.MediaPlaceholder,d=i.RichText,s=i.PanelColorSettings,p=i.getColorClassName,b=i.AlignmentToolbar,w=i.BlockAlignmentToolbar,f=wp.blocks.registerBlockType,v=wp.components,C=v.ToggleControl,x=v.RangeControl,h=v.IconButton,y=v.PanelBody,k=v.Toolbar;f("swrdlyts/tile",{title:r("Tile Layout"),description:r("Creates two columns, half image, half padded text. Use multiple, invert to tile."),icon:o.a,category:"layout",keywords:[r("tile"),r("stagger"),r("image")],attributes:{imgURL:{type:"string",source:"attribute",selector:".imageBox",attribute:"data-imgurl",default:""},imgID:{type:"number",default:""},content:{type:"array",source:"children",selector:".textBoxContent",default:""},invert:{type:"boolean",default:!1},backgroundColor:{type:"string",default:"rgba(0,0,0,0)"},textColor:{type:"string",default:""},paddingTB:{type:"string",default:"65"},width:{type:"string",default:"80"},alignment:{type:"string"},blockalignment:{type:"string"}},getEditWrapperProps:function(e){var t=e.invert?"false":"true";return{"data-align":e.blockalignment,"data-move-toolbar-right":t}},edit:function(e){var t=e.attributes,n=e.setAttributes,a=e.className,l=e.isSelected,o=function(e){n({content:e})},i=function(){n({invert:!t.invert})},f=function(e){n({imgID:e.id,imgURL:e.url})},v=function(e){n({alignment:e})},B=function(e){n({blockalignment:e})},E=t.imgID?"Change Image":"Select Image",L=t.imgID?"edit":"add",T=p("color",t.textColor);return[!!l&&wp.element.createElement(m,{key:"inspector"},wp.element.createElement(y,null,wp.element.createElement(C,{id:"invert-form-toggle",label:r("Invert Layout"),checked:!!t.invert,onChange:i}),wp.element.createElement(x,{label:r("Padding: Top Bottom"),value:t.paddingTB,onChange:function(e){return n({paddingTB:e})},min:20,max:150,step:5}),wp.element.createElement(x,{label:r("Width Text Content"),value:t.width,onChange:function(e){return n({width:e})},min:50,max:90,step:2}),wp.element.createElement(s,{title:r("Background Color"),colorValue:t.backgroundColor,initialOpen:!1,colorSettings:[{value:t.backgroundColor,onChange:function(e){n({backgroundColor:e})},label:r("Background Color")}]}),wp.element.createElement(s,{title:r("Text Color"),colorValue:t.textColor,initialOpen:!1,colorSettings:[{value:t.textColor,onChange:function(e){n({textColor:e})},label:r("Text Color")}]}))),wp.element.createElement("div",{className:"align"+(t.blockalignment?t.blockalignment:"")+" "+(a||""),"data-invert":t.invert?"true":"false","data-paddingTB":t.paddingTB,"data-width":t.width,style:{backgroundColor:t.backgroundColor}},wp.element.createElement("div",{className:"imageBox",style:{backgroundImage:"url("+t.imgURL+")"},"data-imgurl":t.imgURL,"data-imgid":t.imgID,"data-hasimg":t.imgID?"true":"false"},!t.imgID&&wp.element.createElement(u,{icon:"format-gallery",className:a,labels:{title:r("Tile Image"),name:r("")},onSelect:f,accept:"image/*",type:"image"})),wp.element.createElement("div",{className:"textBox"},!!l&&wp.element.createElement(c,{key:"controls"},wp.element.createElement(b,{value:t.alignment,onChange:v}),wp.element.createElement(w,{value:t.alignment,onChange:B,controls:["wide","full"]}),wp.element.createElement(k,null,t.imgID&&wp.element.createElement(g,{onSelect:f,type:"image",value:t.imgID,render:function(e){var t=e.open;return wp.element.createElement(h,{label:E,icon:L,onClick:t})}}))),wp.element.createElement(d,{tagname:"div",multiline:"p",placeholder:"....",className:"textBoxContent "+(T||""),style:{textAlign:t.alignment,color:t.textColor,padding:t.paddingTB+"px 0",width:t.width+"%"},value:t.content,onChange:o,isSelected:l})))]},save:function(e){var t=p("color",e.attributes.textColor);return wp.element.createElement("div",{className:"align"+(e.attributes.blockalignment?e.attributes.blockalignment:"")+" "+(e.className?e.className:""),"data-invert":e.attributes.invert,"data-paddingTB":e.attributes.paddingTB,"data-width":e.attributes.width,style:{backgroundColor:e.attributes.backgroundColor}},wp.element.createElement("div",{className:"imageBox","data-imgurl":e.attributes.imgURL,"data-imgid":e.attributes.imgID,style:{backgroundImage:"url("+e.attributes.imgURL+")"}}),wp.element.createElement("div",{className:"textBox"},wp.element.createElement("div",{className:"textBoxContent "+(t||""),style:{textAlign:e.attributes.alignment,color:e.attributes.textColor,padding:e.attributes.paddingTB+"px 0",width:e.attributes.width+"%"}},e.attributes.content)))}})},function(e,t){},function(e,t){},function(e,t,n){"use strict";var a=wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20px",height:"20px",viewBox:"0 0 512 512"}," ",wp.element.createElement("path",{fillRule:"evenodd",d:"M256.000,512.000 L256.000,256.000 L512.000,256.000 L512.000,512.000 L256.000,512.000 ZM0.000,0.000 L256.000,0.000 L256.000,256.000 L0.000,256.000 L0.000,0.000 ZM337.000,99.000 L502.000,99.000 L502.000,158.000 L337.000,158.000 L337.000,99.000 ZM175.000,414.000 L10.000,414.000 L10.000,355.000 L175.000,355.000 L175.000,414.000 Z"})," ");t.a=a}]);

  • sword-layouts/trunk/dist/blocks.style.build.css

    r1938061 r1989706  
    1 .wp-block-swrdlyts-tile{display:-ms-flexbox;display:flex;margin:0 auto !important;max-width:100% !important;width:100% !important}.wp-block-swrdlyts-tile>div{-ms-flex:1;flex:1}.wp-block-swrdlyts-tile>.imageBox{background-color:#eee;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;text-align:center}.wp-block-swrdlyts-tile>.imageBox *{z-index:2}.wp-block-swrdlyts-tile>.imageBox:before{content:"";display:block;left:0;padding-bottom:100%;top:0;z-index:1}.wp-block-swrdlyts-tile>.textBox{-ms-flex-item-align:center;align-self:center;margin:0 auto}.wp-block-swrdlyts-tile>.textBox .textBoxContent{margin-left:auto;margin-right:auto;width:70%}.wp-block-swrdlyts-tile>.textBox p{color:inherit !important}@media screen and (min-width: 800px){.wp-block-swrdlyts-tile[data-invert=true]{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media screen and (max-width: 800px){.wp-block-swrdlyts-tile{-ms-flex-direction:column;flex-direction:column}}@media screen and (max-width: 500px){.wp-block-swrdlyts-tile>div.textBox{margin:10vh 0}.wp-block-swrdlyts-tile>div.textBox .textBoxContent{width:80%}}
     1.wp-block-swrdlyts-tile{display:-ms-flexbox;display:flex;margin:0 auto !important}.wp-block-swrdlyts-tile>div{-ms-flex:1;flex:1}.wp-block-swrdlyts-tile>.imageBox{background-color:#eee;background-position:center;background-repeat:no-repeat;background-size:cover;position:relative;text-align:center}.wp-block-swrdlyts-tile>.imageBox *{z-index:2}.wp-block-swrdlyts-tile>.imageBox:before{content:"";display:block;left:0;padding-bottom:100%;top:0;z-index:1}.wp-block-swrdlyts-tile>.textBox{-ms-flex-item-align:center;align-self:center;margin:0 auto}.wp-block-swrdlyts-tile>.textBox .textBoxContent{margin-left:auto;margin-right:auto;width:70%}.wp-block-swrdlyts-tile>.textBox p{color:inherit !important}@media screen and (min-width: 800px){.wp-block-swrdlyts-tile[data-invert=true]{-ms-flex-direction:row-reverse;flex-direction:row-reverse}}@media screen and (max-width: 800px){.wp-block-swrdlyts-tile{-ms-flex-direction:column;flex-direction:column}}@media screen and (max-width: 500px){.wp-block-swrdlyts-tile>div.textBox{margin:10vh 0}.wp-block-swrdlyts-tile>div.textBox .textBoxContent{width:80%}}

  • sword-layouts/trunk/readme.txt

    r1938061 r1989706  
    33Donate link:       https://davidsword.ca/🍺/
    44Tags:              Gutenberg, Blocks, Layouts, Modern, Page Builder, Design
    5 Requires at least: 4.9.5
    6 Tested up to:      4.9.8
    7 Stable tag:        1.0.7
     5Requires at least: 5.0.0
     6Tested up to:      5.0.0
     7Stable tag:        1.0.8
    88Requires PHP:      5.6.0
    99
    1010Tile block for Gutenberg that help create more interesting and modern WordPress pages.
     11
    1112
    1213== Description ==
    … …  
    1819* Fully responsive
    1920
     21[youtube https://www.youtube.com/watch?v=NPl8eegbots]
     22
    2023= Please Note =
    2124
    22 * 🚀 This is a beta plugin for the beta plugin [Gutenberg](https://wordpress.org/plugins/gutenberg/) - things will be rocky.
    23 * 🚧 This is a WIP, more layouts will be added and the plugin name will change to "Sword Layouts"
     25* 🚀 This is a beta plugin - things will be rocky.
     26* 🚧 This is a Work In Progress
    2427* ⚠️ Please [open a support request](https://wordpress.org/support/plugin/sword-layouts) [or add as an issue on Github](https://github.com/davidsword/sword-layouts/issues) before summiting a negative review, *I'm happy to help,* please provide as much information as possible (screen recordings, WordPress and PHP versions, able-to-replicate instructions).
     28* 👨🏻‍💻 Please visit [Github](https://github.com/davidsword/sword-layouts/) for development
     29* 🤓 If you have any additional requests, please use [the Support tab](https://wordpress.org/support/plugin/sword-layouts).
    2530
    2631= Big shouts to =
    2732
    2833 - 🙏 [@ahmadawais](https://github.com/ahmadawais/create-guten-block) for the create-guten-block foundation
    29  - 🙏 [@zgordon](https://gutenberg.courses/development/) for the teaching
    30 
    31 
    32 ---
     34 - 🙏 [@zgordon](https://gutenberg.courses/development/) for the Gutenberg teaching
    3335
    3436
    … …  
    3840 - download the plugin and extract the files and upload `sword-layouts` to your `/wp-content/plugins/` directory
    3941 - Activate the plugin through the 'Plugins' menu in WordPress
     42
    4043
    4144== Frequently Asked Questions ==
    … …  
    65682. Tile - within Gutenberg
    6669
     70
    6771== Changelog ==
     72
     73= 1.0.8 =
     74* Dec 8, 2018
     75* Compatibility for WP 5.0 (better late than never!)
     76* README changes, added video
     77* fixed Enqueue
     78* remove use of npm `classnames`
     79* `alignfull` now set with BlockAlignmentToolbar instead of being hardcoded
     80* replaced ColorPalette and PanelColor with PanelColorSettings
    6881
    6982= 1.0.7 =
    … …  
    112125* Initial release
    113126
     127
    114128== Upgrade Notice ==
    115129
    116 = 1.0.4 =
     130= 1.0.8 =
     131* Dec 8, 2018
     132* Blocks built before this release will be broken. See JS console for instructions on how to edit the HTML to fix, but better off just rebuilding the blocks. Moving forward this won't happen.
    117133
    118 * blue skys
     134== TODO ==
    119135
    120 = 1.0.1 =
    121 
    122 * blue skys
    123 
    124 = 1.0.0 =
    125 
    126 * blue skys
    127 
    128 == Additional Notes ==
    129 
    130 * 👨🏻‍💻 Please visit [Github](https://github.com/davidsword/sword-layouts/) for build files and full documentation
    131 * 🤓 If you have any additional requests into [the Support tab](https://wordpress.org/support/plugin/sword-layouts).
    132 
    133 === @TODO ===
    134 
    135  - [] focus on AlignmentToolbar only when in RichText, not the entire block
     136- [ ] Add FAQ about "Padding: Top Bottom", as it only applies on mobile and when the text is greater than the images size squared.
     137- [ ] Placeholder text for RichText not prominent enough
     138- [ ] Add Contrast checker
     139- [ ] Move InspectorControls to own component

  • sword-layouts/trunk/sword-layouts.php

    r1938061 r1989706  
    33 * Plugin Name: Gutenberg Tile Block
    44 * Plugin URI: https://github.com/davidsword/sword-layouts
    5  * Description: Tile blocks for Gutenberg
     5 * Description: Tile layout blocks for Gutenberg
    66 * Author: davidsword
    77 * Author URI: https://davidsword.ca/
    8  * Version: 1.0.7
     8 * Version: 1.0.8
    99 * License: GPL3
    1010 * License URI: https://raw.githubusercontent.com/davidsword/sword-layouts/master/LICENSE
    … …  
    1616
    1717/**
    18  * Load in the Editor assets for the FRONT and BACKEND
     18 * FRONTEND & EDITOR
    1919 */
    20 function sword_layouts_block_assets() {
     20add_action( 'enqueue_block_assets', function () {
    2121    wp_enqueue_style(
    2222        'swrdlyts-style-css',
    2323        plugins_url( 'dist/blocks.style.build.css', __FILE__ ),
    24         array( 'wp-blocks' ),
     24        [ 'wp-editor' ],
    2525        sword_layouts_version()
    2626    );
    2727    return true;
    28 }
    29 add_action( 'enqueue_block_assets', 'sword_layouts_block_assets' );
     28}, 99 );
    3029
    3130/**
    32  * Load in the Editor assets for the BACKEND only
     31 * EDITOR
    3332 */
    34 function sword_layouts_editor_assets() {
     33add_action( 'enqueue_block_editor_assets', function () {
    3534    wp_enqueue_script(
    3635        'swrdlyts-block-js',
    3736        plugins_url( '/dist/blocks.build.js', __FILE__ ),
    38         array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
     37        [ 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ],
    3938        sword_layouts_version(),
    4039        true
    … …  
    4342        'swrdlyts-block-editor-css',
    4443        plugins_url( 'dist/blocks.editor.build.css', __FILE__ ),
    45         array( 'wp-edit-blocks' ),
     44        [ 'wp-edit-blocks' ],
    4645        sword_layouts_version()
    4746    );
    4847    return true;
    49 }
    50 add_action( 'enqueue_block_editor_assets', 'sword_layouts_editor_assets' );
     48}, 99 );
    5149
    5250/**
Note: See TracChangeset for help on using the changeset viewer.