From 63489cb657d1b7408cc45122ce1a2eb9147cb162 Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Tue, 23 Jul 2024 16:31:37 +0300 Subject: [PATCH] feat: create Modal from Popup --- blocks.json | 3 + inc/class-registration.php | 11 +- plugins/otter-pro/inc/class-main.php | 1 + .../inc/render/class-modal-block.php | 120 ++++++ src/blocks/blocks/index.js | 1 + src/blocks/blocks/modal/block.json | 150 ++++++++ src/blocks/blocks/modal/index.js | 58 +++ src/blocks/blocks/popup/editor.scss | 4 +- src/blocks/blocks/popup/style.scss | 8 +- src/pro/blocks/index.js | 1 + src/pro/blocks/modal/block.json | 150 ++++++++ src/pro/blocks/modal/edit.js | 218 +++++++++++ src/pro/blocks/modal/index.js | 48 +++ src/pro/blocks/modal/inspector.js | 343 ++++++++++++++++++ src/pro/blocks/modal/save.js | 52 +++ src/pro/blocks/modal/types.d.ts | 48 +++ 16 files changed, 1211 insertions(+), 5 deletions(-) create mode 100644 plugins/otter-pro/inc/render/class-modal-block.php create mode 100644 src/blocks/blocks/modal/block.json create mode 100644 src/blocks/blocks/modal/index.js create mode 100644 src/pro/blocks/modal/block.json create mode 100644 src/pro/blocks/modal/edit.js create mode 100644 src/pro/blocks/modal/index.js create mode 100644 src/pro/blocks/modal/inspector.js create mode 100644 src/pro/blocks/modal/save.js create mode 100644 src/pro/blocks/modal/types.d.ts diff --git a/blocks.json b/blocks.json index 4d6889618..5f3b64feb 100644 --- a/blocks.json +++ b/blocks.json @@ -148,6 +148,9 @@ "popup/style.css": "blocks/blocks/popup/style.scss" } }, + "modal": { + "block": "blocks/blocks/modal/block.json" + }, "posts-grid": { "block": "blocks/blocks/posts/block.json", "assets": { diff --git a/inc/class-registration.php b/inc/class-registration.php index 4858966e8..55c3416bd 100644 --- a/inc/class-registration.php +++ b/inc/class-registration.php @@ -623,7 +623,10 @@ function() { wp_script_add_data( 'otter-tabs', 'defer', true ); } - if ( ! self::$scripts_loaded['popup'] && has_block( 'themeisle-blocks/popup', $post ) ) { + if ( + ! self::$scripts_loaded['popup'] && + ( has_block( 'themeisle-blocks/popup', $post ) || has_block( 'themeisle-blocks/modal', $post ) ) + ) { $asset_file = include OTTER_BLOCKS_PATH . '/build/blocks/popup.asset.php'; wp_register_script( 'otter-popup', OTTER_BLOCKS_URL . 'build/blocks/popup.js', $asset_file['dependencies'], $asset_file['version'], true ); wp_script_add_data( 'otter-popup', 'defer', true ); @@ -663,6 +666,11 @@ public function enqueue_block_styles( $post ) { continue; } + // Shared styles. + if ( 'modal' === $block ) { + $block = 'popup'; + } + $block_path = OTTER_BLOCKS_PATH . '/build/blocks/' . $block; $style = OTTER_BLOCKS_URL . 'build/blocks/' . $block . '/style.css'; @@ -750,6 +758,7 @@ public function register_blocks() { 'lottie', 'plugin-cards', 'popup', + 'modal', 'posts-grid', 'pricing', 'progress-bar', diff --git a/plugins/otter-pro/inc/class-main.php b/plugins/otter-pro/inc/class-main.php index 406876b67..9950de232 100644 --- a/plugins/otter-pro/inc/class-main.php +++ b/plugins/otter-pro/inc/class-main.php @@ -140,6 +140,7 @@ public function register_dynamic_blocks( $dynamic_blocks ) { 'form-file' => '\ThemeIsle\OtterPro\Render\Form_File_Block', 'form-hidden-field' => '\ThemeIsle\OtterPro\Render\Form_Hidden_Block', 'form-stripe-field' => '\ThemeIsle\OtterPro\Render\Form_Stripe_Block', + 'modal' => '\ThemeIsle\OtterPro\Render\Modal_Block', ); $dynamic_blocks = array_merge( $dynamic_blocks, $blocks ); diff --git a/plugins/otter-pro/inc/render/class-modal-block.php b/plugins/otter-pro/inc/render/class-modal-block.php new file mode 100644 index 000000000..239f396c5 --- /dev/null +++ b/plugins/otter-pro/inc/render/class-modal-block.php @@ -0,0 +1,120 @@ +'; + + $modal_wrap = '
'; + $modal_wrap .= ''; + + $modal_content = '
'; + if ( ! empty( $attributes['showClose'] ) ) { + $modal_content .= '
'; + $modal_content .= ''; + $modal_content .= '
'; + } + + $modal_content .= '
'; + foreach ( $block->inner_blocks as $inner_block ) { + $modal_content .= $inner_block->render(); + } + $modal_content .= '
'; // Close otter-popup__modal_body. + $modal_content .= '
'; // Close otter-popup__modal_content. + + $modal_wrap .= $modal_content; + $modal_wrap .= '
'; // Close otter-popup__modal_wrap. + + $container_tag .= $modal_wrap; + $container_tag .= ''; // Close container tag. + + return $container_tag; + } +} diff --git a/src/blocks/blocks/index.js b/src/blocks/blocks/index.js index b51b0798e..d78c5c91a 100644 --- a/src/blocks/blocks/index.js +++ b/src/blocks/blocks/index.js @@ -24,3 +24,4 @@ import './stripe-checkout/index.js'; import './tabs/index.js'; import './deprecated/index.js'; import './content-generator/index.js'; +import './modal/index.js'; diff --git a/src/blocks/blocks/modal/block.json b/src/blocks/blocks/modal/block.json new file mode 100644 index 000000000..472769ab8 --- /dev/null +++ b/src/blocks/blocks/modal/block.json @@ -0,0 +1,150 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "themeisle-blocks/modal", + "title": "Modal", + "category": "themeisle-blocks", + "description": "Display your content in beautiful Modal with many customization options. Powered by Otter.", + "keywords": [ "modal", "lightbox" ], + "textdomain": "otter-blocks", + "attributes": { + "id": { + "type": "string" + }, + "minWidth": { + "type": ["number", "string"] + }, + "maxWidth": { + "type": ["number", "string"] + }, + "trigger": { + "type": "string" + }, + "wait": { + "type": "number" + }, + "anchor": { + "type": "string" + }, + "scroll": { + "type": "number" + }, + "showClose": { + "type": "boolean", + "default": true + }, + "outsideClose": { + "type": "boolean", + "default": true + }, + "anchorClose": { + "type": "boolean", + "default": false + }, + "closeAnchor": { + "type": "string" + }, + "recurringClose": { + "type": "boolean", + "default": false + }, + "recurringTime": { + "type": "number" + }, + "backgroundColor": { + "type": "string" + }, + "closeColor": { + "type": "string" + }, + "overlayColor": { + "type": "string" + }, + "overlayOpacity": { + "type": "number" + }, + "lockScrolling": { + "type": "boolean" + }, + "padding": { + "type": "object" + }, + "paddingTablet": { + "type": "object" + }, + "paddingMobile": { + "type": "object" + }, + "borderWidth": { + "type": "object" + }, + "borderRadius": { + "type": "object" + }, + "borderColor": { + "type": "string" + }, + "borderStyle": { + "type": "string" + }, + "width": { + "type": "string" + }, + "widthTablet": { + "type": "string" + }, + "widthMobile": { + "type": "string" + }, + "heightMode": { + "type": "string" + }, + "height":{ + "type": "string" + }, + "heightTablet":{ + "type": "string" + }, + "heightMobile":{ + "type": "string" + }, + "verticalPosition": { + "type": "string" + }, + "horizontalPosition": { + "type": "string" + }, + "verticalPositionTablet": { + "type": "string" + }, + "horizontalPositionTablet": { + "type": "string" + }, + "verticalPositionMobile": { + "type": "string" + }, + "horizontalPositionMobile": { + "type": "string" + }, + "closeButtonType": { + "type": "string" + }, + "boxShadow": { + "type": "object", + "default": { + "active": false, + "colorOpacity": 50, + "blur": 5, + "spread": 1, + "horizontal": 0, + "vertical": 0 + } + }, + "disableOn": { + "type": "string" + } + }, + "editorStyle": "otter-popup-editor", + "style": "otter-popup-style", + "script": "otter-popup" +} diff --git a/src/blocks/blocks/modal/index.js b/src/blocks/blocks/modal/index.js new file mode 100644 index 000000000..5d5025690 --- /dev/null +++ b/src/blocks/blocks/modal/index.js @@ -0,0 +1,58 @@ +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; + +import { registerBlockType } from '@wordpress/blocks'; + +import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; + +import { Placeholder } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import { popupIcon as icon } from '../../helpers/icons'; + +const { name } = metadata; + +if ( ! Boolean( window.themeisleGutenberg.hasPro ) ) { + registerBlockType( name, { + ...metadata, + title: __( 'Modal (PRO)', 'otter-blocks' ), + description: __( 'Display your content in beautiful Modal with many customization options. Powered by Otter.', 'otter-blocks' ), + icon, + keywords: [ + 'modal', + 'lightbox' + ], + edit: () => { + const instructions = sprintf( + __( 'You need to activate your Otter Pro to use %1$s block.', 'otter-blocks' ), + metadata.title + ); + + return ( +
+ +
+ ); + }, + save() { + return ( +
+ +
+ ); + }, + example: { + attributes: {} + } + }); +} diff --git a/src/blocks/blocks/popup/editor.scss b/src/blocks/blocks/popup/editor.scss index 97b85c6ce..c6cd09802 100644 --- a/src/blocks/blocks/popup/editor.scss +++ b/src/blocks/blocks/popup/editor.scss @@ -1,6 +1,6 @@ @import 'style'; -.wp-block-themeisle-blocks-popup { +:is( .wp-block-themeisle-blocks-modal, .wp-block-themeisle-blocks-popup ) { .otter-popup__modal_wrap { z-index: 2; } @@ -12,7 +12,7 @@ } .is-sidebar-opened { - .wp-block-themeisle-blocks-popup { + :is( .wp-block-themeisle-blocks-modal, .wp-block-themeisle-blocks-popup ) { .otter-popup__modal_content { margin-right: 295px; } diff --git a/src/blocks/blocks/popup/style.scss b/src/blocks/blocks/popup/style.scss index 99415996c..8a3236b10 100644 --- a/src/blocks/blocks/popup/style.scss +++ b/src/blocks/blocks/popup/style.scss @@ -1,6 +1,6 @@ $base-index: 99999 !default; -.wp-block-themeisle-blocks-popup { +:is( .wp-block-themeisle-blocks-modal, .wp-block-themeisle-blocks-popup ) { --min-width: 400px; --background-color: #fff; --close-color: #000; @@ -200,7 +200,7 @@ $base-index: 99999 !default; } body:has(#wpadminbar) { - .wp-block-themeisle-blocks-popup { + :is( .wp-block-themeisle-blocks-modal, .wp-block-themeisle-blocks-popup ) { .otter-popup__modal_content { margin-top: 25px; } @@ -216,3 +216,7 @@ body:has(#wpadminbar) { opacity:1 } } + +.otter-hide-content { + display: none; +} diff --git a/src/pro/blocks/index.js b/src/pro/blocks/index.js index 9c726a052..05f47e95a 100644 --- a/src/pro/blocks/index.js +++ b/src/pro/blocks/index.js @@ -8,3 +8,4 @@ import './woo-comparison/index.js'; import './file/index.js'; import './form-hidden-field/index.js'; import './form-stripe-field/index.js'; +import './modal/index.js'; diff --git a/src/pro/blocks/modal/block.json b/src/pro/blocks/modal/block.json new file mode 100644 index 000000000..472769ab8 --- /dev/null +++ b/src/pro/blocks/modal/block.json @@ -0,0 +1,150 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "themeisle-blocks/modal", + "title": "Modal", + "category": "themeisle-blocks", + "description": "Display your content in beautiful Modal with many customization options. Powered by Otter.", + "keywords": [ "modal", "lightbox" ], + "textdomain": "otter-blocks", + "attributes": { + "id": { + "type": "string" + }, + "minWidth": { + "type": ["number", "string"] + }, + "maxWidth": { + "type": ["number", "string"] + }, + "trigger": { + "type": "string" + }, + "wait": { + "type": "number" + }, + "anchor": { + "type": "string" + }, + "scroll": { + "type": "number" + }, + "showClose": { + "type": "boolean", + "default": true + }, + "outsideClose": { + "type": "boolean", + "default": true + }, + "anchorClose": { + "type": "boolean", + "default": false + }, + "closeAnchor": { + "type": "string" + }, + "recurringClose": { + "type": "boolean", + "default": false + }, + "recurringTime": { + "type": "number" + }, + "backgroundColor": { + "type": "string" + }, + "closeColor": { + "type": "string" + }, + "overlayColor": { + "type": "string" + }, + "overlayOpacity": { + "type": "number" + }, + "lockScrolling": { + "type": "boolean" + }, + "padding": { + "type": "object" + }, + "paddingTablet": { + "type": "object" + }, + "paddingMobile": { + "type": "object" + }, + "borderWidth": { + "type": "object" + }, + "borderRadius": { + "type": "object" + }, + "borderColor": { + "type": "string" + }, + "borderStyle": { + "type": "string" + }, + "width": { + "type": "string" + }, + "widthTablet": { + "type": "string" + }, + "widthMobile": { + "type": "string" + }, + "heightMode": { + "type": "string" + }, + "height":{ + "type": "string" + }, + "heightTablet":{ + "type": "string" + }, + "heightMobile":{ + "type": "string" + }, + "verticalPosition": { + "type": "string" + }, + "horizontalPosition": { + "type": "string" + }, + "verticalPositionTablet": { + "type": "string" + }, + "horizontalPositionTablet": { + "type": "string" + }, + "verticalPositionMobile": { + "type": "string" + }, + "horizontalPositionMobile": { + "type": "string" + }, + "closeButtonType": { + "type": "string" + }, + "boxShadow": { + "type": "object", + "default": { + "active": false, + "colorOpacity": 50, + "blur": 5, + "spread": 1, + "horizontal": 0, + "vertical": 0 + } + }, + "disableOn": { + "type": "string" + } + }, + "editorStyle": "otter-popup-editor", + "style": "otter-popup-style", + "script": "otter-popup" +} diff --git a/src/pro/blocks/modal/edit.js b/src/pro/blocks/modal/edit.js new file mode 100644 index 000000000..022e2f3a9 --- /dev/null +++ b/src/pro/blocks/modal/edit.js @@ -0,0 +1,218 @@ +/** + * External dependencies + */ +import { + closeSmall, + external +} from '@wordpress/icons'; + +import classnames from 'classnames'; + +import { get } from 'lodash'; + +import { merge } from 'lodash'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + + +import { + InnerBlocks, + useBlockProps, + __experimentalBlockVariationPicker as VariationPicker +} from '@wordpress/block-editor'; + +import { Button } from '@wordpress/components'; + +import { + Fragment, + useEffect, + useState +} from '@wordpress/element'; + +import { + createBlocksFromInnerBlocksTemplate +} from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import Inspector from './inspector.js'; +import { blockInit, useCSSNode } from '../../../blocks/helpers/block-utility'; +import { boxValues, _cssBlock, stringToBox } from '../../../blocks/helpers/helper-functions'; +import { useDarkBackground } from '../../../blocks/helpers/utility-hooks'; +import { useDispatch, useSelect } from '@wordpress/data'; + +const { attributes: defaultAttributes } = metadata; + +/** + * Popup component + * @param {import('./types').PopupPros} props + * @returns + */ +const Edit = ({ + attributes, + setAttributes, + clientId, + className, + name +}) => { + useEffect( () => { + const unsubscribe = blockInit( clientId, defaultAttributes ); + return () => unsubscribe( attributes.id ); + }, []); + + const [ isEditing, setEditing ] = useState( false ); + + const { + replaceInnerBlocks, + selectBlock + } = useDispatch( 'core/block-editor' ); + + const { blockType, defaultVariation, variations } = useSelect( + select => { + const { + getBlockVariations, + getBlockType, + getDefaultBlockVariation + } = select( 'core/blocks' ); + + return { + blockType: getBlockType( name ), + defaultVariation: getDefaultBlockVariation( name, 'block' ), + variations: getBlockVariations( name, 'block' ) + }; + }, + [ name ] + ); + + const height = 'custom' === attributes.heightMode ? { + '--height': attributes.height, + '--height-tablet': attributes.heightMobile, + '--height-mobile': attributes.heightMobile + } : { '--height': 'fit-content' }; + + const inlineStyles = { + '--min-width': attributes.minWidth ? attributes.minWidth + 'px' : '400px', + '--max-width': attributes.maxWidth ? attributes.maxWidth + 'px' : undefined, + '--background-color': attributes.backgroundColor, + '--close-color': attributes.closeColor, + '--overlay-color': attributes.overlayColor, + '--overlay-opacity': attributes.overlayOpacity !== undefined ? attributes.overlayOpacity / 100 : 1, + '--brd-width': boxValues( attributes.borderWidth ), + '--brd-radius': boxValues( attributes.borderRadius ), + '--brd-color': attributes.borderColor, + '--brd-style': attributes.borderStyle, + + // Responsive + '--width': ! Boolean( attributes.width ) && attributes.maxWidth ? attributes.maxWidth + 'px' : attributes.width, + '--width-tablet': attributes.widthTablet, + '--width-mobile': attributes.widthMobile, + + '--padding': attributes.padding ? boxValues( merge( stringToBox( '20px' ), attributes.padding ) ) : undefined, + '--padding-tablet': attributes.paddingTablet ? boxValues( merge( stringToBox( '20px' ), attributes.padding ?? {}, attributes.paddingTablet ) ) : undefined, + '--padding-mobile': attributes.paddingMobile ? boxValues( merge( stringToBox( '20px' ), attributes.padding ?? {}, attributes.paddingTablet ?? {}, attributes.paddingMobile ) ) : undefined, + '--box-shadow': attributes.boxShadow.active && `${ attributes.boxShadow.horizontal }px ${ attributes.boxShadow.vertical }px ${ attributes.boxShadow.blur }px ${ attributes.boxShadow.spread }px ${ hexToRgba( attributes.boxShadow.color || '#FFFFFF', attributes.boxShadow.colorOpacity ) }`, + + ...height + }; + + const [ cssNode, setNodeCSS ] = useCSSNode(); + + useEffect( () => { + setNodeCSS( + [ + ' .otter-popup__modal_content ' + _cssBlock([ + [ 'top', '30px', 'top' === attributes.verticalPosition ], + [ 'bottom', '30px', 'bottom' === attributes.verticalPosition ], + [ 'left', '30px', 'left' === attributes.horizontalPosition ], + [ 'right', '30px', 'right' === attributes.horizontalPosition ] + ]), + ' .otter-popup__modal_content ' + _cssBlock([ + [ 'top', '15px', 'top' === attributes.verticalPositionTablet ], + [ 'bottom', '15px', 'bottom' === attributes.verticalPositionTablet ], + [ 'left', '15px', 'left' === attributes.horizontalPositionTablet ], + [ 'right', '15px', 'right' === attributes.horizontalPositionTablet ] + ]), + ' .otter-popup__modal_content ' + _cssBlock([ + [ 'top', '10px', 'top' === attributes.verticalPositionMobile ], + [ 'bottom', '10px', 'bottom' === attributes.verticalPositionMobile ], + [ 'left', '10px', 'left' === attributes.horizontalPositionMobile ], + [ 'right', '10px', 'right' === attributes.horizontalPositionMobile ] + ]) + ], + [ + '@media ( min-width: 960px )', + '@media ( min-width: 600px ) and ( max-width: 960px )', + '@media ( max-width: 600px )' + ]); + }, + [ + attributes.horizontalPosition, + attributes.verticalPosition, + attributes.horizontalPositionTablet, + attributes.verticalPositionTablet, + attributes.horizontalPositionMobile, + attributes.verticalPositionMobile + ]); + + useDarkBackground( attributes.backgroundColor, attributes, setAttributes ); + + const blockProps = useBlockProps({ + id: attributes.id, + style: inlineStyles, + className: classnames( className, cssNode, { 'with-outside-button': 'outside' === attributes.closeButtonType }) + }); + + return ( + + + +
+ + + + { isEditing && ( +
+
setEditing( false ) } + /> + +
+ { attributes.showClose && ( +
+
+ ) } + +
+ +
+
+
+ ) } + +
+ + ); +}; + +export default Edit; diff --git a/src/pro/blocks/modal/index.js b/src/pro/blocks/modal/index.js new file mode 100644 index 000000000..a41a8aea8 --- /dev/null +++ b/src/pro/blocks/modal/index.js @@ -0,0 +1,48 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +import { registerBlockType } from '@wordpress/blocks'; + +import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit.js'; +import { popupIcon as icon } from '../../../blocks/helpers/icons'; +import Inactive from '../../components/inactive'; + +const { name } = metadata; + +if ( ! ( Boolean( window.otterPro.isActive ) && ! Boolean( window.otterPro.isExpired ) ) ) { + edit = () => ; +} + +registerBlockType( name, { + ...metadata, + title: __( 'Modal', 'otter-blocks' ), + description: __( 'Display your content in beautiful Modal with many customization options. Powered by Otter.', 'otter-blocks' ), + icon, + keywords: [ + 'modal', + 'lightbox' + ], + edit, + save() { + return ( +
+ +
+ ); + }, + example: { + attributes: {} + } +}); diff --git a/src/pro/blocks/modal/inspector.js b/src/pro/blocks/modal/inspector.js new file mode 100644 index 000000000..3799da26f --- /dev/null +++ b/src/pro/blocks/modal/inspector.js @@ -0,0 +1,343 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +import { + InspectorControls, + PanelColorSettings +} from '@wordpress/block-editor'; + +import { + Disabled, + ExternalLink, + PanelBody, + RangeControl, + SelectControl, + ToggleControl, + TextControl, + __experimentalBoxControl as BoxControl, + __experimentalUnitControl as UnitControl, + __experimentalAlignmentMatrixControl as AlignmentMatrixControl +} from '@wordpress/components'; + +import { Fragment, useState } from '@wordpress/element'; + +import { applyFilters } from '@wordpress/hooks'; + +/** + * Internal dependencies. + */ +import { + BoxShadowControl, + InspectorExtensions, + InspectorHeader, + Notice, + ResponsiveControl +} from '../../../blocks/components/index.js'; + +import { removeBoxDefaultValues, setUtm } from '../../../blocks/helpers/helper-functions.js'; +import { useResponsiveAttributes } from '../../../blocks/helpers/utility-hooks.js'; +import { useTabSwitch } from '../../../blocks/helpers/block-utility.js'; + +/** + * + * @param {import('./types').PopupInspectorProps} param0 + * @returns + */ +const Inspector = ({ + attributes, + setAttributes +}) => { + const [ tab, setTab ] = useTabSwitch( attributes.id, 'settings' ); + + const { + responsiveSetAttributes, + responsiveGetAttributes + } = useResponsiveAttributes( setAttributes ); + + const changeBoxShadow = data => { + const boxShadow = { ...attributes.boxShadow }; + Object.entries( data ).map( ([ key, val ] = data ) => { + boxShadow[key] = val; + }); + + setAttributes({ boxShadow }); + }; + + const Controls = () => { + return ( + + setAttributes({ showClose: ! attributes.showClose }) } + /> + + setAttributes({ outsideClose: ! attributes.outsideClose }) } + /> + + ); + }; + + return ( + + { applyFilters( 'otter.feedback', '', 'popup-block', __( 'Help us improve this block', 'otter-blocks' ) ) } + + + +
+ { 'settings' === tab && ( + + + setAttributes({ anchor }) } + /> + setAttributes({ anchorClose: ! attributes.anchorClose }) } + /> + + { attributes.anchorClose && ( + setAttributes({ closeAnchor }) } + /> + ) } + + + + +
+ { + const [ vertical, horizontal ] = value.split( ' ' ); + responsiveSetAttributes( Boolean( vertical ) && 'center' !== vertical ? vertical : undefined, [ 'verticalPosition', 'verticalPositionTablet', 'verticalPositionMobile' ]); + responsiveSetAttributes( Boolean( horizontal ) && 'center' !== horizontal ? horizontal : undefined, [ 'horizontalPosition', 'horizontalPositionTablet', 'horizontalPositionMobile' ]); + }} + /> +
+ + + + + + )} + + { 'style' === tab && ( + + + + { + responsiveSetAttributes( value, [ 'width', 'widthTablet', 'widthMobile' ]); + }} + /> + + + setAttributes({ heightMode: 'none' !== value ? value : undefined })} + /> + + { + 'custom' === attributes.heightMode && ( + + { + responsiveSetAttributes( value, [ 'height', 'heightTablet', 'heightMobile' ]); + }} + /> + + ) + } + + + { + responsiveSetAttributes( + removeBoxDefaultValues( value, { top: '20px', bottom: '20px', left: '20px', right: '20px' }), + [ 'padding', 'paddingTablet', 'paddingMobile' ] + ); + }} + /> + + + + setAttributes({ backgroundColor }), + label: __( 'Background', 'otter-blocks' ), + isShownByDefault: false + }, + { + value: attributes.closeColor, + onChange: closeColor => setAttributes({ closeColor }), + label: __( 'Close Button', 'otter-blocks' ), + isShownByDefault: false + }, + { + value: attributes.overlayColor, + onChange: overlayColor => setAttributes({ overlayColor }), + label: __( 'Overlay', 'otter-blocks' ), + isShownByDefault: false + }, + { + value: attributes.borderColor, + onChange: borderColor => setAttributes({ borderColor }), + label: __( 'Border', 'otter-blocks' ), + isShownByDefault: false + } + ] } + /> + + setAttributes({ overlayOpacity: value !== undefined ? Number( value ) : undefined }) } + allowReset + /> + + + + setAttributes({ showClose: ! attributes.showClose }) } + /> + setAttributes({ closeButtonType: 'none' !== value ? value : undefined })} + /> + + + + { + setAttributes({ + borderWidth: removeBoxDefaultValues( value, { top: '0px', bottom: '0px', left: '0px', right: '0px' }) + }); + }} + /> + + { + setAttributes({ + borderRadius: removeBoxDefaultValues( value, { top: '0px', bottom: '0px', left: '0px', right: '0px' }) + }); + }} + /> + + + + + ) } +
+ + ); +}; + +export default Inspector; + diff --git a/src/pro/blocks/modal/save.js b/src/pro/blocks/modal/save.js new file mode 100644 index 000000000..f3c87605e --- /dev/null +++ b/src/pro/blocks/modal/save.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { + InnerBlocks, + useBlockProps +} from '@wordpress/block-editor'; +import classnames from 'classnames'; + +const Save = ({ + attributes, + className +}) => { + const blockProps = useBlockProps.save({ + id: attributes.id, + className: classnames( className, 'is-front', { 'with-outside-button': 'outside' === attributes.closeButtonType }), + 'data-open': attributes.trigger, + 'data-dismiss': attributes.recurringClose ? attributes.recurringTime : '', + 'data-time': ( undefined === attributes.trigger || 'onLoad' === attributes.trigger ) ? ( attributes.wait || 0 ) : '', + 'data-anchor': 'onClick' === attributes.trigger ? attributes.anchor : '', + 'data-offset': 'onScroll' === attributes.trigger ? attributes.scroll : '', + 'data-outside': attributes.outsideClose ? attributes.outsideClose : '', + 'data-anchorclose': attributes.anchorClose ? attributes.closeAnchor : '', + 'data-lock-scrolling': attributes.lockScrolling ? '1' : undefined, + 'data-disable-on': attributes.disableOn ? attributes.disableOn : undefined + }); + + return ( +
+
+
+ +
+ { attributes.showClose && ( +
+ +
+ ) } + +
+ +
+
+
+
+ ); +}; + +export default Save; diff --git a/src/pro/blocks/modal/types.d.ts b/src/pro/blocks/modal/types.d.ts new file mode 100644 index 000000000..afbef0ce3 --- /dev/null +++ b/src/pro/blocks/modal/types.d.ts @@ -0,0 +1,48 @@ +import { BlockProps, BorderType, BoxShadow, InspectorProps, PaddingType } from '../../../blocks/helpers/blocks'; + +type Attributes = { + id: string + minWidth: number + maxWidth: number + trigger: string + wait: number + anchor: string + scroll: number + showClose: boolean + outsideClose: boolean + anchorClose: boolean + closeAnchor: string + recurringClose: number + recurringTime: number + backgroundColor: string + closeColor: string + overlayColor: string + overlayOpacity: number + borderWidth: BorderType + borderRadius: BorderType + borderColor: string + borderStyle: string + padding: PaddingType + paddingTablet: PaddingType + paddingMobile: PaddingType + width: string + widthTablet: string + widthMobile: string + height: string + heightTablet: string + heightMobile: string + verticalPosition: string + horizontalPosition: string + verticalPositionTablet: string + horizontalPositionTablet: string + verticalPositionMobile: string + horizontalPositionMobile: string + boxShadow: BoxShadow + closeButtonType: 'outside' + lockScrolling: boolean + disableOn: 'mobile' + heightMode: string +} + +export type PopupPros = BlockProps +export interface PopupInspectorProps extends InspectorProps {}