From 39f8df4cbe109ae5e601ced3255b2a0c3d9b6e63 Mon Sep 17 00:00:00 2001 From: Michele Giorgi Date: Mon, 2 Aug 2021 00:00:40 +0200 Subject: [PATCH 1/2] Conditionally register blocks based on editor type Add block widget support --- admin/class-formality-editor.php | 15 +- assets/scripts/editor.js | 59 ++- assets/scripts/editor/blocks/email.js | 140 +++---- assets/scripts/editor/blocks/media.js | 134 +++---- assets/scripts/editor/blocks/message.js | 90 +++-- assets/scripts/editor/blocks/multiple.js | 292 +++++++------- assets/scripts/editor/blocks/number.js | 190 ++++----- assets/scripts/editor/blocks/rating.js | 229 +++++------ assets/scripts/editor/blocks/select.js | 214 +++++----- assets/scripts/editor/blocks/step.js | 118 +++--- assets/scripts/editor/blocks/switch.js | 170 ++++---- assets/scripts/editor/blocks/text.js | 141 +++---- assets/scripts/editor/blocks/textarea.js | 178 ++++----- assets/scripts/editor/blocks/upload.js | 226 +++++------ assets/scripts/editor/blocks/widget.js | 366 +++++++++--------- assets/scripts/editor/main/init.js | 69 ---- .../editor/{main => plugins}/sidebar.js | 23 +- assets/scripts/editor/utility/blocks.js | 8 +- assets/scripts/editor/utility/init.js | 49 +++ includes/class-formality.php | 2 +- 20 files changed, 1379 insertions(+), 1334 deletions(-) delete mode 100644 assets/scripts/editor/main/init.js rename assets/scripts/editor/{main => plugins}/sidebar.js (98%) create mode 100644 assets/scripts/editor/utility/init.js diff --git a/admin/class-formality-editor.php b/admin/class-formality-editor.php index bd14b7b..2d4f0f3 100755 --- a/admin/class-formality-editor.php +++ b/admin/class-formality-editor.php @@ -40,6 +40,8 @@ public function register_blocks() { } public function enqueue_scripts() { + global $pagenow; + $editor = get_post_type() == 'formality_form' ? 'formality' : str_replace(".php", "", $pagenow); $upload = wp_upload_dir(); $formats = array(); $mimes = get_allowed_mime_types(); @@ -47,12 +49,12 @@ public function enqueue_scripts() { if(!empty($mimes)) { foreach ($mimes as $type => $mime) { $multiple = explode("|", $type); - foreach ($multiple as $single) { - $formats[] = $single; - } + foreach ($multiple as $single) { $formats[] = $single; } } } - wp_enqueue_script( $this->formality . "-editor", plugin_dir_url(__DIR__) . 'dist/scripts/formality-editor.js', array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-plugins', 'wp-edit-post' ), $this->version, false ); + $dependecies = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-plugins', 'wp-dom-ready', 'wp-components'); + $dependecies[] = $editor == 'widgets' ? 'wp-edit-widgets' : 'wp-edit-post'; + wp_enqueue_script( $this->formality . "-editor", plugin_dir_url(__DIR__) . 'dist/scripts/formality-editor.js', $dependecies, $this->version, false ); wp_localize_script( $this->formality . "-editor", 'formality', array( 'plugin_url' => str_replace('admin/', '', plugin_dir_url( __FILE__ )), 'templates_url' => $upload['baseurl'] . '/formality/templates', @@ -61,7 +63,8 @@ public function enqueue_scripts() { 'api' => esc_url_raw(rest_url()), 'nonce' => wp_create_nonce('wp_rest'), 'upload_formats' => $formats, - 'upload_max' => $maxsize + 'upload_max' => $maxsize, + 'editor' => $editor )); wp_set_script_translations( $this->formality . "-editor", 'formality', plugin_dir_path( __DIR__ ) . 'languages' ); } @@ -97,7 +100,7 @@ public function block_categories($categories, $post) { public function filter_blocks($allowed_block_types, $editorcontext) { $post = property_exists($editorcontext, 'post') ? $editorcontext->post : $editorcontext; - if ( $post->post_type == 'formality_form' ) { return $this->get_allowed('blocks'); } + if(!empty($post) && $post->post_type == 'formality_form') { return $this->get_allowed('blocks'); } return $allowed_block_types; } diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js index ebb698c..c9daeea 100755 --- a/assets/scripts/editor.js +++ b/assets/scripts/editor.js @@ -1,22 +1,45 @@ // Formality editor scripts - -import './editor/main/init.js'; -import './editor/main/sidebar.js'; +import { pageLoad } from './editor/utility/init.js'; import './editor/components/repeaterControl.js'; -import './editor/blocks/text.js'; -import './editor/blocks/textarea.js'; -import './editor/blocks/email.js'; -import './editor/blocks/number.js'; -import './editor/blocks/select.js'; -import './editor/blocks/multiple.js'; -import './editor/blocks/switch.js'; -import './editor/blocks/rating.js'; -import './editor/blocks/upload.js'; - -import './editor/blocks/step.js'; -import './editor/blocks/message.js'; -import './editor/blocks/media.js'; - -import './editor/blocks/widget.js'; +import { formSidebar } from './editor/plugins/sidebar.js'; + +import { textBlock } from './editor/blocks/text.js'; +import { textareaBlock } from './editor/blocks/textarea.js'; +import { emailBlock } from './editor/blocks/email.js'; +import { numberBlock } from './editor/blocks/number.js'; +import { selectBlock } from './editor/blocks/select.js'; +import { multipleBlock } from './editor/blocks/multiple.js'; +import { switchBlock } from './editor/blocks/switch.js'; +import { ratingBlock } from './editor/blocks/rating.js'; +import { uploadBlock } from './editor/blocks/upload.js'; +import { stepBlock } from './editor/blocks/step.js'; +import { messageBlock } from './editor/blocks/message.js'; +import { mediaBlock } from './editor/blocks/media.js'; +import { widgetBlock } from './editor/blocks/widget.js'; + +if(formality.editor=='formality') { + + pageLoad() + + formSidebar() + + textBlock() + textareaBlock() + emailBlock() + numberBlock() + selectBlock() + multipleBlock() + switchBlock() + ratingBlock() + uploadBlock() + stepBlock() + messageBlock() + mediaBlock() + +} else { + + widgetBlock() + +} diff --git a/assets/scripts/editor/blocks/email.js b/assets/scripts/editor/blocks/email.js index 65d0786..f9284af 100644 --- a/assets/scripts/editor/blocks/email.js +++ b/assets/scripts/editor/blocks/email.js @@ -34,75 +34,79 @@ const { import { iconEmail as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('E-mail', 'formality'), - description: __('Text field that accepts only valid email address.', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - halfwidth: { type: 'boolean', default: false }, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - value: { type: 'string', default: ''}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { +export function emailBlock() { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('E-mail', 'formality'), + description: __('Text field that accepts only valid email address.', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + halfwidth: { type: 'boolean', default: false }, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + value: { type: 'string', default: ''}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - return ([ - - - { mainOptions(props) } - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } + + return ([ + + + { mainOptions(props) } + + { advancedPanel(props) } + + ,
- -
-
-
, - ]) - }, - save () { - return null - }, -}); +
+ { inlineName(props) } + +
+
+ +
+
+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/media.js b/assets/scripts/editor/blocks/media.js index 7e5db87..a481163 100644 --- a/assets/scripts/editor/blocks/media.js +++ b/assets/scripts/editor/blocks/media.js @@ -40,71 +40,75 @@ const { import { iconMedia as blockicon } from '../utility/icons.js' import { iconPlay } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Media', 'formality'), - description: __('Hero image, how-to video or any type of visual content for your users.', 'formality'), - icon: blockicon, - category: 'formality_nav', - attributes: { - //uid: { type: 'string', default: '' }, - media: { type: 'string', default: ''}, - media_type: { type: 'string', default: ''}, - media_id: { type: 'integer', default: 0}, - exclude: { type: 'integer', default: 99}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - edit(props) { +export function mediaBlock() { - checkUID(props, 2) - let { media, media_id, media_type, rules, preview } = props.attributes - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Media', 'formality'), + description: __('Hero image, how-to video or any type of visual content for your users.', 'formality'), + icon: blockicon, + category: 'formality_nav', + attributes: { + //uid: { type: 'string', default: '' }, + media: { type: 'string', default: ''}, + media_type: { type: 'string', default: ''}, + media_id: { type: 'integer', default: 0}, + exclude: { type: 'integer', default: 99}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + edit(props) { - return ([ - - - + - editAttributeMedia(props, "media", file, true)} - allowedTypes={ [ 'image', 'video' ] } - value={ media_id } - render={({ open }) => ( - - - { media ? : ''} - - )} - /> - - - { advancedPanel(props, false) } - , -
- - { media ? ( media_type == "video" ? { iconPlay } : ) : __('Please select an image or video, from the right sidebar.', 'formality') } -
, - ]) - }, - save () { - return null - }, -}); + + editAttributeMedia(props, "media", file, true)} + allowedTypes={ [ 'image', 'video' ] } + value={ media_id } + render={({ open }) => ( + + + { media ? : ''} + + )} + /> + + + { advancedPanel(props, false) } + , +
+ + { media ? ( media_type == "video" ? { iconPlay } : ) : __('Please select an image or video, from the right sidebar.', 'formality') } +
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/message.js b/assets/scripts/editor/blocks/message.js index 4a0bea6..73391cf 100644 --- a/assets/scripts/editor/blocks/message.js +++ b/assets/scripts/editor/blocks/message.js @@ -31,48 +31,52 @@ const { import { iconMessage as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Message', 'formality'), - description: __('Custom message/information for your users.', 'formality'), - icon: blockicon, - category: 'formality_nav', - attributes: { - //uid: { type: 'string', default: '' }, - text: { type: 'string', default: ''}, - exclude: { type: 'integer', default: 99}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - edit(props) { +export function messageBlock() { - checkUID(props, 2) - let { text, rules, preview } = props.attributes - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Message', 'formality'), + description: __('Custom message/information for your users.', 'formality'), + icon: blockicon, + category: 'formality_nav', + attributes: { + //uid: { type: 'string', default: '' }, + text: { type: 'string', default: ''}, + exclude: { type: 'integer', default: 99}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + edit(props) { - return ([ - - { advancedPanel(props, false) } - , -
- - editAttribute(props, "text", value)} - placeholder={__('Enter your text here!', 'formality')} - /> -
, - ]) - }, - save () { - return null - }, -}); + checkUID(props, 2) + let { text, rules, preview } = props.attributes + if ( preview ) { return getPreview(props.name) } + + return ([ + + { advancedPanel(props, false) } + , +
+ + editAttribute(props, "text", value)} + placeholder={__('Enter your text here!', 'formality')} + /> +
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/multiple.js b/assets/scripts/editor/blocks/multiple.js index 94fb50f..d6370e2 100644 --- a/assets/scripts/editor/blocks/multiple.js +++ b/assets/scripts/editor/blocks/multiple.js @@ -50,154 +50,158 @@ const { Fragment, } = wp.element; -registerBlockType( blockName, { - title: __('Multiple choice', 'formality'), - description: __('Checkbox grid with all available options that users can select.', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - halfwidth: { type: 'boolean', default: false }, - value: { type: 'string', default: ''}, - style: { type: 'string', default: 'default' }, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - options: { type: 'string|array', attribute: 'options', default: [], }, - option_labels: { type: 'boolean', default: false }, - single: { type: 'boolean', default: false }, - option_grid: { type: 'integer', default: 2 }, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { +export function multipleBlock() { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview, options, option_labels, option_grid, single, style } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Multiple choice', 'formality'), + description: __('Checkbox grid with all available options that users can select.', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + halfwidth: { type: 'boolean', default: false }, + value: { type: 'string', default: ''}, + style: { type: 'string', default: 'default' }, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + options: { type: 'string|array', attribute: 'options', default: [], }, + option_labels: { type: 'boolean', default: false }, + single: { type: 'boolean', default: false }, + option_grid: { type: 'integer', default: 2 }, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - if(!option_grid && style=="default") { option_grid = 1; } + checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview, options, option_labels, option_grid, single, style } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } - return ([ - - - { mainOptions(props, true, true) } - - { props.setAttributes({options: val}); }} - >{(value, onChange) => { - return [ - { value.value = v; onChange(value)}} - />, - { value.label = v; onChange(value) }} - />, - ] - }} - editAttribute(props, "option_labels", true, true )} - /> - editAttribute(props, "single", true, true )} - /> - editAttribute(props, "style", value)} - /> - - + + { mainOptions(props, true, true) } + + { props.setAttributes({options: val}); }} + >{(value, onChange) => { + return [ + { value.value = v; onChange(value)}} + />, + { value.label = v; onChange(value) }} + />, + ] + }} + editAttribute(props, "option_labels", true, true )} + /> + editAttribute(props, "single", true, true )} + /> + editAttribute(props, "style", value)} + /> + - { props.setAttributes({option_grid: val}); }} - min={ style == "buttons" ? 0 : 1 } - max={ 3 } - //beforeIcon="arrow-left" - //afterIcon="arrow-right" - /> - - - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ + { props.setAttributes({option_grid: val}); }} + min={ style == "buttons" ? 0 : 1 } + max={ 3 } + //beforeIcon="arrow-left" + //afterIcon="arrow-right" + /> + + + + { advancedPanel(props) } + + ,
-
{ placeholder }
-
- {options.map(option => { - return - - - - })} +
+ { inlineName(props) } +
-
-
, - ]) - }, - save () { - return null - }, -}); +
+
{ placeholder }
+
+ {options.map(option => { + return + + + + })} +
+
+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/number.js b/assets/scripts/editor/blocks/number.js index f4ffc97..22f40ca 100644 --- a/assets/scripts/editor/blocks/number.js +++ b/assets/scripts/editor/blocks/number.js @@ -37,100 +37,104 @@ const { import { iconNumber as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Number', 'formality'), - description: __('Number field, accept integer or float number value', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - halfwidth: { type: 'boolean', default: false }, - value: { type: 'string', default: ''}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - value_min: { type: 'string', default: ''}, - value_max: { type: 'string', default: ''}, - value_step: { type: 'string', default: '1'}, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { +export function numberBlock() { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview, value_min, value_max, value_step } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Number', 'formality'), + description: __('Number field, accept integer or float number value', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + halfwidth: { type: 'boolean', default: false }, + value: { type: 'string', default: ''}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + value_min: { type: 'string', default: ''}, + value_max: { type: 'string', default: ''}, + value_step: { type: 'string', default: '1'}, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - return ([ - - - { mainOptions(props) } - - editAttribute(props, "value_min", value)} - /> - editAttribute(props, "value_max", value)} - /> - editAttribute(props, "value_step", value)} - /> - - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview, value_min, value_max, value_step } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } + + return ([ + + + { mainOptions(props) } + + editAttribute(props, "value_min", value)} + /> + editAttribute(props, "value_max", value)} + /> + editAttribute(props, "value_step", value)} + /> + + + { advancedPanel(props) } + + ,
- -
-
-
, - ]) - }, - save () { - return null - }, -}); +
+ { inlineName(props) } + +
+
+ +
+
+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/rating.js b/assets/scripts/editor/blocks/rating.js index 25da851..7b5e472 100644 --- a/assets/scripts/editor/blocks/rating.js +++ b/assets/scripts/editor/blocks/rating.js @@ -43,122 +43,125 @@ const { import { iconRating as blockicon } from '../utility/icons.js' import { glyphStar, glyphRhombus, glyphHeart } from '../utility/icons.js' +export function ratingBlock() { -registerBlockType( blockName, { - title: __('Rating', 'formality'), - description: __('Ask your users for a rating. Score from one to ten.', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - halfwidth: { type: 'boolean', default: false }, - value: { type: 'string', default: ''}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - icon: { type: 'string', default: 'star'}, - value_max: { type: 'string', default: '10'}, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { + registerBlockType( blockName, { + title: __('Rating', 'formality'), + description: __('Ask your users for a rating. Score from one to ten.', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + halfwidth: { type: 'boolean', default: false }, + value: { type: 'string', default: ''}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + icon: { type: 'string', default: 'star'}, + value_max: { type: 'string', default: '10'}, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview, icon, value_max } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview, icon, value_max } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } - let arrayrating = [] - let iconSvg = "" - for (let radiovalue = 1; radiovalue <= value_max; radiovalue++) { arrayrating.push(radiovalue) } - switch(icon) { - case 'heart' : iconSvg = glyphHeart(uid); break; - case 'star' : iconSvg = glyphStar(uid); break; - case 'rhombus' : iconSvg = glyphRhombus(uid); break; - } + let arrayrating = [] + let iconSvg = "" + for (let radiovalue = 1; radiovalue <= value_max; radiovalue++) { arrayrating.push(radiovalue) } + switch(icon) { + case 'heart' : iconSvg = glyphHeart(uid); break; + case 'star' : iconSvg = glyphStar(uid); break; + case 'rhombus' : iconSvg = glyphRhombus(uid); break; + } - return ([ - - - { mainOptions(props, true, true) } - - editAttribute(props, "icon", value)} - /> - editAttribute(props, "value_max", value)} - /> - - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ return ([ + + + { mainOptions(props, true, true) } + + editAttribute(props, "icon", value)} + /> + editAttribute(props, "value_max", value)} + /> + + + { advancedPanel(props) } + + ,
-
{ placeholder }
- {arrayrating.map(singlerating => { - return - - - - })} -
-
, - ]) - }, - save () { - return null - }, -}); +
+ { inlineName(props) } + +
+
+
{ placeholder }
+ {arrayrating.map(singlerating => { + return + + + + })} +
+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/select.js b/assets/scripts/editor/blocks/select.js index cd68339..40964ce 100644 --- a/assets/scripts/editor/blocks/select.js +++ b/assets/scripts/editor/blocks/select.js @@ -39,114 +39,118 @@ const { InspectorControls, } = wp.blockEditor; -registerBlockType( blockName, { - title: __('Select', 'formality'), - description: __('Dropdown list with all available options that users can select.', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - halfwidth: { type: 'boolean', default: false }, - value: { type: 'string', default: ''}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - options: { - type: 'string|array', - attribute: 'options', - default: [], +export function selectBlock() { + + registerBlockType( blockName, { + title: __('Select', 'formality'), + description: __('Dropdown list with all available options that users can select.', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + halfwidth: { type: 'boolean', default: false }, + value: { type: 'string', default: ''}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + options: { + type: 'string|array', + attribute: 'options', + default: [], + }, + option_labels: { type: 'boolean', default: false }, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], }, - option_labels: { type: 'boolean', default: false }, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { + edit(props) { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview, options, option_labels } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview, options, option_labels } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } - return ([ - - - { mainOptions(props) } - - { props.setAttributes({options: val}) }} - >{(value, onChange) => { - return [ - { value.value = v; onChange(value)}} - />, - { value.label = v; onChange(value) }} - />, - ] - }} - editAttribute(props, "option_labels", true, true )} - /> - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ return ([ + + + { mainOptions(props) } + + { props.setAttributes({options: val}) }} + >{(value, onChange) => { + return [ + { value.value = v; onChange(value)}} + />, + { value.label = v; onChange(value) }} + />, + ] + }} + editAttribute(props, "option_labels", true, true )} + /> + + { advancedPanel(props) } + + ,
- -
-
-
, - ]) - }, - save () { - return null - }, -}); + { inlineName(props) } + +
+
+ +
+
+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/step.js b/assets/scripts/editor/blocks/step.js index 9715805..40d3ca2 100644 --- a/assets/scripts/editor/blocks/step.js +++ b/assets/scripts/editor/blocks/step.js @@ -1,6 +1,6 @@ -/** +/** * Formality block - * + * */ const blockName = 'formality/step' @@ -14,71 +14,75 @@ import { } from '../utility/blocks.js' const { __ } = wp.i18n; -const { +const { registerBlockType, } = wp.blocks; -const { +const { PanelBody, TextControl, } = wp.components; -const { +const { InspectorControls, } = wp.blockEditor; import { iconStep as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Step', 'formality'), - description: __('Group your fields into multiple sections, with custom heading.', 'formality'), - icon: blockicon, - category: 'formality_nav', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - description: { type: 'string', default: ''}, - exclude: { type: 'integer', default: 99}, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - edit(props) { - - checkUID(props, 1) - let { name, description, preview } = props.attributes - if ( preview ) { return getPreview(props.name) } +export function stepBlock() { - return ([ - - -

{ __('Place this block before the first field you want to group. This step section will be closed automatically before the next step block (or at the end of the form).', 'formality')}

- editAttribute(props, "name", value)} - /> - editAttribute(props, "description", value)} - /> - - - , -
-

{ name ? name : __('Step name', 'formality') }

-

{ description }

-
, - ]) - }, - save () { - return null - }, -}); \ No newline at end of file + registerBlockType( blockName, { + title: __('Step', 'formality'), + description: __('Group your fields into multiple sections, with custom heading.', 'formality'), + icon: blockicon, + category: 'formality_nav', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + description: { type: 'string', default: ''}, + exclude: { type: 'integer', default: 99}, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + edit(props) { + + checkUID(props, 1) + let { name, description, preview } = props.attributes + if ( preview ) { return getPreview(props.name) } + + return ([ + + +

{ __('Place this block before the first field you want to group. This step section will be closed automatically before the next step block (or at the end of the form).', 'formality')}

+ editAttribute(props, "name", value)} + /> + editAttribute(props, "description", value)} + /> + + + , +
+

{ name ? name : __('Step name', 'formality') }

+

{ description }

+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/switch.js b/assets/scripts/editor/blocks/switch.js index 00df8e4..c847808 100644 --- a/assets/scripts/editor/blocks/switch.js +++ b/assets/scripts/editor/blocks/switch.js @@ -36,91 +36,95 @@ const { import { iconSwitch as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Switch', 'formality'), - description: __('Checkbox input, good for true/false answer or acceptance field.', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - halfwidth: { type: 'boolean', default: false }, - style: { type: 'string', default: 'switch' }, - value: { type: 'string', default: ''}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { +export function switchBlock() { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview, style } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Switch', 'formality'), + description: __('Checkbox input, good for true/false answer or acceptance field.', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + halfwidth: { type: 'boolean', default: false }, + style: { type: 'string', default: 'switch' }, + value: { type: 'string', default: ''}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - return ([ - - - { mainOptions(props, true, true) } - editAttribute(props, "style", value)} - /> - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview, style } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } + + return ([ + + + { mainOptions(props, true, true) } + editAttribute(props, "style", value)} + /> + + { advancedPanel(props) } + + ,
- - -
-
, - ]) - }, - save () { - return null - }, -}); + { inlineName(props) } + +
+
+ + +
+ , + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/text.js b/assets/scripts/editor/blocks/text.js index 3ee92a2..ee333a3 100644 --- a/assets/scripts/editor/blocks/text.js +++ b/assets/scripts/editor/blocks/text.js @@ -34,76 +34,79 @@ const { import { iconText as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Text', 'formality'), - description: __('Standard text field, good for short answers and 1 line information.', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - halfwidth: { type: 'boolean', default: false }, - value: { type: 'string', default: ''}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - preview: { type: 'boolean', default: false }, - }, - supports: { - html: false, - customClassName: false, - }, - example: { attributes: { preview: true } }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { +export function textBlock() { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Text', 'formality'), + description: __('Standard text field, good for short answers and 1 line information.', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + halfwidth: { type: 'boolean', default: false }, + value: { type: 'string', default: ''}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + preview: { type: 'boolean', default: false }, + }, + supports: { + html: false, + customClassName: false, + }, + example: { attributes: { preview: true } }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - return ([ - - - { mainOptions(props) } - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } + + return ([ + + + { mainOptions(props) } + + { advancedPanel(props) } + + ,
- -
-
-
, - ]) - }, - save () { - return null - }, -}); +
+ { inlineName(props) } + +
+
+ +
+
+
, + ]) + }, + save () { + return null + }, + }); +} diff --git a/assets/scripts/editor/blocks/textarea.js b/assets/scripts/editor/blocks/textarea.js index 1ae0ad3..d778901 100644 --- a/assets/scripts/editor/blocks/textarea.js +++ b/assets/scripts/editor/blocks/textarea.js @@ -37,95 +37,99 @@ const { import { iconTextarea as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Textarea', 'formality'), - description: __('Multi-line area, good for texts or long answers.', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - value: { type: 'string', default: ''}, - rows: { type: 'string', default: '3'}, - max_length: { type: 'string', default: '500'}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - preview: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - supports: { - html: false, - customClassName: false, - }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { +export function textareaBlock() { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview, rows, max_length } = props.attributes - let focus = props.isSelected - if ( preview ) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Textarea', 'formality'), + description: __('Multi-line area, good for texts or long answers.', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + value: { type: 'string', default: ''}, + rows: { type: 'string', default: '3'}, + max_length: { type: 'string', default: '500'}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + preview: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + supports: { + html: false, + customClassName: false, + }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - return ([ - - - { mainOptions(props, false) } - - editAttribute(props, "rows", value)} - /> - editAttribute(props, "max_length", value)} - /> - - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview, rows, max_length } = props.attributes + let focus = props.isSelected + if ( preview ) { return getPreview(props.name) } + + return ([ + + + { mainOptions(props, false) } + + editAttribute(props, "rows", value)} + /> + editAttribute(props, "max_length", value)} + /> + + + { advancedPanel(props) } + + ,
{ value.length + " / " + max_length }
- -
-
-
, - ]) - }, - save () { - return null - }, -}); + className="formality__label" + > + { inlineName(props) } + +
+
+
{ value.length + " / " + max_length }
+ +
+
+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/upload.js b/assets/scripts/editor/blocks/upload.js index 8001296..8aaa8c4 100644 --- a/assets/scripts/editor/blocks/upload.js +++ b/assets/scripts/editor/blocks/upload.js @@ -37,119 +37,123 @@ const { import { iconUpload as blockicon } from '../utility/icons.js' -registerBlockType( blockName, { - title: __('Upload', 'formality'), - description: __('Let your users upload files to your form', 'formality'), - icon: blockicon, - category: 'formality', - attributes: { - uid: { type: 'string', default: '' }, - name: { type: 'string', default: ''}, - label: { type: 'string', default: ''}, - placeholder: { type: 'string', default: ''}, - required: { type: 'boolean', default: false }, - maxsize: { type: 'number', default: formality.upload_max > 3 ? 3 : formality.upload_max }, - formats: { type: 'string|array', default: ['jpg', 'jpeg', 'gif', 'png', 'pdf'], }, - value: { type: 'string', default: ''}, - rules: { type: 'string|array', attribute: 'rules', default: [], }, - dbg: { type: 'string|object', default: {}, }, - preview: { type: 'boolean', default: false }, - }, - supports: { - html: false, - customClassName: false, - }, - example: { attributes: { preview: true } }, - transforms: { - from: [{ - type: 'block', - blocks: getBlockTypes(blockName), - transform: function ( attributes ) { return createBlock( blockName, attributes); }, - }], - }, - edit(props) { +export function uploadBlock() { - checkUID(props) - let { name, label, placeholder, required, uid, value, rules, preview, maxsize, formats } = props.attributes - let focus = props.isSelected - const wpformats = formality.upload_formats - if(preview) { return getPreview(props.name) } + registerBlockType( blockName, { + title: __('Upload', 'formality'), + description: __('Let your users upload files to your form', 'formality'), + icon: blockicon, + category: 'formality', + attributes: { + uid: { type: 'string', default: '' }, + name: { type: 'string', default: ''}, + label: { type: 'string', default: ''}, + placeholder: { type: 'string', default: ''}, + required: { type: 'boolean', default: false }, + maxsize: { type: 'number', default: formality.upload_max > 3 ? 3 : formality.upload_max }, + formats: { type: 'string|array', default: ['jpg', 'jpeg', 'gif', 'png', 'pdf'], }, + value: { type: 'string', default: ''}, + rules: { type: 'string|array', attribute: 'rules', default: [], }, + dbg: { type: 'string|object', default: {}, }, + preview: { type: 'boolean', default: false }, + }, + supports: { + html: false, + customClassName: false, + }, + example: { attributes: { preview: true } }, + transforms: { + from: [{ + type: 'block', + blocks: getBlockTypes(blockName), + transform: function ( attributes ) { return createBlock( blockName, attributes); }, + }], + }, + edit(props) { - return ([ - - - { mainOptions(props, false) } - { props.setAttributes({maxsize: val }) }} - min={ 1 } - max={ formality.upload_max } - label={ __( 'Size limit', 'formality' ) } - help={ __( 'Max upload file size', 'formality' ) } - className={ 'components-base-control--sizelimit' } - /> - - { wpformats.map((format) => ( - { - let filtered = [...formats] - if(check) { - filtered.push(format) - } else { - filtered = formats.filter(function(value, index, arr){ return value !== format; }); - } - props.setAttributes({ formats: filtered }) - }} + checkUID(props) + let { name, label, placeholder, required, uid, value, rules, preview, maxsize, formats } = props.attributes + let focus = props.isSelected + const wpformats = formality.upload_formats + if(preview) { return getPreview(props.name) } + + return ([ + + + { mainOptions(props, false) } + { props.setAttributes({maxsize: val }) }} + min={ 1 } + max={ formality.upload_max } + label={ __( 'Size limit', 'formality' ) } + help={ __( 'Max upload file size', 'formality' ) } + className={ 'components-base-control--sizelimit' } /> - ))} - - - { advancedPanel(props) } - - , -
-
- { inlineName(props) } - -
+ + { wpformats.map((format) => ( + { + let filtered = [...formats] + if(check) { + filtered.push(format) + } else { + filtered = formats.filter(function(value, index, arr){ return value !== format; }); + } + props.setAttributes({ formats: filtered }) + }} + /> + ))} + + + { advancedPanel(props) } + + ,
- - -
-
-
, - ]) - }, - save () { - return null - }, -}); +
+ { inlineName(props) } + +
+
+ + +
+
+
, + ]) + }, + save () { + return null + }, + }); + +} diff --git a/assets/scripts/editor/blocks/widget.js b/assets/scripts/editor/blocks/widget.js index 4da3133..6ff5bce 100644 --- a/assets/scripts/editor/blocks/widget.js +++ b/assets/scripts/editor/blocks/widget.js @@ -1,6 +1,6 @@ -/** +/** * Formality widget block - * + * */ import { iconWidget as blockicon } from '../utility/icons.js' @@ -12,11 +12,11 @@ const { sprintf, } = wp.i18n; -const { +const { registerBlockType, } = wp.blocks; -const { +const { PanelBody, Button, TextControl, @@ -33,191 +33,195 @@ const { createElement, } = wp.element; -const { +const { InspectorControls, } = wp.blockEditor; const { serverSideRender } = wp; //WordPress form inputs and server-side renderer const { withSelect } = wp.data; -registerBlockType( 'formality/widget', { - title: __( 'Formality form', 'formality' ), // Block title. - description: __('Embed Formality forms in your posts or pages.', 'formality'), - icon: blockicon, - category: 'widgets', - supports: { align: true }, - attributes: { - id: { type: 'integer', default: 0 }, - remove_bg: { type: 'boolean', default: false }, - is_sidebar: { type: 'boolean', default: false }, - hide_title: { type: 'boolean', default: false }, - invert_colors: { type: 'boolean', default: false }, - disable_button: { type: 'boolean', default: false }, - cta_label: { type: 'string', default: __('Call to action', 'formality') }, - preview: { type: 'boolean', default: false }, - has_copied: { type: 'boolean', default: false }, - }, - example: { attributes: { preview: true } }, - getEditWrapperProps() { - return { 'data-align': '' }; - }, - //display the post title - edit: withSelect( function( select ) { - return { forms_raw: select( 'core' ).getEntityRecords( 'postType', 'formality_form' ) }; - })( function( props ) { - - if ( props.attributes.preview ) { return getPreview(props.name) } - - let forms = []; - let formExist = false; - if(props.forms_raw) { - forms.push( { value: 0, label: __('Select a form to embed', 'formality'), disabled: true } ); - props.forms_raw.forEach((form) => { - forms.push({value:form.id, label:form.title.rendered}) - if(form.id==props.attributes.id) { formExist = true } - }); - } else { - forms.push( { value: 0, label: __('Loading your forms...', 'formality'), disabled: true } ) - } - - const serverForm = createElement( serverSideRender, { - block: 'formality/widget', - attributes: props.attributes, - }) - - const editForm = ( - -
- {__("Edit this form", 'formality')} -
- - ) - - const widgetForm = ( - - { props.attributes.is_sidebar ? "" : editForm } - { serverForm } - - ) - - const blockInfo = () => { +export function widgetBlock() { + + registerBlockType( 'formality/widget', { + title: __( 'Formality form', 'formality' ), // Block title. + description: __('Embed Formality forms in your posts or pages.', 'formality'), + icon: blockicon, + category: 'widgets', + supports: { align: true }, + attributes: { + id: { type: 'integer', default: 0 }, + remove_bg: { type: 'boolean', default: false }, + is_sidebar: { type: 'boolean', default: false }, + hide_title: { type: 'boolean', default: false }, + invert_colors: { type: 'boolean', default: false }, + disable_button: { type: 'boolean', default: false }, + cta_label: { type: 'string', default: __('Call to action', 'formality') }, + preview: { type: 'boolean', default: false }, + has_copied: { type: 'boolean', default: false }, + }, + example: { attributes: { preview: true } }, + getEditWrapperProps() { + return { 'data-align': '' }; + }, + //display the post title + edit: withSelect( function( select ) { + return { forms_raw: select( 'core' ).getEntityRecords( 'postType', 'formality_form' ) }; + })( function( props ) { + + if ( props.attributes.preview ) { return getPreview(props.name) } + + let forms = []; + let formExist = false; if(props.forms_raw) { - if(forms.length == 1) { - return - { __("Currently you can't use this block, because you have no published Formality form.", 'formality') + ' ' } - {__("Create the first one.", 'formality')} - - } else if(formExist) { - return - {__("Edit this form", 'formality')} - - } + forms.push( { value: 0, label: __('Select a form to embed', 'formality'), disabled: true } ); + props.forms_raw.forEach((form) => { + forms.push({value:form.id, label:form.title.rendered}) + if(form.id==props.attributes.id) { formExist = true } + }); + } else { + forms.push( { value: 0, label: __('Loading your forms...', 'formality'), disabled: true } ) } - }; - - const fieldsEmbed = ( - - { props.setAttributes({remove_bg: value}) }} - /> - { props.setAttributes({hide_title: value}) }} - /> - - ) - - const fieldsSidebar = ( - - { props.setAttributes({disable_button: value}) }} - help={ __('Remove button and open this form with a simple text link', 'formality') } - /> - { props.attributes.disable_button ? -

{__('Manually set this hashtag as url link (href) in your text content', 'formality') }

- - - { props.setAttributes({has_copied: true}) } } - onFinishCopy={ () => { props.setAttributes({has_copied: false}) } } - icon={ props.attributes.has_copied ? 'yes' : 'admin-page' } - text={ '#formality-open-' + props.attributes.id } - > - - - : - { props.setAttributes({cta_label: value}) }} - /> - { props.setAttributes({invert_colors: value}) }} - /> - + + const serverForm = createElement( serverSideRender, { + block: 'formality/widget', + attributes: props.attributes, + }) + + const editForm = ( + + + + ) + + const widgetForm = ( + + { props.attributes.is_sidebar ? "" : editForm } + { serverForm } + + ) + + const blockInfo = () => { + if(props.forms_raw) { + if(forms.length == 1) { + return + { __("Currently you can't use this block, because you have no published Formality form.", 'formality') + ' ' } + {__("Create the first one.", 'formality')} + + } else if(formExist) { + return + {__("Edit this form", 'formality')} + + } } - - ) - - const noForm = ( - -
{ props.attributes.id && (!props.forms_raw) ? __('Loading your form...', 'formality') : __('Please select a form to embed, from the right sidebar', 'formality')}
- - ) - - const hiddenWidget = ( - -
{ sprintf( /* translators: link hashtag */ __( 'Manually set "%s" as url link (href) in your text content', 'formality' ), '#formality-open-' + props.attributes.id ) }
- - ) - - return ([ - { props.attributes.id && formExist ? ( props.attributes.disable_button ? hiddenWidget : widgetForm ) : noForm }, - - - { props.setAttributes({id: parseInt(value) }) }} - help={ blockInfo() } + }; + + const fieldsEmbed = ( + + { props.setAttributes({remove_bg: value}) }} + /> + { props.setAttributes({hide_title: value}) }} + /> + + ) + + const fieldsSidebar = ( + + { props.setAttributes({disable_button: value}) }} + help={ __('Remove button and open this form with a simple text link', 'formality') } /> - - +

{__('Manually set this hashtag as url link (href) in your text content', 'formality') }

+ + + { props.setAttributes({has_copied: true}) } } + onFinishCopy={ () => { props.setAttributes({has_copied: false}) } } + icon={ props.attributes.has_copied ? 'yes' : 'admin-page' } + text={ '#formality-open-' + props.attributes.id } + > + + + : + { props.setAttributes({cta_label: value}) }} + /> + { props.setAttributes({invert_colors: value}) }} + /> + + } + + ) + + const noForm = ( + +
{ props.attributes.id && (!props.forms_raw) ? __('Loading your form...', 'formality') : __('Please select a form to embed, from the right sidebar', 'formality')}
+ + ) + + const hiddenWidget = ( + +
{ sprintf( /* translators: link hashtag */ __( 'Manually set "%s" as url link (href) in your text content', 'formality' ), '#formality-open-' + props.attributes.id ) }
+ + ) + + return ([ + { props.attributes.id && formExist ? ( props.attributes.disable_button ? hiddenWidget : widgetForm ) : noForm }, + + + { props.setAttributes({id: parseInt(value) }) }} + help={ blockInfo() } + /> + - - - - - { props.attributes.is_sidebar ? fieldsSidebar : fieldsEmbed } - - , - ]) - }), - save(){ - return null; - }, -}); \ No newline at end of file + + + + + + { props.attributes.is_sidebar ? fieldsSidebar : fieldsEmbed } + + , + ]) + }), + save(){ + return null; + }, + }); + +} diff --git a/assets/scripts/editor/main/init.js b/assets/scripts/editor/main/init.js deleted file mode 100644 index 366bf62..0000000 --- a/assets/scripts/editor/main/init.js +++ /dev/null @@ -1,69 +0,0 @@ -//add half-width class to formality blocks - var el = wp.element.createElement; - var formalityBlockWidth = wp.compose.createHigherOrderComponent( function( BlockListBlock ) { - return function( props ) { - // eslint-disable-next-line no-undef - var newProps = props.attributes.halfwidth ? lodash.assign({}, props, { className: "wp-block--halfwidth" }) : props; - return el( BlockListBlock, newProps ); - }; - }, 'formality_block-width' ); - wp.hooks.addFilter( 'editor.BlockListBlock', 'formality_block-width', formalityBlockWidth ); - -//force panel open - function forcePanel() { - //force sidebar open - if(!wp.data.select('core/edit-post').isEditorSidebarOpened()) { - wp.data.dispatch('core/edit-post').openGeneralSidebar('edit-post/document') - } - //force panel open - // check all preferences -> wp.data.select('core/edit-post').getPreferences() - if(!wp.data.select('core/edit-post').isEditorPanelEnabled('formality-sidebar/formality-sidebar')) { - wp.data.dispatch('core/edit-post').toggleEditorPanelEnabled('formality-sidebar/formality-sidebar') - } - if(!wp.data.select('core/edit-post').isEditorPanelOpened('formality-sidebar/formality-sidebar')) { - wp.data.dispatch('core/edit-post').toggleEditorPanelOpened('formality-sidebar/formality-sidebar') - } - - } - -//remove formality blocks from other post type editor - function removeBlocks() { - let blocks = [ - 'formality/text', - 'formality/email', - 'formality/textarea', - 'formality/message', - 'formality/number', - 'formality/switch', - 'formality/multiple', - 'formality/rating', - 'formality/step', - 'formality/select', - 'formality/media', - 'formality/upload', - ]; - blocks.forEach(function(block){ - wp.blocks.unregisterBlockType(block) - }) - } - -//trigger footer click - function formFooter() { - $(document).on('click', '.block-list-appender', function(e){ - if(!$(e.target).is('button')) { - wp.data.dispatch('core/block-editor').clearSelectedBlock - $('.formality-toggle-settings').click() - $('.formality-toggle-footer:not(.is-opened) .components-panel__body-toggle').click() - } - }) - } - -//launch functions on domready - wp.domReady( function() { - if(document.body.classList.contains('post-type-formality_form')) { - forcePanel() - formFooter() - } else { - removeBlocks() - } - }); diff --git a/assets/scripts/editor/main/sidebar.js b/assets/scripts/editor/plugins/sidebar.js similarity index 98% rename from assets/scripts/editor/main/sidebar.js rename to assets/scripts/editor/plugins/sidebar.js index 2e800d0..e5707ca 100644 --- a/assets/scripts/editor/main/sidebar.js +++ b/assets/scripts/editor/plugins/sidebar.js @@ -6,12 +6,6 @@ import React from 'react' const { __ } = wp.i18n; -const { - //PluginSidebar, - //PluginSidebarMoreMenuItem, - PluginDocumentSettingPanel, -} = wp.editPost; - const { registerPlugin } = wp.plugins; const { @@ -31,10 +25,6 @@ const { TabPanel, } = wp.components; -const { - MediaUpload, -} = wp.blockEditor; - const { Component, Fragment, @@ -114,6 +104,7 @@ class Formality_Sidebar extends Component { const postId = wp.data.select("core/editor").getCurrentPostId(); const postPermalink = wp.data.select('core/editor').getPermalink(); + const { MediaUpload } = wp.blockEditor; let tabAppearance = ( @@ -491,8 +482,10 @@ class Formality_Sidebar extends Component { } } -const FormalitySidebarDocument = () => { - if(wp.data.select("core/editor").getCurrentPostType() == "formality_form") { +export function formSidebar() { + + registerPlugin('formality-sidebar', { render: function(){ + const { PluginDocumentSettingPanel } = wp.editPost; return ( { ) - } - return ( ) -} + }}); -registerPlugin('formality-sidebar', { render: FormalitySidebarDocument }); +} diff --git a/assets/scripts/editor/utility/blocks.js b/assets/scripts/editor/utility/blocks.js index 7f2558b..8e70912 100644 --- a/assets/scripts/editor/utility/blocks.js +++ b/assets/scripts/editor/utility/blocks.js @@ -19,11 +19,6 @@ const { Fragment, } = wp.element; -const { - MediaUpload, - RichText, -} = wp.blockEditor; - const { __ } = wp.i18n; @@ -219,6 +214,7 @@ const { __ } = wp.i18n; //return standard sidebar let inlineName = (props) => { const name = props.attributes.name + const { RichText } = wp.blockEditor return ([ wp.data.select('core/edit-post').getPreferences() + if(!wp.data.select('core/edit-post').isEditorPanelEnabled('formality-sidebar/formality-sidebar')) { + wp.data.dispatch('core/edit-post').toggleEditorPanelEnabled('formality-sidebar/formality-sidebar') + } + if(!wp.data.select('core/edit-post').isEditorPanelOpened('formality-sidebar/formality-sidebar')) { + wp.data.dispatch('core/edit-post').toggleEditorPanelOpened('formality-sidebar/formality-sidebar') + } + + } + +//trigger footer click + function formFooter() { + $(document).on('click', '.block-list-appender', function(e){ + if(!$(e.target).is('button')) { + wp.data.dispatch('core/block-editor').clearSelectedBlock + $('.formality-toggle-settings').click() + $('.formality-toggle-footer:not(.is-opened) .components-panel__body-toggle').click() + } + }) + } + +export function pageLoad() { + halfWidthFields() + //launch functions on domready + wp.domReady(function() { + forcePanel() + formFooter() + }); +} diff --git a/includes/class-formality.php b/includes/class-formality.php index 91c7e06..3f74186 100755 --- a/includes/class-formality.php +++ b/includes/class-formality.php @@ -59,7 +59,7 @@ public function __construct() { $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.3.5'; $this->formality = 'formality'; - $this->fse = version_compare( $GLOBALS['wp_version'], '5.7.9', '>' ); + $this->fse = class_exists('WP_Block_Editor_Context'); $this->load_dependencies(); $this->set_locale(); From db5f7aeeabc75397698ca12af25ab55d958c7be6 Mon Sep 17 00:00:00 2001 From: Michele Giorgi Date: Sun, 8 Aug 2021 17:43:00 +0200 Subject: [PATCH 2/2] release 1.3.6 --- admin/class-formality-editor.php | 6 +++++ assets/styles/admin/widget.scss | 8 ++++++- assets/styles/public/common/_embed.scss | 24 +++++++++++++------- assets/styles/public/common/_global.scss | 19 ---------------- assets/styles/public/modifiers/_loading.scss | 17 ++++++++++++++ formality.php | 4 ++-- includes/class-formality-setup.php | 1 + includes/class-formality.php | 3 ++- package.json | 2 +- readme.txt | 11 +++++++-- webpack.mix.js | 2 +- 11 files changed, 62 insertions(+), 35 deletions(-) diff --git a/admin/class-formality-editor.php b/admin/class-formality-editor.php index 2d4f0f3..d59a368 100755 --- a/admin/class-formality-editor.php +++ b/admin/class-formality-editor.php @@ -263,4 +263,10 @@ public function prevent_classic_editor($can_edit, $post) { return $can_edit; } + public function remove_editor_styles() { + global $current_screen; + if('formality_form' == $current_screen->post_type) { + remove_editor_styles(); + } + } } diff --git a/assets/styles/admin/widget.scss b/assets/styles/admin/widget.scss index 0a495fc..874a941 100644 --- a/assets/styles/admin/widget.scss +++ b/assets/styles/admin/widget.scss @@ -14,6 +14,12 @@ } } +.formality__cta-wrap { + a.formality__cta { + pointer-events: none !important; + } +} + form.formality { pointer-events: none !important; max-height: 400px; @@ -38,4 +44,4 @@ form.formality { height: 10em; } } -} \ No newline at end of file +} diff --git a/assets/styles/public/common/_embed.scss b/assets/styles/public/common/_embed.scss index 0d75b01..89bdbd3 100644 --- a/assets/styles/public/common/_embed.scss +++ b/assets/styles/public/common/_embed.scss @@ -112,14 +112,6 @@ body { .formality__cta-wrap { display: block; margin-bottom: 2em; - &--hidden { - display: none !important; - } - &--align { - &-center { text-align: center; } - &-left { text-align: left; } - &-right { text-align: right; } - } a.formality__cta { border: none; all: initial; @@ -186,5 +178,21 @@ body { } } } + &--hidden { + display: none !important; + } + &--align { + &-center { text-align: center; } + &-left { text-align: left; } + &-right { text-align: right; } + &-wide, + &-full { + a.formality__cta { + width: 100%; + text-align: center; + display: block; + } + } + } } } diff --git a/assets/styles/public/common/_global.scss b/assets/styles/public/common/_global.scss index 2650af2..02d7996 100755 --- a/assets/styles/public/common/_global.scss +++ b/assets/styles/public/common/_global.scss @@ -77,25 +77,6 @@ z-index: 0; } } - &.formality--first-loading { - cursor: wait !important; - * { - cursor: wait !important - } - &:after { - position: absolute; - top: calc(50% - 1em); - left: calc(50% - 1em); - display: block; - border: .2em solid var(--formality_bg); - border-top: .2em solid var(--formality_col1); - border-radius: 50%; - width: 2em; - height: 2em; - animation: spin 0.6s linear infinite; - box-sizing: content-box; - } - } p, input, textarea, diff --git a/assets/styles/public/modifiers/_loading.scss b/assets/styles/public/modifiers/_loading.scss index bb9168b..0e819af 100644 --- a/assets/styles/public/modifiers/_loading.scss +++ b/assets/styles/public/modifiers/_loading.scss @@ -30,6 +30,23 @@ } } &.formality--first-loading { + cursor: wait !important; + * { + cursor: wait !important + } + &:after { + position: absolute; + top: calc(50% - 1em); + left: calc(50% - 1em); + display: block; + border: .2em solid var(--formality_bg); + border-top: .2em solid var(--formality_col1); + border-radius: 50%; + width: 2em; + height: 2em; + animation: spin 0.6s linear infinite; + box-sizing: content-box; + } .formality__body .formality__nav__list { backdrop-filter: none !important; } diff --git a/formality.php b/formality.php index 97ed502..708dd3e 100755 --- a/formality.php +++ b/formality.php @@ -12,7 +12,7 @@ * Plugin Name: Formality * Plugin URI: https://formality.dev * Description: Forms made simple (and cute). Designless, multistep, conversational, secure, all-in-one WordPress forms plugin. - * Version: 1.3.5 + * Version: 1.3.6 * Author: Michele Giorgi * Author URI: https://giorgi.io * License: GPLv3 @@ -51,7 +51,7 @@ /** * Currently plugin version. */ -define( 'FORMALITY_VERSION', '1.3.5' ); +define( 'FORMALITY_VERSION', '1.3.6' ); define( 'FORMALITY_PATH', plugin_dir_path( __FILE__ )); /** diff --git a/includes/class-formality-setup.php b/includes/class-formality-setup.php index 5ad144d..2152b18 100755 --- a/includes/class-formality-setup.php +++ b/includes/class-formality-setup.php @@ -77,6 +77,7 @@ public function post_types() { 'show_ui' => true, 'supports' => array( 'title', 'author', 'editor', 'custom-fields' ), 'show_in_menu' => 'formality_menu', + 'show_in_nav_menus' => true, ) ); $result_labels = array( diff --git a/includes/class-formality.php b/includes/class-formality.php index 3f74186..28db240 100755 --- a/includes/class-formality.php +++ b/includes/class-formality.php @@ -57,7 +57,7 @@ class Formality { */ public function __construct() { - $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.3.5'; + $this->version = defined( 'FORMALITY_VERSION' ) ? FORMALITY_VERSION : '1.3.6'; $this->formality = 'formality'; $this->fse = class_exists('WP_Block_Editor_Context'); @@ -160,6 +160,7 @@ private function define_admin_hooks() { $this->loader->add_filter( 'use_block_editor_for_post_type', $plugin_editor, 'prevent_classic_editor', PHP_INT_MAX, 2 ); $this->loader->add_filter( 'gutenberg_can_edit_post_type', $plugin_editor, 'prevent_classic_editor', PHP_INT_MAX, 2 ); $this->loader->add_action( 'rest_api_init', $plugin_editor, 'templates_endpoint' ); + //$this->loader->add_action( 'admin_init', $plugin_editor, 'remove_editor_styles' ); } diff --git a/package.json b/package.json index 338151d..4c6a598 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Formality", - "version": "1.3.5", + "version": "1.3.6", "author": "Michele Giorgi ", "homepage": "https://giorgi.io", "private": true, diff --git a/readme.txt b/readme.txt index bdb2a31..55f9a0c 100644 --- a/readme.txt +++ b/readme.txt @@ -2,9 +2,9 @@ Contributors: michelegiorgi Donate link: https://www.paypal.me/michelegiorgi/ Tags: form, conversational, multistep, design form, gutenberg, block editor -Requires at least: 5.6 +Requires at least: 5.7 Tested up to: 5.8 -Stable tag: 1.3.5 +Stable tag: 1.3.6 Requires PHP: 7.0 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.txt @@ -61,6 +61,13 @@ You will find **Formality** menu in your WordPress admin screen. == Changelog == += 1.3.6 = +Release Date: Aug 8th, 2021 + +* Formality block is now available on Widget block editor +* Bump minimum WordPress required version to v5.7 +* Minor UI fixes + = 1.3.5 = Release Date: Jul 21th, 2021 diff --git a/webpack.mix.js b/webpack.mix.js index 2d6af68..3274c1c 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -16,7 +16,7 @@ mix .js('assets/scripts/public.js', 'scripts/formality-public.js') .js('assets/scripts/editor.js', 'scripts/formality-editor.js') .js('assets/scripts/admin.js', 'scripts/formality-admin.js') - .banner({ banner: 'Formality v1.3.4' }); + .banner({ banner: 'Formality v1.3.6' }); mix .copyWatched('assets/images/admin/**', 'dist/images/admin')