Commit a3b50ae7 authored by Benjamin Klemencic's avatar Benjamin Klemencic
Browse files

5.12.3 (Gutenberg optimization)

parent e7da90af
......@@ -11,13 +11,15 @@ cms-basis/
| | ├── plugin.scss Global-Sytle
| | └── shortcode.scss Shortcode-Style
| └── js/ Verzeichnis der JavaScript-Dateien
| ├── gutenberg.js Gutenberg-Skript
| ├── gutenberg.js Gutenberg-Library-Skript
| ├── <blockname>-block.js Skript zum Aufruf von Gutenberg-Library-Skript
| ├── shortcode.js Shortcode-Skript
| ├── wp-color-picker.js WP-Color-Picker
| └── wp-media.js WP-Media
├── assets/
| ├── js/ Verzeichnis der JavaScript-Dateien
| | ├── gutenberg.js Gutenberg-Skript (minifiziert)
| | ├── gutenberg.js Gutenberg-Library-Skript (minifiziert)
| | ├── <blockname>-block.js Skript zum Aufruf von Gutenberg-Library-Skript
| | ├── shortcode.js Shortcode-Skript (minifiziert)
| | ├── wp-color-picker.js WP-Color-Picker (minifiziert)
| | └── wp-media.js WP-Media (minifiziert)
......
createBlock(basisConfig);
\ No newline at end of file
function createBlock(){const{registerBlockType:registerBlockType}=wp.blocks,{createElement:createElement}=wp.element,{InspectorControls:InspectorControls}=wp.blockEditor,{CheckboxControl:CheckboxControl,RadioControl:RadioControl,SelectControl:SelectControl,TextControl:TextControl,TextareaControl:TextareaControl,ToggleControl:ToggleControl}=wp.components,{serverSideRender:serverSideRender}=wp,phpConfig=eval(blockname+"Config;");registerBlockType(phpConfig.block.blocktype,{title:phpConfig.block.title,category:phpConfig.block.category,icon:phpConfig.block.icon,construct(){props.setAttributes({countit:0})},edit(props){const att=props.attributes,setAtts=props.setAttributes;function changeField(val){"number"==phpConfig[this].type&&(val=parseInt(val)),setAtts({[this]:val})}function clean(obj){for(var propName in obj)null!==obj[propName]&&void 0!==obj[propName]||delete obj[propName]}if(!1===props.isSelected&&!0===edited)return clean(att),createElement(serverSideRender,{block:phpConfig.block.blocktype,attributes:att});var ret=[];for(var fieldname in ret.push(createElement("div",{className:"components-placeholder__label"},[createElement("span",{className:"editor-block-icon block-editor-block-icon dashicons-before dashicons-"+phpConfig.block.icon},null),phpConfig.block.title])),phpConfig)switch(phpConfig[fieldname].field_type){case"checkbox":ret.push(createElement(CheckboxControl,{checked:void 0!==att[fieldname]?att[fieldname]:phpConfig[fieldname].default,label:phpConfig[fieldname].label,onChange:changeField.bind(fieldname)}));break;case"radio":var opts=[];for(var v in phpConfig[fieldname].values)opts.push(JSON.parse('{"value":"'+v+'", "label":"'+phpConfig[fieldname].values[v]+'"}'));ret.push(createElement(RadioControl,{selected:void 0!==att[fieldname]?att[fieldname]:phpConfig[fieldname].default,label:phpConfig[fieldname].label,onChange:changeField.bind(fieldname),options:opts}));break;case"multi_select":case"select":var opts=[];for(var v in phpConfig[fieldname].values)opts.push(JSON.parse('{"value":"'+v+'", "label":"'+phpConfig[fieldname].values[v]+'"}'));ret.push(createElement(SelectControl,{multiple:"multi_select"==phpConfig[fieldname].field_type?1:0,value:att[fieldname],label:phpConfig[fieldname].label,type:phpConfig[fieldname].type,onChange:changeField.bind(fieldname),options:opts}));break;case"text":ret.push(createElement(TextControl,{value:att[fieldname],label:phpConfig[fieldname].label,type:phpConfig[fieldname].type,onChange:changeField.bind(fieldname)}));break;case"textarea":ret.push(createElement(TextareaControl,{value:att[fieldname],label:phpConfig[fieldname].label,type:phpConfig[fieldname].type,onChange:changeField.bind(fieldname)}));break;case"toggle":ret.push(createElement(ToggleControl,{checked:void 0!==att[fieldname]?att[fieldname]:phpConfig[fieldname].default,label:phpConfig[fieldname].label,type:phpConfig[fieldname].type,onChange:changeField.bind(fieldname)}))}return edited=!0,createElement("div",{className:"components-placeholder"},ret)},save:props=>null})}edited=!1,createBlock();
\ No newline at end of file
function createBlock(blockConfig){const{registerBlockType:registerBlockType}=wp.blocks,{createElement:createElement}=wp.element,{InspectorControls:InspectorControls}=wp.blockEditor,{CheckboxControl:CheckboxControl,RadioControl:RadioControl,SelectControl:SelectControl,TextControl:TextControl,TextareaControl:TextareaControl,ToggleControl:ToggleControl}=wp.components,{serverSideRender:serverSideRender}=wp;registerBlockType(blockConfig.block.blocktype,{title:blockConfig.block.title,category:blockConfig.block.category,icon:blockConfig.block.icon,construct(){props.setAttributes({countit:0})},edit(props){const att=props.attributes,setAtts=props.setAttributes;function changeField(val){"number"==blockConfig[this].type&&(val=parseInt(val)),setAtts({[this]:val})}function clean(obj){for(var propName in obj)null!==obj[propName]&&void 0!==obj[propName]||delete obj[propName]}if(!1===props.isSelected&&!0===edited)return clean(att),createElement(serverSideRender,{block:blockConfig.block.blocktype,attributes:att});var ret=[];for(var fieldname in ret.push(createElement("div",{className:"components-placeholder__label"},[createElement("span",{className:"editor-block-icon block-editor-block-icon dashicons-before dashicons-"+blockConfig.block.icon},null),blockConfig.block.title])),blockConfig)switch(blockConfig[fieldname].field_type){case"checkbox":ret.push(createElement(CheckboxControl,{checked:void 0!==att[fieldname]?att[fieldname]:blockConfig[fieldname].default,label:blockConfig[fieldname].label,onChange:changeField.bind(fieldname)}));break;case"radio":var opts=[];for(var v in blockConfig[fieldname].values)opts.push(JSON.parse('{"value":"'+v+'", "label":"'+blockConfig[fieldname].values[v]+'"}'));ret.push(createElement(RadioControl,{selected:void 0!==att[fieldname]?att[fieldname]:blockConfig[fieldname].default,label:blockConfig[fieldname].label,onChange:changeField.bind(fieldname),options:opts}));break;case"multi_select":case"select":for(var opts=[],i=0;i<blockConfig[fieldname].values.length;i++)opts.push(JSON.parse('{"value":"'+blockConfig[fieldname].values[i].id+'", "label":"'+blockConfig[fieldname].values[i].val+'"}'));ret.push(createElement(SelectControl,{multiple:"multi_select"==blockConfig[fieldname].field_type?1:0,value:att[fieldname],label:blockConfig[fieldname].label,type:blockConfig[fieldname].type,onChange:changeField.bind(fieldname),options:opts}));break;case"text":ret.push(createElement(TextControl,{value:att[fieldname],label:blockConfig[fieldname].label,type:blockConfig[fieldname].type,onChange:changeField.bind(fieldname)}));break;case"textarea":ret.push(createElement(TextareaControl,{value:att[fieldname],label:blockConfig[fieldname].label,type:blockConfig[fieldname].type,onChange:changeField.bind(fieldname)}));break;case"toggle":ret.push(createElement(ToggleControl,{checked:void 0!==att[fieldname]?att[fieldname]:blockConfig[fieldname].default,label:blockConfig[fieldname].label,type:blockConfig[fieldname].type,onChange:changeField.bind(fieldname)}))}return edited=!0,createElement("div",{className:"components-placeholder"},ret)},save:props=>null})}edited=!1;
\ No newline at end of file
......@@ -4,7 +4,7 @@
Plugin Name: CMS Basis
Plugin URI: https://gitlab.rrze.fau.de/rrze-webteam/cms-basis
Description: Basic template for all WordPress CMS plugins.
Version: 5.12.2
Version: 5.12.3
Author: RRZE Webteam
Author URI: https://blogs.fau.de/webworking/
License: GNU General Public License v2
......
......@@ -237,21 +237,36 @@ function getShortcodeSettings(){
'type' => 'boolean',
'default' => true // Vorauswahl: ausgewählt
],
'Beispiel-Select' => [
'Beispiel-Select' => [
'values' => [
'wert1' => __( 'Wert 1', 'cms-basis' ),
'wert2' => __( 'Wert 2', 'cms-basis' )
[
'id' => 'wert1',
'val' => __( 'Wert 1', 'cms-basis' )
],
[
'id' => 'wert2',
'val' => __( 'Wert 2', 'cms-basis' )
],
],
'default' => 'wert1', // vorausgewählter Wert: Achtung: string, kein array!
'field_type' => 'select',
'label' => __( 'Beschrifung', 'cms-basis' ),
'label' => __( 'Beschriftung', 'cms-basis' ),
'type' => 'string' // Variablentyp des auswählbaren Werts
],
'Beispiel-Multi-Select' => [
'values' => [
'wert1' => __( 'Wert 1', 'cms-basis' ),
'wert2' => __( 'Wert 2', 'cms-basis' ),
'wert3' => __( 'Wert 2', 'cms-basis' )
[
'id' => 'wert1',
'val' => __( 'Wert 1', 'cms-basis' )
],
[
'id' => 'wert2',
'val' => __( 'Wert 2', 'cms-basis' )
],
[
'id' => 'wert3',
'val' => __( 'Wert 3', 'cms-basis' )
],
],
'default' => ['wert1','wert3'], // vorausgewählte(r) Wert(e): Achtung: array, kein string!
'field_type' => 'multi_select',
......
......@@ -91,10 +91,31 @@ class Shortcode
}
public function fillGutenbergOptions() {
// use this function to prefill f.e. dropdowns or multi-select
// Example:
// fill select id ( = glossary )
$glossaries = get_posts( array(
'posts_per_page' => -1,
'post_type' => 'glossary',
'orderby' => 'title',
'order' => 'ASC'
));
$this->settings['id']['field_type'] = 'multi_select';
$this->settings['id']['default'] = array(0);
$this->settings['id']['type'] = 'array';
$this->settings['id']['items'] = array( 'type' => 'number' );
$this->settings['id']['values'][] = ['id' => 0, 'val' => __( '-- all --', 'rrze-basis' )];
foreach ( $glossaries as $glossary){
$this->settings['id']['values'][] = [
'id' => $glossary->ID,
'val' => str_replace( "'", "", str_replace( '"', "", $glossary->post_title ) )
];
}
return $this->settings;
}
public function initGutenberg() {
if ( ! function_exists( 'register_block_type' ) ) {
return;
......@@ -109,14 +130,10 @@ class Shortcode
}
}
$this->settings = $this->fillGutenbergOptions();
$js = '../assets/js/gutenberg.js';
$editor_script = $this->settings['block']['blockname'] . '-blockJS';
wp_register_script(
$editor_script,
plugins_url( $js, __FILE__ ),
// include gutenberg lib
wp_enqueue_script(
'RRZE-Gutenberg',
plugins_url( '../assets/js/gutenberg.js', __FILE__ ),
array(
'wp-blocks',
'wp-i18n',
......@@ -124,25 +141,40 @@ class Shortcode
'wp-components',
'wp-editor'
),
filemtime( dirname( __FILE__ ) . '/' . $js )
NULL
);
wp_localize_script( $editor_script, 'blockname', $this->settings['block']['blockname'] );
// get prefills for dropdowns
// $this->settings = $this->fillGutenbergOptions();
// register js-script to inject php config to call gutenberg lib
$editor_script = $this->settings['block']['blockname'] . '-block';
$js = '../assets/js/' . $editor_script . '.js';
wp_register_script(
$editor_script,
plugins_url( $js, __FILE__ ),
array(
'RRZE-Gutenberg',
),
NULL
);
wp_localize_script( $editor_script, $this->settings['block']['blockname'] . 'Config', $this->settings );
// register styles
$editor_style = 'gutenberg-css';
wp_register_style( $editor_style, plugins_url( '../assets/css/gutenberg.css', __FILE__ ) );
$theme_style = 'theme-css';
wp_register_style($theme_style, get_template_directory_uri() . '/style.css', array('wp-editor'), null);
$editor_style = 'plugin-css';
wp_register_style($editor_style, plugins_url('../assets/css/gutenberg.css', __FILE__ ));
// register block
register_block_type( $this->settings['block']['blocktype'], array(
'editor_script' => $editor_script,
'editor_style' => $editor_style,
'style' => $theme_style,
'render_callback' => [$this, 'shortcodeOutput'],
'attributes' => $this->settings,
'attributes' => $this->settings
)
);
wp_localize_script( $editor_script, $this->settings['block']['blockname'] . 'Config', $this->settings );
}
}
{
"name": "cms-basis",
"version": "5.8.1",
"version": "5.12.3",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
{
"name": "cms-basis",
"version": "5.12.2",
"version": "5.12.3",
"description": "Basic template for all WordPress CMS plugins.",
"main": "cms-basis.php",
"scripts": {
......
createBlock( basisConfig );
\ No newline at end of file
edited = false;
function createBlock() {
function createBlock(blockConfig) {
const { registerBlockType } = wp.blocks;
const { createElement } = wp.element;
const { InspectorControls } = wp.blockEditor;
const { CheckboxControl, RadioControl, SelectControl, TextControl, TextareaControl, ToggleControl } = wp.components;
const { serverSideRender } = wp;
const phpConfig = eval( blockname + 'Config;' );
registerBlockType( phpConfig.block.blocktype, {
title: phpConfig.block.title,
category: phpConfig.block.category,
icon: phpConfig.block.icon,
registerBlockType( blockConfig.block.blocktype, {
title: blockConfig.block.title,
category: blockConfig.block.category,
icon: blockConfig.block.icon,
construct(){
props.setAttributes({ countit: 0 });
},
......@@ -22,7 +19,7 @@ function createBlock() {
const setAtts = props.setAttributes;
function changeField( val ){
if ( phpConfig[this]['type'] == 'number' ){
if ( blockConfig[this]['type'] == 'number' ){
val = parseInt( val );
}
setAtts( {[this]: val} );
......@@ -35,43 +32,42 @@ function createBlock() {
}
}
}
if ( ( props['isSelected'] === false ) && ( edited === true ) ){
clean( att );
return createElement( serverSideRender, { block: phpConfig.block.blocktype, attributes: att });
return createElement( serverSideRender, { block: blockConfig.block.blocktype, attributes: att });
} else {
var ret = [];
ret.push( createElement( 'div', { className: 'components-placeholder__label' }, [ createElement( 'span', { className: 'editor-block-icon block-editor-block-icon dashicons-before dashicons-' + phpConfig.block.icon }, null ), phpConfig.block.title ] ) );
ret.push( createElement( 'div', { className: 'components-placeholder__label' }, [ createElement( 'span', { className: 'editor-block-icon block-editor-block-icon dashicons-before dashicons-' + blockConfig.block.icon }, null ), blockConfig.block.title ] ) );
for ( var fieldname in phpConfig ){
switch( phpConfig[fieldname]['field_type'] ){
for ( var fieldname in blockConfig ){
switch( blockConfig[fieldname]['field_type'] ){
case 'checkbox':
ret.push( createElement( CheckboxControl, { checked: ( typeof att[fieldname] !== 'undefined' ? att[fieldname] : phpConfig[fieldname]['default'] ), label: phpConfig[fieldname]['label'], onChange: changeField.bind( fieldname ) } ) );
ret.push( createElement( CheckboxControl, { checked: ( typeof att[fieldname] !== 'undefined' ? att[fieldname] : blockConfig[fieldname]['default'] ), label: blockConfig[fieldname]['label'], onChange: changeField.bind( fieldname ) } ) );
break;
case 'radio':
var opts = [];
for ( var v in phpConfig[fieldname]['values'] ){
opts.push( JSON.parse( '{"value":"' + v + '", "label":"' + phpConfig[fieldname]['values'][v] + '"}' ) );
for ( var v in blockConfig[fieldname]['values'] ){
opts.push( JSON.parse( '{"value":"' + v + '", "label":"' + blockConfig[fieldname]['values'][v] + '"}' ) );
}
ret.push( createElement( RadioControl, { selected: ( typeof att[fieldname] !== 'undefined' ? att[fieldname] : phpConfig[fieldname]['default'] ), label: phpConfig[fieldname]['label'], onChange: changeField.bind( fieldname ), options: opts } ) );
ret.push( createElement( RadioControl, { selected: ( typeof att[fieldname] !== 'undefined' ? att[fieldname] : blockConfig[fieldname]['default'] ), label: blockConfig[fieldname]['label'], onChange: changeField.bind( fieldname ), options: opts } ) );
break;
case 'multi_select':
case 'select':
var opts = [];
for ( var v in phpConfig[fieldname]['values'] ){
opts.push( JSON.parse( '{"value":"' + v + '", "label":"' + phpConfig[fieldname]['values'][v] + '"}' ) );
var opts = [];
for (var i = 0; i < blockConfig[fieldname]['values'].length; i++) {
opts.push( JSON.parse( '{"value":"' + blockConfig[fieldname]['values'][i]['id'] + '", "label":"' + blockConfig[fieldname]['values'][i]['val'] + '"}' ) );
}
ret.push( createElement( SelectControl, { multiple: ( phpConfig[fieldname]['field_type'] == 'multi_select' ? 1 : 0 ), value: att[fieldname], label: phpConfig[fieldname]['label'], type: phpConfig[fieldname]['type'], onChange: changeField.bind( fieldname ), options: opts } ) );
ret.push( createElement( SelectControl, { multiple: ( blockConfig[fieldname]['field_type'] == 'multi_select' ? 1 : 0 ), value: att[fieldname], label: blockConfig[fieldname]['label'], type: blockConfig[fieldname]['type'], onChange: changeField.bind( fieldname ), options: opts } ) );
break;
case 'text':
ret.push( createElement( TextControl, { value: att[fieldname], label: phpConfig[fieldname]['label'], type: phpConfig[fieldname]['type'], onChange: changeField.bind( fieldname ) } ) );
ret.push( createElement( TextControl, { value: att[fieldname], label: blockConfig[fieldname]['label'], type: blockConfig[fieldname]['type'], onChange: changeField.bind( fieldname ) } ) );
break;
case 'textarea':
ret.push( createElement( TextareaControl, { value: att[fieldname], label: phpConfig[fieldname]['label'], type: phpConfig[fieldname]['type'], onChange: changeField.bind( fieldname ) } ) );
ret.push( createElement( TextareaControl, { value: att[fieldname], label: blockConfig[fieldname]['label'], type: blockConfig[fieldname]['type'], onChange: changeField.bind( fieldname ) } ) );
break;
case 'toggle':
ret.push( createElement( ToggleControl, { checked: ( typeof att[fieldname] !== 'undefined' ? att[fieldname] : phpConfig[fieldname]['default'] ), label: phpConfig[fieldname]['label'], type: phpConfig[fieldname]['type'], onChange: changeField.bind( fieldname ) } ) );
ret.push( createElement( ToggleControl, { checked: ( typeof att[fieldname] !== 'undefined' ? att[fieldname] : blockConfig[fieldname]['default'] ), label: blockConfig[fieldname]['label'], type: blockConfig[fieldname]['type'], onChange: changeField.bind( fieldname ) } ) );
break;
}
}
......@@ -85,6 +81,4 @@ function createBlock() {
return null;
}
} );
}
createBlock();
\ No newline at end of file
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment