├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── README.md ├── dist ├── blocks.build.js ├── blocks.editor.build.css └── blocks.style.build.css ├── editor.png ├── examples.png ├── front.png ├── nano.save ├── package-lock.json ├── package.json ├── plugin.php ├── src ├── blocks.js ├── columns │ ├── column.js │ ├── editor.scss │ ├── index.js │ └── style.scss ├── common.scss └── init.php └── structure.png /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | # WordPress Coding Standards 5 | # https://make.wordpress.org/core/handbook/coding-standards/ 6 | 7 | root = true 8 | 9 | [*] 10 | charset = utf-8 11 | end_of_line = lf 12 | insert_final_newline = true 13 | trim_trailing_whitespace = true 14 | indent_style = tab 15 | 16 | [*.yml] 17 | indent_style = space 18 | indent_size = 2 19 | 20 | [*.md] 21 | trim_trailing_whitespace = false 22 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.min.js 2 | **/*.build.js 3 | **/node_modules/** 4 | **/vendor/** 5 | build 6 | coverage 7 | cypress 8 | node_modules 9 | vendor 10 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "babel-eslint", 4 | "extends": [ 5 | "wordpress", 6 | "plugin:react/recommended", 7 | "plugin:jsx-a11y/recommended", 8 | "plugin:jest/recommended" 9 | ], 10 | "env": { 11 | "browser": false, 12 | "es6": true, 13 | "node": true, 14 | "mocha": true, 15 | "jest/globals": true 16 | }, 17 | "parserOptions": { 18 | "sourceType": "module", 19 | "ecmaFeatures": { 20 | "jsx": true 21 | } 22 | }, 23 | "globals": { 24 | "wp": true, 25 | "wpApiSettings": true, 26 | "window": true, 27 | "document": true 28 | }, 29 | "plugins": ["react", "jsx-a11y", "jest"], 30 | "settings": { 31 | "react": { 32 | "pragma": "wp" 33 | } 34 | }, 35 | "rules": { 36 | "array-bracket-spacing": ["error", "always"], 37 | "brace-style": ["error", "1tbs"], 38 | "camelcase": ["error", { "properties": "never" }], 39 | "comma-dangle": ["error", "always-multiline"], 40 | "comma-spacing": "error", 41 | "comma-style": "error", 42 | "computed-property-spacing": ["error", "always"], 43 | "constructor-super": "error", 44 | "dot-notation": "error", 45 | "eol-last": "error", 46 | "eqeqeq": "error", 47 | "func-call-spacing": "error", 48 | "indent": ["error", "tab", { "SwitchCase": 1 }], 49 | "jsx-a11y/label-has-for": [ 50 | "error", 51 | { 52 | "required": "id" 53 | } 54 | ], 55 | "jsx-a11y/media-has-caption": "off", 56 | "jsx-a11y/no-noninteractive-tabindex": "off", 57 | "jsx-a11y/role-has-required-aria-props": "off", 58 | "jsx-quotes": "error", 59 | "key-spacing": "error", 60 | "keyword-spacing": "error", 61 | "lines-around-comment": "off", 62 | "no-alert": "error", 63 | "no-bitwise": "error", 64 | "no-caller": "error", 65 | "no-console": "error", 66 | "no-const-assign": "error", 67 | "no-debugger": "error", 68 | "no-dupe-args": "error", 69 | "no-dupe-class-members": "error", 70 | "no-dupe-keys": "error", 71 | "no-duplicate-case": "error", 72 | "no-duplicate-imports": "error", 73 | "no-else-return": "error", 74 | "no-eval": "error", 75 | "no-extra-semi": "error", 76 | "no-fallthrough": "error", 77 | "no-lonely-if": "error", 78 | "no-mixed-operators": "error", 79 | "no-mixed-spaces-and-tabs": "error", 80 | "no-multiple-empty-lines": ["error", { "max": 1 }], 81 | "no-multi-spaces": "error", 82 | "no-multi-str": "off", 83 | "no-negated-in-lhs": "error", 84 | "no-nested-ternary": "error", 85 | "no-redeclare": "error", 86 | "no-restricted-syntax": [ 87 | "error", 88 | { 89 | "selector": 90 | "ImportDeclaration[source.value=/^@wordpress\\u002F.+\\u002F/]", 91 | "message": "Path access on WordPress dependencies is not allowed." 92 | }, 93 | { 94 | "selector": "ImportDeclaration[source.value=/^blocks$/]", 95 | "message": "Use @wordpress/blocks as import path instead." 96 | }, 97 | { 98 | "selector": "ImportDeclaration[source.value=/^components$/]", 99 | "message": "Use @wordpress/components as import path instead." 100 | }, 101 | { 102 | "selector": "ImportDeclaration[source.value=/^date$/]", 103 | "message": "Use @wordpress/date as import path instead." 104 | }, 105 | { 106 | "selector": "ImportDeclaration[source.value=/^editor$/]", 107 | "message": "Use @wordpress/editor as import path instead." 108 | }, 109 | { 110 | "selector": "ImportDeclaration[source.value=/^element$/]", 111 | "message": "Use @wordpress/element as import path instead." 112 | }, 113 | { 114 | "selector": "ImportDeclaration[source.value=/^i18n$/]", 115 | "message": "Use @wordpress/i18n as import path instead." 116 | }, 117 | { 118 | "selector": "ImportDeclaration[source.value=/^data$/]", 119 | "message": "Use @wordpress/data as import path instead." 120 | }, 121 | { 122 | "selector": "ImportDeclaration[source.value=/^utils$/]", 123 | "message": "Use @wordpress/utils as import path instead." 124 | }, 125 | { 126 | "selector": 127 | "CallExpression[callee.name=/^__|_n|_x$/]:not([arguments.0.type=/^Literal|BinaryExpression$/])", 128 | "message": "Translate function arguments must be string literals." 129 | }, 130 | { 131 | "selector": 132 | "CallExpression[callee.name=/^_n|_x$/]:not([arguments.1.type=/^Literal|BinaryExpression$/])", 133 | "message": "Translate function arguments must be string literals." 134 | }, 135 | { 136 | "selector": 137 | "CallExpression[callee.name=_nx]:not([arguments.2.type=/^Literal|BinaryExpression$/])", 138 | "message": "Translate function arguments must be string literals." 139 | } 140 | ], 141 | "no-shadow": "error", 142 | "no-undef": "error", 143 | "no-undef-init": "error", 144 | "no-unreachable": "error", 145 | "no-unsafe-negation": "error", 146 | "no-unused-expressions": "error", 147 | "no-unused-vars": "error", 148 | "no-useless-computed-key": "error", 149 | "no-useless-constructor": "error", 150 | "no-useless-return": "error", 151 | "no-var": "error", 152 | "no-whitespace-before-property": "error", 153 | "object-curly-spacing": ["error", "always"], 154 | "padded-blocks": ["error", "never"], 155 | "prefer-const": "error", 156 | "quote-props": ["error", "as-needed"], 157 | "react/display-name": "off", 158 | "react/jsx-curly-spacing": [ 159 | "error", 160 | { 161 | "when": "always", 162 | "children": true 163 | } 164 | ], 165 | "react/jsx-equals-spacing": "error", 166 | "react/jsx-indent": ["error", "tab"], 167 | "react/jsx-indent-props": ["error", "tab"], 168 | "react/jsx-key": "error", 169 | "react/jsx-tag-spacing": "error", 170 | "react/no-children-prop": "off", 171 | "react/no-find-dom-node": "warn", 172 | "react/prop-types": "off", 173 | "semi": "error", 174 | "semi-spacing": "error", 175 | "space-before-blocks": ["error", "always"], 176 | "space-before-function-paren": ["error", "never"], 177 | "space-in-parens": ["error", "always"], 178 | "space-infix-ops": ["error", { "int32Hint": false }], 179 | "space-unary-ops": [ 180 | "error", 181 | { 182 | "overrides": { 183 | "!": true 184 | } 185 | } 186 | ], 187 | "template-curly-spacing": ["error", "always"], 188 | "valid-jsdoc": ["error", { "requireReturn": false }], 189 | "valid-typeof": "error", 190 | "yoda": "off" 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .DS_Store/node_modules 3 | .DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 👉 WordPress Editor block 2 | 3 | ## "Columns" core block fork, a "Container" block with some options to build layouts : 4 | - Columns structure 5 | - Spacing (paddings) 6 | - Backgrounds : 7 | - Image (size, position, repeat) 8 | - Color 9 | 10 | ## :warning: Please note this block is still in development, that's mean it could be broken frequently ! 11 | 12 | ## Known issues : 13 | - It's not easy to focus the container block and access options. This block is based on "Columns" core block, which is itself not easy to use. Tip : focus the inner "Column" block and go up to the parent Container with the up arrow key. 14 | 15 | ## Screenshots 16 | 17 | ## Editor view: 18 | ![Editor view](https://github.com/MarieComet/WP-container-block/blob/master/editor.png "Editor view") 19 | 20 | ## Front view : 21 | ![Front view](https://github.com/MarieComet/WP-container-block/blob/master/front.png "Front view") 22 | 23 | ## Columns structures availables : 24 | ![Possibles structures](https://github.com/MarieComet/WP-container-block/blob/master/structure.png "Structures") 25 | 26 | ## Inner containers : 27 | ![Inner containers](https://github.com/MarieComet/WP-container-block/blob/master/examples.png "Inner containers") 28 | 29 | This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block). 30 | 31 | Below you will find some information on how to run scripts. 32 | 33 | >You can find the most recent version of this guide [here](https://github.com/ahmadawais/create-guten-block). 34 | 35 | ## 👉 `npm start` 36 | - Use to compile and run the block in development mode. 37 | - Watches for any changes and reports back any errors in your code. 38 | 39 | ## 👉 `npm run build` 40 | - Use to build production code for your block inside `dist` folder. 41 | - Runs once and reports back the gzip file sizes of the produced code. 42 | 43 | ## 👉 `npm run eject` 44 | - Use to eject your plugin out of `create-guten-block`. 45 | - Provides all the configurations so you can customize the project as you want. 46 | - It's a one-way street, `eject` and you have to maintain everything yourself. 47 | - You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own. 48 | 49 | --- 50 | 51 | ###### Feel free to tweet and say 👋 at me [@MrAhmadAwais](https://twitter.com/mrahmadawais/) 52 | 53 | [![npm](https://img.shields.io/npm/v/create-guten-block.svg?style=flat-square)](https://www.npmjs.com/package/create-guten-block) [![npm](https://img.shields.io/npm/dt/create-guten-block.svg?style=flat-square&label=downloads)](https://www.npmjs.com/package/create-guten-block) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/ahmadawais/create-guten-block) [![Tweet for help](https://img.shields.io/twitter/follow/mrahmadawais.svg?style=social&label=Tweet%20@MrAhmadAwais)](https://twitter.com/mrahmadawais/) [![GitHub stars](https://img.shields.io/github/stars/ahmadawais/create-guten-block.svg?style=social&label=Stars)](https://github.com/ahmadawais/create-guten-block/stargazers) [![GitHub followers](https://img.shields.io/github/followers/ahmadawais.svg?style=social&label=Follow)](https://github.com/ahmadawais?tab=followers) 54 | -------------------------------------------------------------------------------- /dist/blocks.build.js: -------------------------------------------------------------------------------- 1 | !function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=50)}([function(t,e,n){var r=n(28),o="object"==typeof self&&self&&self.Object===Object&&self,a=r||o||Function("return this")();t.exports=a},function(t,e){function n(t){return null!=t&&"object"==typeof t}t.exports=n},function(t,e){var n=Array.isArray;t.exports=n},function(t,e,n){function r(t,e){var n=a(t,e);return o(n)?n:void 0}var o=n(71),a=n(74);t.exports=r},function(t,e){function n(t){var e=typeof t;return null!=t&&("object"==e||"function"==e)}t.exports=n},function(t,e,n){function r(t){return null==t?void 0===t?i:c:l&&l in Object(t)?a(t):u(t)}var o=n(6),a=n(60),u=n(61),c="[object Null]",i="[object Undefined]",l=o?o.toStringTag:void 0;t.exports=r},function(t,e,n){var r=n(0),o=r.Symbol;t.exports=o},function(t,e,n){function r(t,e,n,r){var u=!n;n||(n={});for(var c=-1,i=e.length;++c-1&&t%1==0&&t<=r}var r=9007199254740991;t.exports=n},function(t,e){function n(t,e){return function(n){return t(e(n))}}t.exports=n},function(t,e,n){function r(t){return null!=t&&a(t.length)&&!o(t)}var o=n(32),a=n(42);t.exports=r},function(t,e,n){function r(t){return u(t)?o(t,!0):a(t)}var o=n(39),a=n(109),u=n(44);t.exports=r},function(t,e){function n(){return[]}t.exports=n},function(t,e,n){var r=n(22),o=n(23),a=n(21),u=n(46),c=Object.getOwnPropertySymbols,i=c?function(t){for(var e=[];t;)r(e,a(t)),t=o(t);return e}:u;t.exports=i},function(t,e,n){function r(t,e,n){var r=e(t);return a(t)?r:o(r,n(t))}var o=n(22),a=n(2);t.exports=r},function(t,e,n){function r(t){return o(t,u,a)}var o=n(48),a=n(47),u=n(45);t.exports=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var r=(n(51),n(153));n.n(r)},function(t,e,n){"use strict";var r=n(52),o=(n.n(r),n(53)),a=(n.n(o),n(54)),u=n.n(a),c=n(62),i=n.n(c),l=n(91),p=n.n(l),f=n(150),s=n.n(f),v=n(151),b=n.n(v),d=wp.i18n,g=d.__,m=d.sprintf,h=wp.components,y=h.PanelBody,x=h.RangeControl,j=(h.PanelColor,h.ColorPalette),w=h.SelectControl,_=h.IconButton,k=h.BaseControl,O=wp.element.Fragment,E=wp.blocks,A=E.createBlock,S=E.registerBlockType,C=wp.editor,P=C.InspectorControls,T=C.InnerBlocks,I=C.MediaUpload,z=["cgb/column"],B=b()(function(t){return u()(t,function(){return["cgb/column"]})});S("cgb/columns",{title:m(g("%1$s (%2$s)"),g("Container"),g("beta")),icon:wp.element.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},wp.element.createElement("path",{fill:"none",d:"M0 0h24v24H0V0z"}),wp.element.createElement("path",{d:"M21 4H3L2 5v14l1 1h18l1-1V5zM6.4 18H4V6h2.4zm9.7 0H8V6h8zm3.9 0h-2.3l.1-12H20z"})),category:"layout",attributes:{columns:{type:"number",default:1},backgroundColor:{type:"string",selector:".wp-block-cgb-columns"},columnsStructure:{type:"string",default:"100"},structureList:{type:"array"},paddingUnit:{type:"string",default:"px"},paddingTop:{type:"number",default:0},paddingRight:{type:"number",default:0},paddingBottom:{type:"number",default:0},paddingLeft:{type:"number",default:0},backgroundImage:{type:"string",selector:".wp-block-cgb-columns"},containerImgID:{type:"number"},backgroundPosition:{type:"string",selector:".wp-block-cgb-columns",default:"center"},backgroundSize:{type:"string",selector:".wp-block-cgb-columns",default:"cover"},backgroundRepeat:{type:"string",selector:".wp-block-cgb-columns",default:"no-repeat"}},description:g("Add a block that displays content in multiple columns, then add whatever content blocks you\u2019d like."),supports:{align:["wide","full"]},deprecated:[{attributes:{columns:{type:"number",default:2}},isEligible:function(t,e){return e.some(i()(["attributes","layout"]))},migrate:function(t,e){function n(t){return Object.assign({},t,{attributes:p()(t.attributes,["layout"])})}return[t,e.reduce(function(t,e){var r=e.attributes.layout,o=void 0,a=void 0;return o=r&&(a=r.match(/^column-(\d+)$/))?Number(a[1])-1:0,t[o]||(t[o]=[]),t[o].push(n(e)),t},[]).map(function(t){return A("cgb/column",{},t)})]},save:function(t){var e=t.attributes,n=e.columns;return wp.element.createElement("div",{className:"has-"+n+"-columns"},wp.element.createElement(T.Content,null))}}],edit:function(t){var e=t.attributes,n=t.setAttributes,r=t.className,o=e.columns,a=e.backgroundColor,u=e.columnsStructure,c=e.structureList,i=e.backgroundImage,l=e.containerImgID,p=e.backgroundPosition,f=e.backgroundSize,v=e.backgroundRepeat,b=e.paddingUnit,d=e.paddingTop,m=e.paddingRight,h=e.paddingBottom,E=e.paddingLeft,A=s()(r,"has-"+o+"-columns",u,{"bg-multiply":i&&i.length&&a&&a.length}),S=function(t){n({columns:t});var e=[{value:"100",label:"100"}];switch(t){case 1:e=[{value:"100",label:"100"}];break;case 2:e=[{value:"half",label:"50-50"},{value:"one-third",label:"33-66"},{value:"third-one",label:"66-33"}];break;case 3:e=[{value:"thirds",label:"33-33-33"},{value:"quart-quart-half",label:"25-25-50"},{value:"half-quart-quart",label:"50-25-25"},{value:"quart-half-quart",label:"25-50-25"}];break;default:e=[{value:"100",label:"100"}]}n({structureList:e,columnsStructure:u||e[0].value})},C=function(t){n({containerImgID:t.id,backgroundImage:t.url})},R=function(){n({containerImgID:null,backgroundImage:null})},L={backgroundColor:a,backgroundImage:i?"url("+i+")":void 0,backgroundPosition:p,backgroundSize:f,backgroundRepeat:v,paddingTop:d+b,paddingRight:m+b,paddingBottom:h+b,paddingLeft:E+b};return wp.element.createElement(O,null,wp.element.createElement(P,null,wp.element.createElement(y,null,wp.element.createElement(x,{label:g("Columns"),value:o,onChange:S,min:1,max:6}),wp.element.createElement(w,{label:g("Structure"),value:u||"100",onChange:function(t){n({columnsStructure:t})},options:c})),wp.element.createElement(y,{title:g("Spacing"),initialOpen:!1},wp.element.createElement(w,{label:g("Padding unit"),value:b,onChange:function(t){n({paddingUnit:t})},options:[{value:"px",label:g("Px")},{value:"em",label:g("Em")},{value:"%",label:g("Percent")}]}),wp.element.createElement(k,{id:"paddings",label:"Padding"},wp.element.createElement("label",{for:"padding-top"},g("Top")),wp.element.createElement("input",{id:"padding-top",name:"paddingTop",className:"input-inline",type:"number",min:"0",value:d,onChange:function(t){n({paddingTop:t.target.value})}}),wp.element.createElement("label",{for:"padding-right"},g("Right")),wp.element.createElement("input",{id:"padding-right",name:"paddingRight",className:"input-inline",type:"number",min:"0",value:m,onChange:function(t){n({paddingRight:t.target.value})}}),wp.element.createElement("label",{for:"padding-bottom"},g("Bottom")),wp.element.createElement("input",{id:"padding-bottom",name:"paddingBottom",className:"input-inline",type:"number",min:"0",value:h,onChange:function(t){n({paddingBottom:t.target.value})}}),wp.element.createElement("label",{for:"padding-left"},g("Left")),wp.element.createElement("input",{id:"padding-left",name:"paddingLeft",className:"input-inline",type:"number",min:"0",value:E,onChange:function(t){n({paddingLeft:t.target.value})}}))),wp.element.createElement(y,{title:g("Background Options"),initialOpen:!1},wp.element.createElement("p",null,g("Select a background color:")),wp.element.createElement(j,{label:g("Background color"),value:a,onChange:function(t){n({backgroundColor:t})}}),wp.element.createElement("p",null,g("Select a background image:")),wp.element.createElement(I,{onSelect:C,type:"image",value:l,render:function(t){var e=t.open;return wp.element.createElement("div",null,wp.element.createElement(_,{className:"cgb-container-inspector-media",label:g("Edit image"),icon:"format-image",onClick:e},g("Select Image")),i&&!!i.length&&wp.element.createElement(_,{className:"cgb-container-inspector-media",label:g("Remove Image"),icon:"dismiss",onClick:R},g("Remove")))}}),i&&!!i.length&&wp.element.createElement("div",null,wp.element.createElement("div",null,wp.element.createElement(w,{label:g("Background position"),value:p,onChange:function(t){n({backgroundPosition:t})},options:[{value:"center",label:g("Center")},{value:"left",label:g("Left")},{value:"right",label:g("Right")},{value:"bottom",label:g("Bottom")},{value:"top",label:g("Top")}]})),wp.element.createElement("div",null,wp.element.createElement(w,{label:g("Background Size"),value:f,onChange:function(t){n({backgroundSize:t})},options:[{value:"cover",label:g("Cover")},{value:"contain",label:g("Contain")}]})),wp.element.createElement("div",null,wp.element.createElement(w,{label:g("Background Repeat"),value:v,onChange:function(t){n({backgroundRepeat:t})},options:[{value:"no-repeat",label:g("No repeat")},{value:"repeat",label:g("Repeat")},{value:"repeat-x",label:g("Repeat x")},{value:"repeat-y",label:g("Repeat y")}]}))))),wp.element.createElement("div",{className:A,style:L},wp.element.createElement(T,{template:B(o),templateLock:"all",allowedBlocks:z})))},save:function(t){var e=t.attributes,n=t.className,r=e.columns,o=e.columnsStructure,a=e.backgroundColor,u=e.backgroundImage,c=e.backgroundPosition,i=e.backgroundSize,l=e.backgroundRepeat,p=e.paddingUnit,f=e.paddingTop,v=e.paddingRight,b=e.paddingBottom,d=e.paddingLeft,g={backgroundColor:a,backgroundImage:u?"url("+u+")":void 0,backgroundPosition:c,backgroundSize:i,backgroundRepeat:l,paddingTop:f+p,paddingRight:v+p,paddingBottom:b+p,paddingLeft:d+p},m=s()(n,"has-"+r+"-columns",o,{"bg-multiply":u&&u.length&&a&&a.length});return wp.element.createElement("div",{className:m,style:g},wp.element.createElement(T.Content,null))}})},function(t,e){},function(t,e){},function(t,e,n){function r(t,e){if((t=u(t))<1||t>c)return[];var n=i,r=l(t,i);e=a(e),t-=i;for(var p=o(r,e);++n-1}var o=n(11);t.exports=r},function(t,e,n){function r(t,e){var n=this.__data__,r=o(n,t);return r<0?(++this.size,n.push([t,e])):n[r][1]=e,this}var o=n(11);t.exports=r},function(t,e,n){function r(t){var e=o(this,t).delete(t);return this.size-=e?1:0,e}var o=n(12);t.exports=r},function(t,e){function n(t){var e=typeof t;return"string"==e||"number"==e||"symbol"==e||"boolean"==e?"__proto__"!==t:null===t}t.exports=n},function(t,e,n){function r(t){return o(this,t).get(t)}var o=n(12);t.exports=r},function(t,e,n){function r(t){return o(this,t).has(t)}var o=n(12);t.exports=r},function(t,e,n){function r(t,e){var n=o(this,t),r=n.size;return n.set(t,e),this.size+=n.size==r?0:1,this}var o=n(12);t.exports=r},function(t,e,n){function r(t){return null==t?"":o(t)}var o=n(90);t.exports=r},function(t,e,n){function r(t){if("string"==typeof t)return t;if(u(t))return a(t,r)+"";if(c(t))return p?p.call(t):"";var e=t+"";return"0"==e&&1/t==-i?"-0":e}var o=n(6),a=n(35),u=n(2),c=n(8),i=1/0,l=o?o.prototype:void 0,p=l?l.toString:void 0;t.exports=r},function(t,e,n){var r=n(35),o=n(92),a=n(134),u=n(13),c=n(7),i=n(138),l=n(140),p=n(49),f=l(function(t,e){var n={};if(null==t)return n;var l=!1;e=r(e,function(e){return e=u(e,t),l||(l=e.length>1),e}),c(t,p(t),n),l&&(n=o(n,7,i));for(var f=e.length;f--;)a(n,e[f]);return n});t.exports=f},function(t,e,n){function r(t,e,n,z,B,R){var L,M=e&O,N=e&E,U=e&A;if(n&&(L=B?n(t,z,B,R):n(t)),void 0!==L)return L;if(!w(t))return t;var F=y(t);if(F){if(L=g(t),!M)return p(t,L)}else{var $=d(t),D=$==C||$==P;if(x(t))return l(t,M);if($==T||$==S||D&&!B){if(L=N||D?{}:h(t),!M)return N?s(t,i(L,t)):f(t,c(L,t))}else{if(!I[$])return B?t:{};L=m(t,$,M)}}R||(R=new o);var V=R.get(t);if(V)return V;if(R.set(t,L),_(t))return t.forEach(function(o){L.add(r(o,e,n,o,t,R))}),L;if(j(t))return t.forEach(function(o,a){L.set(a,r(o,e,n,a,t,R))}),L;var q=U?N?b:v:N?keysIn:k,H=F?void 0:q(t);return a(H||t,function(o,a){H&&(a=o,o=t[a]),u(L,a,r(o,e,n,a,t,R))}),L}var o=n(93),a=n(99),u=n(36),c=n(100),i=n(108),l=n(111),p=n(112),f=n(113),s=n(115),v=n(116),b=n(49),d=n(24),g=n(121),m=n(122),h=n(128),y=n(2),x=n(41),j=n(130),w=n(4),_=n(132),k=n(16),O=1,E=2,A=4,S="[object Arguments]",C="[object Function]",P="[object GeneratorFunction]",T="[object Object]",I={};I[S]=I["[object Array]"]=I["[object ArrayBuffer]"]=I["[object DataView]"]=I["[object Boolean]"]=I["[object Date]"]=I["[object Float32Array]"]=I["[object Float64Array]"]=I["[object Int8Array]"]=I["[object Int16Array]"]=I["[object Int32Array]"]=I["[object Map]"]=I["[object Number]"]=I[T]=I["[object RegExp]"]=I["[object Set]"]=I["[object String]"]=I["[object Symbol]"]=I["[object Uint8Array]"]=I["[object Uint8ClampedArray]"]=I["[object Uint16Array]"]=I["[object Uint32Array]"]=!0,I["[object Error]"]=I[C]=I["[object WeakMap]"]=!1,t.exports=r},function(t,e,n){function r(t){var e=this.__data__=new o(t);this.size=e.size}var o=n(10),a=n(94),u=n(95),c=n(96),i=n(97),l=n(98);r.prototype.clear=a,r.prototype.delete=u,r.prototype.get=c,r.prototype.has=i,r.prototype.set=l,t.exports=r},function(t,e,n){function r(){this.__data__=new o,this.size=0}var o=n(10);t.exports=r},function(t,e){function n(t){var e=this.__data__,n=e.delete(t);return this.size=e.size,n}t.exports=n},function(t,e){function n(t){return this.__data__.get(t)}t.exports=n},function(t,e){function n(t){return this.__data__.has(t)}t.exports=n},function(t,e,n){function r(t,e){var n=this.__data__;if(n instanceof o){var r=n.__data__;if(!a||r.length-1&&t%1==0&&to?0:o+e),n=n>o?o:n,n<0&&(n+=o),o=e>n?0:n-e>>>0,e>>>=0;for(var a=Array(o);++r0&&n(p)?e>1?r(p,e-1,n,u,c):o(c,p):u||(c[c.length]=p)}return c}var o=n(22),a=n(143);t.exports=r},function(t,e,n){function r(t){return u(t)||a(t)||!!(c&&t&&t[c])}var o=n(6),a=n(40),u=n(2),c=o?o.isConcatSpreadable:void 0;t.exports=r},function(t,e,n){function r(t,e,n){return e=a(void 0===e?t.length-1:e,0),function(){for(var r=arguments,u=-1,c=a(r.length-e,0),i=Array(c);++u0){if(++e>=r)return arguments[0]}else e=0;return t.apply(void 0,arguments)}}var r=800,o=16,a=Date.now;t.exports=n},function(t,e,n){var r,o;!function(){"use strict";function n(){for(var t=[],e=0;e1)for(var n=1;n.editor-block-list__block-edit,.editor-block-list__layout .editor-block-list__block[data-type="cgb/columns"]>.editor-block-list__block-edit{margin-top:0;margin-bottom:0;padding-top:0.1px;padding-bottom:0.1px}.wp-block-cgb-columns{display:block}.wp-block-cgb-columns>.editor-inner-blocks>.editor-block-list__layout{display:-ms-flexbox;display:flex}.wp-block-cgb-columns>.editor-inner-blocks>.editor-block-list__layout>[data-type="cgb/column"]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:0}.wp-block-cgb-columns>.editor-inner-blocks>.editor-block-list__layout>[data-type="cgb/column"] .editor-block-list__block-edit{-ms-flex-preferred-size:100%;flex-basis:100%}input.input-inline{display:block} 2 | -------------------------------------------------------------------------------- /dist/blocks.style.build.css: -------------------------------------------------------------------------------- 1 | .wp-block-cgb-columns{display:-ms-flexbox;display:flex}.wp-block-cgb-columns.one-third>.wp-block-cgb-column:nth-child(2),.wp-block-cgb-columns.one-third>.editor-inner-blocks .editor-block-list__block:nth-child(2),.wp-block-cgb-columns.third-one>.wp-block-cgb-column:nth-child(1),.wp-block-cgb-columns.third-one>.editor-inner-blocks .editor-block-list__block:nth-child(1),.wp-block-cgb-columns.quart-quart-half>.wp-block-cgb-column:nth-child(3),.wp-block-cgb-columns.quart-quart-half>.editor-inner-blocks .editor-block-list__block:nth-child(3),.wp-block-cgb-columns.half-quart-quart>.wp-block-cgb-column:nth-child(1),.wp-block-cgb-columns.half-quart-quart>.editor-inner-blocks .editor-block-list__block:nth-child(1),.wp-block-cgb-columns.quart-half-quart>.wp-block-cgb-column:nth-child(2),.wp-block-cgb-columns.quart-half-quart>.editor-inner-blocks .editor-block-list__block:nth-child(2){-ms-flex:2;flex:2}.wp-block-cgb-column{-ms-flex:1;flex:1}@media (max-width: 768px){.wp-block-cgb-columns{display:block}}.wp-block-cgb-columns.bg-multiply{background-blend-mode:multiply} 2 | -------------------------------------------------------------------------------- /editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarieComet/WP-container-block/0633719055f4b49b2841fba426f817a264ddbece/editor.png -------------------------------------------------------------------------------- /examples.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarieComet/WP-container-block/0633719055f4b49b2841fba426f817a264ddbece/examples.png -------------------------------------------------------------------------------- /front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarieComet/WP-container-block/0633719055f4b49b2841fba426f817a264ddbece/front.png -------------------------------------------------------------------------------- /nano.save: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MarieComet/WP-container-block/0633719055f4b49b2841fba426f817a264ddbece/nano.save -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "columns-block-cgb-guten-block", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "cgb-scripts start", 7 | "build": "cgb-scripts build", 8 | "eject": "cgb-scripts eject" 9 | }, 10 | "dependencies": { 11 | "cgb-scripts": "1.9.8", 12 | "classnames": "^2.2.6", 13 | "memize": "^1.0.5" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /plugin.php: -------------------------------------------------------------------------------- 1 | ; 21 | }, 22 | 23 | save() { 24 | return
; 25 | }, 26 | } ); 27 | -------------------------------------------------------------------------------- /src/columns/editor.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * #.# Editor Styles 3 | * 4 | * CSS for just Backend enqueued after style.scss 5 | * which makes it higher in priority. 6 | */ 7 | 8 | $parent-block-padding: 28px; // padding of top level blocks, should be larger than $block-padding, otherwise a user can't select the parent from a child 9 | $block-padding: 14px; // padding of nested blocks 10 | $block-spacing: 4px; // vertical space between blocks 11 | $block-side-ui-width: 28px; 12 | $block-side-ui-clearance: 2px; 13 | $block-side-ui-padding: $block-side-ui-width + $block-side-ui-clearance; 14 | 15 | // These margins make sure that nested blocks stack/overlay with the parent block chrome 16 | // This is sort of an experiment at making sure the editor looks as much like the end result as possible 17 | // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere 18 | // When using CSS grid, margins do not collapse on the container. 19 | .wp-block-cgb-columns { 20 | margin: 1.5rem 0; 21 | } 22 | .wp-block-cgb-columns .editor-block-list__layout { 23 | margin-left: 0; 24 | margin-right: 0; 25 | 26 | &:first-child { 27 | margin-left: -$block-padding; 28 | } 29 | &:last-child { 30 | margin-right: -$block-padding; 31 | } 32 | 33 | // This max-width is used to constrain the main editor column, it should not cascade into columns 34 | .editor-block-list__block { 35 | max-width: none; 36 | flex: 1; 37 | } 38 | } 39 | 40 | // Fullwide: show margin left/right to ensure there's room for the side UI 41 | // This is not a 1:1 preview with the front-end where these margins would presumably be zero 42 | // @todo this could be revisited, by for example showing this margin only when the parent block was selected first 43 | // Then at least an unselected columns block would be an accurate preview 44 | .editor-block-list__block[data-align="full"] .wp-block-cgb-columns .editor-block-list__layout { 45 | &:first-child { 46 | margin-left: $block-side-ui-padding; 47 | } 48 | &:last-child { 49 | margin-right: $block-side-ui-padding; 50 | } 51 | } 52 | 53 | // This block has flex container children. Flex container margins do not collapse: https://www.w3.org/TR/css-flexbox-1/#flex-containers. 54 | // Therefore, let's at least not add any additional margins here. 55 | // The goal is for the editor to look more like the front-end. 56 | .editor-block-list__layout .editor-block-list__block[data-type="cgb/columns"] > .editor-block-list__block-edit, 57 | .editor-block-list__layout .editor-block-list__block[data-type="cgb/columns"] > .editor-block-list__block-edit { 58 | margin-top: 0; 59 | margin-bottom: 0; 60 | 61 | // This uncollapses margins on this parent container. 62 | padding-top: 0.1px; 63 | padding-bottom: 0.1px; 64 | } 65 | 66 | .wp-block-cgb-columns { 67 | display: block; 68 | 69 | > .editor-inner-blocks > .editor-block-list__layout { 70 | display: flex; 71 | 72 | > [data-type="cgb/column"] { 73 | display: flex; 74 | flex-direction: column; 75 | width: 0; 76 | 77 | .editor-block-list__block-edit { 78 | flex-basis: 100%; 79 | } 80 | } 81 | } 82 | } 83 | input.input-inline { 84 | display: block; 85 | } 86 | -------------------------------------------------------------------------------- /src/columns/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * BLOCK: columns-block 3 | * 4 | * Registering a basic block with Gutenberg. 5 | * Simple block, renders and saves the same content without any interactivity. 6 | */ 7 | 8 | // Import CSS. 9 | import './style.scss'; 10 | import './editor.scss'; 11 | 12 | /** 13 | * External dependencies 14 | */ 15 | import times from 'lodash/times'; 16 | import property from 'lodash/property'; 17 | import omit from 'lodash/omit'; 18 | import classnames from 'classnames'; 19 | import memoize from 'memize'; 20 | 21 | /** 22 | * WordPress dependencies 23 | */ 24 | const { __, sprintf } = wp.i18n; 25 | const { PanelBody, RangeControl, PanelColor, ColorPalette, SelectControl, IconButton, BaseControl } = wp.components; 26 | const { Fragment } = wp.element; 27 | const { createBlock, registerBlockType } = wp.blocks; 28 | const { InspectorControls, InnerBlocks, MediaUpload } = wp.editor; 29 | 30 | /** 31 | * Allowed blocks constant is passed to InnerBlocks precisely as specified here. 32 | * The contents of the array should never change. 33 | * The array should contain the name of each block that is allowed. 34 | * In columns block, the only block we allow is 'core/column'. 35 | * 36 | * @constant 37 | * @type {string[]} 38 | */ 39 | const ALLOWED_BLOCKS = [ 'cgb/column' ]; 40 | 41 | /** 42 | * Returns the layouts configuration for a given number of columns. 43 | * 44 | * @param {number} columns Number of columns. 45 | * 46 | * @return {Object[]} Columns layout configuration. 47 | */ 48 | const getColumnsTemplate = memoize( ( columns ) => { 49 | return times( columns, () => [ 'cgb/column' ] ); 50 | } ); 51 | 52 | 53 | registerBlockType( 'cgb/columns', { 54 | title: sprintf( 55 | /* translators: Block title modifier */ 56 | __( '%1$s (%2$s)' ), 57 | __( 'Container' ), 58 | __( 'beta' ) 59 | ), 60 | 61 | icon: 62 | 63 | 64 | , 65 | 66 | category: 'layout', 67 | 68 | attributes: { 69 | columns: { 70 | type: 'number', 71 | default: 1, 72 | }, 73 | backgroundColor: { 74 | type: 'string', 75 | selector: '.wp-block-cgb-columns', 76 | }, 77 | columnsStructure: { 78 | type: 'string', 79 | default: '100', 80 | }, 81 | structureList: { 82 | type: 'array' 83 | }, 84 | paddingUnit: { 85 | type: 'string', 86 | default: 'px', 87 | }, 88 | paddingTop: { 89 | type: 'number', 90 | default: 0, 91 | }, 92 | paddingRight: { 93 | type: 'number', 94 | default: 0, 95 | }, 96 | paddingBottom: { 97 | type: 'number', 98 | default: 0, 99 | }, 100 | paddingLeft: { 101 | type: 'number', 102 | default: 0, 103 | }, 104 | backgroundImage: { 105 | type: 'string', 106 | selector: '.wp-block-cgb-columns', 107 | }, 108 | containerImgID: { 109 | type: 'number', 110 | }, 111 | backgroundPosition: { 112 | type: 'string', 113 | selector: '.wp-block-cgb-columns', 114 | default: 'center', 115 | }, 116 | backgroundSize: { 117 | type: 'string', 118 | selector: '.wp-block-cgb-columns', 119 | default: 'cover', 120 | }, 121 | backgroundRepeat: { 122 | type: 'string', 123 | selector: '.wp-block-cgb-columns', 124 | default: 'no-repeat', 125 | }, 126 | }, 127 | 128 | description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ), 129 | 130 | supports: { 131 | align: [ 'wide', 'full' ], 132 | }, 133 | 134 | deprecated: [ 135 | { 136 | attributes: { 137 | columns: { 138 | type: 'number', 139 | default: 2, 140 | }, 141 | }, 142 | isEligible( attributes, innerBlocks ) { 143 | return innerBlocks.some( property( [ 'attributes', 'layout' ] ) ); 144 | }, 145 | migrate( attributes, innerBlocks ) { 146 | function withoutLayout( block ) { 147 | return { 148 | ...block, 149 | attributes: omit( block.attributes, [ 'layout' ] ), 150 | }; 151 | } 152 | 153 | const columns = innerBlocks.reduce( ( result, innerBlock ) => { 154 | const { layout } = innerBlock.attributes; 155 | 156 | let columnIndex, columnMatch; 157 | if ( layout && ( columnMatch = layout.match( /^column-(\d+)$/ ) ) ) { 158 | columnIndex = Number( columnMatch[ 1 ] ) - 1; 159 | } else { 160 | columnIndex = 0; 161 | } 162 | 163 | if ( ! result[ columnIndex ] ) { 164 | result[ columnIndex ] = []; 165 | } 166 | 167 | result[ columnIndex ].push( withoutLayout( innerBlock ) ); 168 | 169 | return result; 170 | }, [] ); 171 | 172 | const migratedInnerBlocks = columns.map( ( columnBlocks ) => ( 173 | createBlock( 'cgb/column', {}, columnBlocks ) 174 | ) ); 175 | 176 | return [ 177 | attributes, 178 | migratedInnerBlocks, 179 | ]; 180 | }, 181 | save( { attributes } ) { 182 | const { columns } = attributes; 183 | 184 | return ( 185 |
186 | 187 |
188 | ); 189 | }, 190 | }, 191 | ], 192 | 193 | edit( { attributes, setAttributes, className } ) { 194 | 195 | const { columns, backgroundColor, columnsStructure, structureList, backgroundImage, containerImgID, backgroundPosition, backgroundSize, backgroundRepeat, paddingUnit, paddingTop, paddingRight, paddingBottom, paddingLeft } = attributes; 196 | 197 | const classes = classnames( 198 | className, 199 | `has-${ columns }-columns`, 200 | columnsStructure, 201 | { 'bg-multiply' : backgroundImage && backgroundImage.length && backgroundColor && backgroundColor.length }, 202 | ); 203 | 204 | const updateStructureList = numberColumns => { 205 | 206 | setAttributes( { 207 | columns: numberColumns, 208 | } ); 209 | 210 | let structureList = [ { value: '100', 'label': '100'} ] 211 | 212 | switch (numberColumns) { 213 | case 1: structureList = [ { value: '100', 'label': '100'} ] 214 | break; 215 | case 2: 216 | structureList = [ 217 | { value: 'half', label: '50-50' }, 218 | { value: 'one-third', label: '33-66' }, 219 | { value: 'third-one', label: '66-33' }, 220 | ] 221 | break; 222 | case 3: 223 | structureList = [ 224 | { value: 'thirds', label: '33-33-33' }, 225 | { value: 'quart-quart-half', label: '25-25-50' }, 226 | { value: 'half-quart-quart', label: '50-25-25' }, 227 | { value: 'quart-half-quart', label: '25-50-25' }, 228 | ] 229 | break; 230 | default: 231 | structureList = [ { value: '100', 'label': '100'} ] 232 | } 233 | 234 | 235 | setAttributes( { 236 | structureList: structureList, 237 | columnsStructure: columnsStructure ? columnsStructure : structureList[0].value, 238 | } ); 239 | } 240 | 241 | const onSelectImage = img => { 242 | setAttributes( { 243 | containerImgID: img.id, 244 | backgroundImage: img.url, 245 | } ); 246 | }; 247 | 248 | const onRemoveImage = () => { 249 | setAttributes({ 250 | containerImgID: null, 251 | backgroundImage: null, 252 | }); 253 | } 254 | 255 | const divStyle = { 256 | backgroundColor: backgroundColor, 257 | backgroundImage: backgroundImage ? 'url(' + backgroundImage + ')' : undefined, 258 | backgroundPosition: backgroundPosition, 259 | backgroundSize: backgroundSize, 260 | backgroundRepeat: backgroundRepeat, 261 | paddingTop: paddingTop + paddingUnit, 262 | paddingRight: paddingRight + paddingUnit, 263 | paddingBottom: paddingBottom + paddingUnit, 264 | paddingLeft: paddingLeft + paddingUnit, 265 | } 266 | 267 | return ( 268 | 269 | 270 | 271 | 278 | { 282 | setAttributes( { columnsStructure: structureChoice } ) 283 | } } 284 | options={ structureList } 285 | /> 286 | 287 | 288 | { 292 | setAttributes( { paddingUnit: value } ) 293 | } } 294 | options={ [ 295 | { value: 'px', label: __( 'Px' ) }, 296 | { value: 'em', label: __( 'Em' ) }, 297 | { value: '%', label: __( 'Percent' ) }, 298 | ] } 299 | /> 300 | 304 | 305 | { 313 | setAttributes( { paddingTop: event.target.value } ) 314 | } } 315 | /> 316 | 317 | { 325 | setAttributes( { paddingRight: event.target.value } ) 326 | } } 327 | /> 328 | 329 | { 337 | setAttributes( { paddingBottom: event.target.value } ) 338 | } } 339 | /> 340 | 341 | { 349 | setAttributes( { paddingLeft: event.target.value } ) 350 | } } 351 | /> 352 | 353 | 354 | 355 | 356 |

{ __( 'Select a background color:' ) }

357 | { 361 | setAttributes( { 362 | backgroundColor: newBackgroundColor, 363 | } ); 364 | } } 365 | /> 366 |

{ __( 'Select a background image:' ) }

367 | ( 372 |
373 | 379 | { __( 'Select Image' ) } 380 | 381 | 382 | { backgroundImage && !! backgroundImage.length && ( 383 | 389 | { __( 'Remove' ) } 390 | 391 | ) } 392 |
393 | ) } 394 | > 395 | 396 | 397 | { backgroundImage && !! backgroundImage.length && ( 398 |
399 |
400 | { 404 | setAttributes( { backgroundPosition: bgPositionChoice } ) 405 | } } 406 | options={ [ 407 | { value: 'center', label: __( 'Center' ) }, 408 | { value: 'left', label: __( 'Left' ) }, 409 | { value: 'right', label: __( 'Right' ) }, 410 | { value: 'bottom', label: __( 'Bottom' ) }, 411 | { value: 'top', label: __( 'Top' ) }, 412 | ] } 413 | /> 414 |
415 |
416 | { 420 | setAttributes( { backgroundSize: bgSizeChoice } ) 421 | } } 422 | options={ [ 423 | { value: 'cover', label: __( 'Cover' ) }, 424 | { value: 'contain', label: __( 'Contain' ) }, 425 | ] } 426 | /> 427 |
428 |
429 | { 433 | setAttributes( { backgroundRepeat: bgRepeatChoice } ) 434 | } } 435 | options={ [ 436 | { value: 'no-repeat', label: __( 'No repeat' ) }, 437 | { value: 'repeat', label: __( 'Repeat' ) }, 438 | { value: 'repeat-x', label: __( 'Repeat x' ) }, 439 | { value: 'repeat-y', label: __( 'Repeat y' ) }, 440 | ] } 441 | /> 442 |
443 |
444 | ) } 445 | 446 | 447 |
449 | 453 |
454 | 455 | ); 456 | }, 457 | 458 | save( { attributes, className } ) { 459 | const { columns, columnsStructure, backgroundColor, backgroundImage, backgroundPosition, backgroundSize, backgroundRepeat, paddingUnit, paddingTop, paddingRight, paddingBottom, paddingLeft } = attributes; 460 | const divStyle = { 461 | backgroundColor: backgroundColor, 462 | backgroundImage: backgroundImage ? 'url(' + backgroundImage + ')' : undefined, 463 | backgroundPosition: backgroundPosition, 464 | backgroundSize: backgroundSize, 465 | backgroundRepeat: backgroundRepeat, 466 | paddingTop: paddingTop + paddingUnit, 467 | paddingRight: paddingRight + paddingUnit, 468 | paddingBottom: paddingBottom + paddingUnit, 469 | paddingLeft: paddingLeft + paddingUnit, 470 | } 471 | 472 | const classes = classnames( 473 | className, 474 | `has-${ columns }-columns`, 475 | columnsStructure, 476 | { 'bg-multiply' : backgroundImage && backgroundImage.length && backgroundColor && backgroundColor.length }, 477 | ); 478 | 479 | return ( 480 |
481 | 482 |
483 | ); 484 | }, 485 | } ); 486 | -------------------------------------------------------------------------------- /src/columns/style.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * #.# Styles 3 | * 4 | * CSS for both Frontend+Backend. 5 | */ 6 | 7 | .wp-block-cgb-columns { 8 | display: flex; 9 | } 10 | .wp-block-cgb-columns.one-third > .wp-block-cgb-column:nth-child(2), .wp-block-cgb-columns.one-third > .editor-inner-blocks .editor-block-list__block:nth-child(2), 11 | .wp-block-cgb-columns.third-one > .wp-block-cgb-column:nth-child(1), .wp-block-cgb-columns.third-one > .editor-inner-blocks .editor-block-list__block:nth-child(1), 12 | .wp-block-cgb-columns.quart-quart-half > .wp-block-cgb-column:nth-child(3), .wp-block-cgb-columns.quart-quart-half > .editor-inner-blocks .editor-block-list__block:nth-child(3), 13 | .wp-block-cgb-columns.half-quart-quart > .wp-block-cgb-column:nth-child(1), .wp-block-cgb-columns.half-quart-quart > .editor-inner-blocks .editor-block-list__block:nth-child(1), 14 | .wp-block-cgb-columns.quart-half-quart > .wp-block-cgb-column:nth-child(2), .wp-block-cgb-columns.quart-half-quart > .editor-inner-blocks .editor-block-list__block:nth-child(2), 15 | 16 | { 17 | flex: 2; 18 | } 19 | 20 | .wp-block-cgb-column { 21 | flex: 1; 22 | } 23 | @media(max-width: 768px) { 24 | .wp-block-cgb-columns { 25 | display: block; 26 | } 27 | } 28 | .wp-block-cgb-columns.bg-multiply { 29 | background-blend-mode: multiply; 30 | } 31 | -------------------------------------------------------------------------------- /src/common.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * #.# Common SCSS 3 | * 4 | * Can include things like variables and mixins 5 | * that are used across the project. 6 | */ 7 | 8 | // Colors. 9 | $black: rgb(41, 41, 41); 10 | $white: #f4f4f4; 11 | $gray: #dedede; 12 | $green: #bada55; 13 | $red: orangered; 14 | -------------------------------------------------------------------------------- /src/init.php: -------------------------------------------------------------------------------- 1 |