├── .gitignore ├── .prettierrc ├── .editorconfig ├── composer.json ├── index.php ├── LICENSE.md ├── README.md ├── index.css └── index.js /.gitignore: -------------------------------------------------------------------------------- 1 | # OS files 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "bracketSpacing": true, 8 | "semi": true, 9 | "proseWrap": "preserve", 10 | "arrowParens": "avoid", 11 | "htmlWhitespaceSensitivity": "css" 12 | } 13 | -------------------------------------------------------------------------------- /.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 | [*.md,*.txt] 13 | trim_trailing_whitespace = false 14 | insert_final_newline = false 15 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "junohamburg/kirby-block-preview-fields", 3 | "description": "Kirby Block Preview Fields", 4 | "license": "MIT", 5 | "type": "kirby-plugin", 6 | "version": "1.0.7", 7 | "authors": [ 8 | { 9 | "name": "JUNO", 10 | "email": "github@juno-hamburg.com" 11 | } 12 | ], 13 | "require": { 14 | "getkirby/composer-installer": "^1.1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | =') === true 9 | ) { 10 | throw new Exception('The block preview fields plugin supports Kirby 3.6.0 to 3.10.x'); 11 | } 12 | 13 | Kirby::plugin('junohamburg/block-preview-fields', [ 14 | 'options' => [ 15 | 'icon' => true, 16 | 'equalHeightTabs' => true, 17 | ], 18 | 'api' => [ 19 | 'routes' => [ 20 | [ 21 | 'pattern' => 'block-preview-fields', 22 | 'action' => function () { 23 | // Get options for Vue component 24 | return [ 25 | 'icon' => kirby()->option('junohamburg.block-preview-fields.icon'), 26 | 'equalHeightTabs' => kirby()->option('junohamburg.block-preview-fields.equalHeightTabs') 27 | ]; 28 | } 29 | ] 30 | ] 31 | ] 32 | ]); 33 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 JUNO 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 Block Preview Fields 2 | 3 | This plugin for **Kirby 3** displays the block fields directly in the block preview, including tabs. 4 | 5 | ![Block Preview Fields](https://github.com/junohamburg/kirby-block-preview-fields/assets/77532479/39e559e4-f342-4110-b915-fcaf5fa5e095) 6 | 7 | Inspired by the [Kirby Fields Block](https://github.com/jongacnik/kirby-fields-block), but this block preview **supports tabs** and the design aligns more closely with the Kirby UI. 8 | 9 | Please note: In **Kirby 4**, there is now a native implementation of `preview: fields`, see https://getkirby.com/releases/4.0#block-field-improvements. 10 | 11 | ## Installation 12 | 13 | ### Download 14 | 15 | Download and copy this repository to `/site/plugins/kirby-block-preview-fields`. 16 | 17 | ### Composer 18 | 19 | ``` 20 | composer require junohamburg/kirby-block-preview-fields 21 | ``` 22 | 23 | ### Git submodule 24 | 25 | ``` 26 | git submodule add https://github.com/junohamburg/kirby-block-preview-fields.git site/plugins/kirby-block-preview-fields 27 | ``` 28 | 29 | ## Setup 30 | 31 | In your custom block blueprint: 32 | 33 | 1. Add `preview: fields` to display the block fields. 34 | 2. Add `wysiwyg: true` to prevent the drawer from opening automatically after creating a new block. 35 | 36 | Example: **site/blueprints/blocks/custom-block.yml** 37 | 38 | ```yml 39 | name: Block Name 40 | preview: fields 41 | wysiwyg: true 42 | tabs: 43 | content: 44 | label: Content 45 | fields: 46 | ... 47 | settings: 48 | label: Settings 49 | fields: 50 | ... 51 | ``` 52 | 53 | ## Available options 54 | 55 | 1. **Hide block icons**. This is helpful if you are using our [Kirby Visual Block Selector](https://github.com/junohamburg/kirby-visual-block-selector). 56 | 2. **Disable equal height tabs**. By default, the largest tab sets the overall height, so there are no jumps when switching between tabs. 57 | 58 | **site/config/config.php** 59 | 60 | ```php 61 | [ 65 | 'icon' => false, // default: true 66 | 'equalHeightTabs' => false // default: true 67 | ], 68 | ]; 69 | ``` 70 | 71 | Please note: These options apply to all block previews. It is currently not possible / very difficult to add custom options to block previews. 72 | 73 | ## Known issues 74 | 75 | 1. This block preview uses the `angle-down` icon to expand a collapsed block preview. The Kirby `layout` field uses the `angle-down` icon to open a dropdown with options. 76 | 77 | ## License 78 | 79 | MIT 80 | 81 | ## Credits 82 | 83 | - [JUNO](https://juno-hamburg.com) 84 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* 2 | Please note: 3 | - Kirby Block Preview Fields uses existing Kirby components and classes. 4 | - Some classes and styles are overridden. 5 | */ 6 | 7 | .k-block-preview-fields { 8 | margin: calc(-0.75rem) -0.75rem; 9 | background: var(--color-gray-100); 10 | border-radius: var(--rounded); 11 | } 12 | 13 | /* Darker border at top and bottom, does not work in Firefox */ 14 | .k-block-container:not(:last-of-type):has( 15 | > .k-block > .k-block-preview-fields 16 | ) { 17 | border-bottom: 1px solid var(--color-gray-400); 18 | } 19 | 20 | .k-block-container:not(:last-of-type):has( 21 | + .k-block-container .k-block > .k-block-preview-fields 22 | ) { 23 | border-bottom: 1px solid var(--color-gray-400); 24 | } 25 | 26 | /* Title */ 27 | .k-block-preview-fields > .k-block-title { 28 | --drawer-header-height: 2.5rem; 29 | padding: 0.75rem; 30 | padding-left: 1em; 31 | background: var(--color-white); 32 | border-top-left-radius: var(--rounded); 33 | border-top-right-radius: var(--rounded); 34 | } 35 | 36 | /* Icon */ 37 | .k-block-preview-fields > .k-block-title > .k-icon { 38 | width: 1rem; 39 | margin-right: 0.625rem; 40 | color: var(--color-gray-500); 41 | } 42 | 43 | /* Tabs */ 44 | .k-block-preview-fields > .k-block-title > .k-drawer-tabs { 45 | margin-left: auto; 46 | margin-right: 0; 47 | margin-top: -0.75rem; 48 | margin-bottom: -0.75rem; 49 | } 50 | 51 | /* Active tab */ 52 | .k-block-preview-fields 53 | > .k-block-title 54 | .k-drawer-tab.k-button[aria-current]:after { 55 | height: 1px; 56 | bottom: 0px; 57 | } 58 | 59 | /* Toggle button */ 60 | .k-block-preview-fields-toggle { 61 | height: var(--drawer-header-height); 62 | padding-left: 0.25rem; 63 | padding-right: 0.25rem; 64 | margin-top: -0.75rem; 65 | margin-bottom: -0.75rem; 66 | margin-right: -0.125rem; 67 | margin-left: auto; 68 | } 69 | 70 | .k-block-preview-fields 71 | > .k-block-title 72 | > .k-drawer-tabs 73 | + .k-block-preview-fields-toggle { 74 | margin-left: 0; 75 | } 76 | 77 | .k-block-preview-fields-toggle:not(:hover):not(:focus) { 78 | color: var(--color-gray-500); 79 | } 80 | 81 | /* Fieldset */ 82 | .k-block-preview-fields-fieldset-wrapper.equal-height { 83 | display: grid; 84 | } 85 | 86 | .k-block-preview-fields-fieldset-wrapper.equal-height > * { 87 | grid-area: 1 / 1 / 2 / 2; 88 | } 89 | 90 | .k-block-preview-fields-fieldset-wrapper.equal-height > .k-fieldset.hidden { 91 | visibility: hidden; 92 | } 93 | 94 | .k-block-preview-fields-fieldset-wrapper:not(.equal-height) 95 | > .k-fieldset.hidden { 96 | display: none; 97 | } 98 | 99 | .k-block-preview-fields-fieldset-wrapper > .k-fieldset { 100 | border-top: 1px solid rgb(230, 230, 230); 101 | padding: 1.25rem 1.5rem 2.5rem 1.5rem; 102 | } 103 | 104 | /* Overrides */ 105 | 106 | /* Fix collapsed border in layout field, does not work in Firefox */ 107 | .k-layout-column 108 | .k-block-container:nth-child(1):has(+ .k-blocks-empty) 109 | .k-block-preview-fields-hidden 110 | > .k-block-title, 111 | .k-layout-column 112 | .k-block-container:nth-child(2):has(+ .k-blocks-empty) 113 | .k-block-preview-fields-hidden 114 | > .k-block-title { 115 | border-bottom: 1px solid rgb(230, 230, 230); 116 | } 117 | 118 | /* Fix empty blocks placeholder in layout field */ 119 | .k-layout-column .k-block-preview-fields .k-blocks-empty { 120 | position: static; 121 | opacity: 1; 122 | align-items: stretch; 123 | justify-content: flex-start; 124 | border: 1px dashed var(--color-border); 125 | } 126 | 127 | .k-layout-column .k-block-preview-fields .k-blocks-empty.k-empty .k-icon { 128 | width: 36px; 129 | } 130 | 131 | [dir='ltr'] 132 | .k-layout-column 133 | .k-block-preview-fields 134 | .k-blocks-empty.k-empty 135 | .k-icon { 136 | border-right: 1px solid rgba(0, 0, 0, 0.05); 137 | } 138 | 139 | /* Fix nested blocks field in layout field */ 140 | .k-layout-column .k-block-preview-fields .k-blocks:not([data-empty='true']) { 141 | background: var(--color-white); 142 | box-shadow: var(--shadow); 143 | border-radius: var(--rounded); 144 | } 145 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | panel.plugin('junohamburg/block-preview-fields', { 2 | created(Vue) { 3 | const unsubscribe = Vue.$store.subscribeAction(async (action, state) => { 4 | // Fetch options once, but only if user is logged in 5 | if (Vue.$user === undefined || Vue.$user === null) return; 6 | 7 | unsubscribe(); 8 | 9 | // Create custom store 10 | Vue.$store.registerModule('blockPreviewFields', { 11 | state: () => ({ 12 | options: {} 13 | }), 14 | mutations: { 15 | updateOptions(state, options) { 16 | state.options = options; 17 | } 18 | }, 19 | actions: { 20 | updateOptions({ commit }, { options }) { 21 | commit('updateOptions', options); 22 | } 23 | } 24 | }); 25 | 26 | // Fetch options 27 | const options = await Vue.$api.get('block-preview-fields'); 28 | 29 | // Update store 30 | Vue.$store.dispatch({ 31 | type: 'updateOptions', 32 | options: options 33 | }); 34 | }); 35 | }, 36 | blocks: { 37 | fields: { 38 | data() { 39 | return { 40 | currentTab: Object.values(this.fieldset.tabs)[0].name, 41 | isHidden: JSON.parse( 42 | sessionStorage.getItem( 43 | `kirby.blockPreviewFields.${this.$attrs.endpoints.field}.${this.$attrs.id}` 44 | ) 45 | ) 46 | }; 47 | }, 48 | computed: { 49 | options() { 50 | return this.$store.state.blockPreviewFields.options; 51 | }, 52 | showTabs() { 53 | return Object.values(this.fieldset.tabs).length > 1; 54 | }, 55 | toggleIcon() { 56 | return this.isHidden ? 'angle-down' : 'angle-up'; 57 | }, 58 | // https://github.com/getkirby/kirby/blob/main/panel/src/components/Forms/Blocks/BlockTitle.vue 59 | icon() { 60 | return this.fieldset.icon || 'box'; 61 | }, 62 | label() { 63 | if (!this.fieldset.label || this.fieldset.label.length === 0) { 64 | return false; 65 | } 66 | 67 | if (this.fieldset.label === this.fieldset.name) { 68 | return false; 69 | } 70 | 71 | const label = this.$helper.string.template( 72 | this.fieldset.label, 73 | this.content 74 | ); 75 | 76 | return label === '…' ? false : this.$helper.string.stripHTML(label); 77 | } 78 | }, 79 | methods: { 80 | toggle() { 81 | this.isHidden = !this.isHidden; 82 | sessionStorage.setItem( 83 | `kirby.blockPreviewFields.${this.$attrs.endpoints.field}.${this.$attrs.id}`, 84 | this.isHidden 85 | ); 86 | } 87 | }, 88 | template: ` 89 |
93 |
94 | 95 | 96 | 97 | {{ fieldset.name }} 98 | 99 | 100 | {{ label }} 101 | 102 | 103 | 114 | 115 | 121 |
122 | 123 |
128 | 136 |
137 |
138 | ` 139 | } 140 | } 141 | }); 142 | --------------------------------------------------------------------------------