├── .editorconfig ├── .eslintrc.json ├── .github ├── example-page-content.txt └── screenshot-grid-block.png ├── .gitignore ├── LICENSE ├── README.md ├── blueprints └── blocks │ └── grid.yml ├── composer.json ├── index.css ├── index.js ├── index.php ├── package-lock.json ├── package.json ├── snippets └── blocks │ └── grid.php └── src ├── components └── Grid.vue ├── index.css └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | insert_final_newline = true 10 | trim_trailing_whitespace = true 11 | 12 | [*.php] 13 | indent_size = 4 14 | 15 | [*.md,*.txt] 16 | trim_trailing_whitespace = false 17 | insert_final_newline = false 18 | 19 | [composer.json] 20 | indent_size = 4 21 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true 5 | }, 6 | "extends": [ 7 | "eslint:recommended", 8 | "plugin:vue/recommended", 9 | "prettier" 10 | ], 11 | "parserOptions": { 12 | "ecmaVersion": 12, 13 | "sourceType": "module" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.github/example-page-content.txt: -------------------------------------------------------------------------------- 1 | Title: Grid-Block Example 2 | 3 | ---- 4 | 5 | Mygrid: [{"content":{"title":"My 1st Grid-Block","grid":"[{\"attrs\":[],\"columns\":[{\"blocks\":[{\"content\":{\"level\":\"h2\",\"text\":\"How it works?\"},\"id\":\"539d8633-b529-4eb9-a36e-571e8db88b57\",\"isHidden\":false,\"type\":\"heading\"},{\"content\":{\"text\":\"

Create a Blocks- or Layouts-Field in your Template. Put 'grid' to your Fieldsets: Done!<\\\/p>\"},\"id\":\"9330a20a-0be4-4f6d-bc2e-a6ecf07fdd94\",\"isHidden\":false,\"type\":\"text\"}],\"id\":\"a0c99279-6e27-4fd8-857b-b3cea35000fb\",\"width\":\"1\\\/1\"}],\"id\":\"efa3bdb2-2506-498b-be46-2068626face3\"},{\"attrs\":[],\"columns\":[{\"blocks\":[{\"content\":{\"code\":\"mygrid:\\n label: My Awesome Content\\n type: blocks\\n fieldsets:\\n - grid\\n - heading\\n - text\\n - image\",\"language\":\"yaml\"},\"id\":\"542a6648-8fdf-420a-9099-775ae68d1b5f\",\"isHidden\":false,\"type\":\"code\"}],\"id\":\"c48435bd-7a9a-4317-921c-d84dcd8c6c77\",\"width\":\"1\\\/2\"},{\"blocks\":[{\"content\":{\"blah\":\"\",\"image\":[\"imagepool\\\/screenshot_blocktype.png\"],\"ratio\":\"\",\"crop\":\"false\"},\"id\":\"2b07da12-8dfb-46d4-915d-3076b9321e96\",\"isHidden\":false,\"type\":\"image\"}],\"id\":\"c2a05d3d-e3c6-4cd8-946e-099d1647fbee\",\"width\":\"1\\\/2\"}],\"id\":\"c00fad94-04c3-4996-82c8-8dc17483ffaa\"}]"},"id":"52099b6a-f30e-44d1-a54c-726fc9b1f137","isHidden":false,"type":"grid"},{"content":{"title":"My 2nd Grid-Block","grid":"[{\"attrs\":[],\"columns\":[{\"blocks\":[{\"content\":{\"text\":\"

To customize the Template in the block drawer, copy the code on the right to: blueprints\\\/block\\\/grid.yml<\\\/code><\\\/p>

Be careful! An empty YAML-File can cause data loss!<\\\/strong><\\\/p>\"},\"id\":\"a334ad1f-a4ba-42d6-a531-93b1c325436b\",\"isHidden\":false,\"type\":\"text\"},{\"content\":{\"level\":\"h2\",\"text\":\"What you'il find here?\"},\"id\":\"e0722965-311a-4541-b87d-b52c6db406e0\",\"isHidden\":false,\"type\":\"heading\"},{\"content\":{\"text\":\"

Grid-Field: <\\\/strong>Apply settings from Layout-Field.<\\\/li>
When-Property:<\\\/strong> By default, the Grid will only shown in the Preview. If you want to show it in the block drawer too remove the When-Property<\\\/em>.<\\\/li>
Title-Field:<\\\/strong> This will shown as title in the preview.<\\\/li>
Add more Fields<\\\/strong> for additional settings.<\\\/li><\\\/ul>\"},\"id\":\"72b1aa18-0bf6-4fa6-89c9-b6d5237a2773\",\"isHidden\":false,\"type\":\"list\"},{\"content\":{\"text\":\"Important: The Fields Title<\\\/em> and Grid<\\\/em> are required!<\\\/strong><\\\/p>\"},\"id\":\"4aab1907-325c-40a9-a5cf-d9f14c59eb4f\",\"isHidden\":false,\"type\":\"text\"}],\"id\":\"11afeefa-d1e5-4361-9e45-1b31e357ec26\",\"width\":\"1\\\/2\"},{\"blocks\":[{\"content\":{\"code\":\"name: Grid\\nicon: grid\\nfields:\\n title:\\n type: text\\n grid:\\n type: layout\\n when:\\n - false\\n layouts:\\n - \\\"1\\\/1\\\"\\n - \\\"1\\\/2, 1\\\/2\\\"\\n - \\\"1\\\/3, 1\\\/3, 1\\\/3\\\"\",\"language\":\"yaml\"},\"id\":\"d5ffa1f4-8974-4be5-9db5-968ed1e41e97\",\"isHidden\":false,\"type\":\"code\"}],\"id\":\"64bc65d1-8b24-4100-b7df-803d7291e32e\",\"width\":\"1\\\/2\"}],\"id\":\"b4b1d98a-b5b1-4151-856c-c4fa21dde53b\"}]"},"id":"22963e30-ecc8-418c-860a-61ebaa72ae25","isHidden":false,"type":"grid"}] 6 | -------------------------------------------------------------------------------- /.github/screenshot-grid-block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/plain-solutions-gmbh/kirby-grid-block/851ba75f2fbcbcd9d2604adfc749b736785ef11f/.github/screenshot-grid-block.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS files 2 | .DS_Store 3 | 4 | # npm modules 5 | /node_modules 6 | 7 | # Composer files 8 | /vendor 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Microman 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Kirby Grid-Block 2 | 3 | ## Overview 4 | 5 | With this plugin you can use layouts right within any blocks field! 🤗 6 | 7 | Its most basic use-case is shown in the following screenshot: 8 | 9 | ![Grid block](./.github/screenshot-grid-block.png) 10 | 11 | > This plugin is free to use and published under the MIT license. If you use this plugin for commercial purposes and you want to show your appreciation, don't hesitate to [support me with a donation](https://www.paypal.com/donate?hosted_button_id=LBCLZVHS4K2R6) or purchasing your license(s) through [my affiliate link](https://a.paddle.com/v2/click/1129/136529?link=1170). 12 | 13 | ## Installation 14 | 15 | Download and copy this repository to your plugin folder: `/site/plugins/` 16 | 17 | **Composer** 18 | 19 | `composer require microman/kirby-grid-blocks` 20 | 21 | ## Block field usage in the frontend 22 | 23 | ```html 24 | myGrid()->toBlocks() as $grid): ?> 25 | title() ?> 26 | 27 | 31 | 32 | 33 | 34 | ``` 35 | 36 | ## Customization 37 | 38 | ### Grid block 39 | 40 | Simply copy the main `grid.yml` from `site/plugins/grid-block/blueprints/blocks` to your project's `site/blueprints/blocks` folder. The latter one will be used by Kirby instead of the one provided by the plugin. 41 | 42 | Of course, you can customize it to your needs: 43 | 44 | ```yml 45 | textContent: 46 | label: Content with Text 47 | type: blocks 48 | fieldsets: 49 | grid: 50 | extends: blocks/grid 51 | fields: 52 | grid: 53 | layouts: 54 | - "1/1" 55 | fieldsets: 56 | - heading 57 | - text 58 | title: 59 | label: Title 60 | margin: 61 | type: range 62 | after: px 63 | default: "5" 64 | min: 0 65 | max: 200 66 | ``` 67 | 68 | You'll find the description for this example blueprint in the screenshot above. 69 | 70 | ### Snippet 71 | 72 | Copy the block snippet `grid.php` from `site/plugins/grid-block/snippets/blocks` to your project's `site/snippets/blocks` folder. The latter one will be used by Kirby instead of the one provided by the plugin. 73 | 74 | ## Licence 75 | 76 | MIT 77 | 78 | > [Buy me a ☕️](https://www.paypal.com/donate?hosted_button_id=LBCLZVHS4K2R6) 79 | 80 | > [Get a Kirby-license(s) 💳](https://a.paddle.com/v2/click/1129/136529?link=1170) 81 | -------------------------------------------------------------------------------- /blueprints/blocks/grid.yml: -------------------------------------------------------------------------------- 1 | name: Grid 2 | icon: grid 3 | fields: 4 | title: 5 | type: text 6 | grid: 7 | type: layout 8 | when: 9 | - false 10 | layouts: 11 | - "1/1" 12 | - "1/2, 1/2" 13 | - "1/3, 1/3, 1/3" -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "microman/kirby-grid-blocks", 3 | "description": "Use the layouts field as block", 4 | "type": "kirby-plugin", 5 | "license": "MIT", 6 | "version": "1.0.0", 7 | "authors": [{ 8 | "name": "Roman Gsponer", 9 | "email": "mail@microman.ch" 10 | }], 11 | "require": { 12 | "getkirby/composer-installer": "^1.2" 13 | } 14 | } -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | .k-layout-field.k-field.k-field-name-grid .k-field-header{display:block}.k-block-container[data-last-in-batch] .k-block-options,.k-block-container[data-selected] .k-block-options{display:none}.k-block-container[data-last-in-batch]>.k-block-options,.k-block-container[data-selected]>.k-block-options{display:flex} 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | (()=>{(function(){"use strict";var _=function(){var n=this,r=n.$createElement,a=n._self._c||r;return a("div",{staticClass:"k-block-type-grid",on:{dblclick:n.open}},[a("k-layout-field",n._b({attrs:{value:n.content.grid,label:n.content.title},on:{input:n.update}},"k-layout-field",n.grid,!1))],1)},c=[];function v(n,r,a,m,o,l,d,C){var e=typeof n=="function"?n.options:n;r&&(e.render=r,e.staticRenderFns=a,e._compiled=!0),m&&(e.functional=!0),l&&(e._scopeId="data-v-"+l);var i;if(d?(i=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!t&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(d)},e._ssrRegister=i):o&&(i=C?function(){o.call(this,(e.functional?this.parent:this).$root.$options.shadowRoot)}:o),i)if(e.functional){e._injectStyles=i;var b=e.render;e.render=function(k,u){return i.call(u),b(k,u)}}else{var f=e.beforeCreate;e.beforeCreate=f?[].concat(f,i):[i]}return{exports:n,options:e}}const h={computed:{grid(){return this.field("grid")}}},s={};var p=v(h,_,c,!1,V,null,null,null);function V(n){for(let r in s)this[r]=s[r]}var g=function(){return p.exports}(),H="";window.panel.plugin("microman/grid-blocks",{blocks:{grid:g},icons:{grid:''}})})();})(); 2 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | [ 5 | 'blocks/grid' => __DIR__ . '/blueprints/blocks/grid.yml' 6 | ], 7 | 'snippets' => [ 8 | 'blocks/grid' => __DIR__ . '/snippets/blocks/grid.php' 9 | ] 10 | ]); 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "kirbyup src/index.js --watch", 5 | "build": "kirbyup src/index.js", 6 | "lint": "eslint \"src/**/*.{js,vue}\"", 7 | "lint:fix": "npm run lint -- --fix", 8 | "format": "prettier --write \"src/**/*.{js,vue}\"" 9 | }, 10 | "devDependencies": { 11 | "eslint": "^7.32.0", 12 | "eslint-config-prettier": "^8.3.0", 13 | "eslint-plugin-vue": "^7.18.0", 14 | "kirbyup": "^0.11.1", 15 | "prettier": "^2.4.1" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /snippets/blocks/grid.php: -------------------------------------------------------------------------------- 1 | 2 | grid()->toLayouts() as $layout): ?> 3 | 4 | columns() as $column): ?> 5 | 6 | 7 | blocks() ?> 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/Grid.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | .k-layout-field.k-field.k-field-name-grid .k-field-header { 2 | display: block; 3 | } 4 | 5 | .k-block-container[data-last-in-batch] .k-block-options, 6 | .k-block-container[data-selected] .k-block-options { 7 | display: none; 8 | } 9 | 10 | .k-block-container[data-last-in-batch] > .k-block-options, 11 | .k-block-container[data-selected] > .k-block-options { 12 | display: flex; 13 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Grid from "./components/Grid.vue"; 2 | import "./index.css"; 3 | 4 | window.panel.plugin("microman/grid-blocks", { 5 | blocks: { 6 | grid: Grid, 7 | }, 8 | icons: { 9 | grid: '', 10 | }, 11 | }); 12 | --------------------------------------------------------------------------------

title() ?>