Add Modal Block

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": {

inc/class-registration.php

@@ -624,7 +624,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 );
@@ -664,6 +667,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';
 
@@ -751,6 +759,7 @@ public function register_blocks() {
 			'lottie',
 			'plugin-cards',
 			'popup',
+			'modal',
 			'posts-grid',
 			'pricing',
 			'progress-bar',

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 );
@@ -162,6 +163,7 @@ public function register_blocks_css( $blocks ) {
 			'\ThemeIsle\OtterPro\CSS\Blocks\Review_Comparison_CSS',
 			'\ThemeIsle\OtterPro\CSS\Blocks\Form_File_CSS',
 			'\ThemeIsle\OtterPro\CSS\Blocks\Form_Stripe_Field_CSS',
+			'\ThemeIsle\OtterPro\CSS\Blocks\Modal_CSS',
 		);
 
 		$blocks = array_merge( $blocks, $pro_blocks );

plugins/otter-pro/inc/css/blocks/class-modal-css.php

@@ -0,0 +1,22 @@
+<?php
+/**
+ * Css handling logic for blocks.
+ *
+ * @package ThemeIsle\OtterPro\CSS\Blocks
+ */
+
+namespace ThemeIsle\OtterPro\CSS\Blocks;
+
+use ThemeIsle\GutenbergBlocks\CSS\Blocks\Popup_CSS;
+
+/**
+ * Class Modal_CSS
+ */
+class Modal_CSS extends Popup_CSS {
+	/**
+	 * The namespace under which the blocks are registered.
+	 *
+	 * @var string
+	 */
+	public $block_prefix = 'modal';
+}

plugins/otter-pro/inc/render/class-modal-block.php

@@ -0,0 +1,114 @@
+<?php
+/**
+ * Class Modal_CSS.
+ *
+ * @package ThemeIsle\GutenbergBlocks\Render
+ */
+
+namespace ThemeIsle\OtterPro\Render;
+
+use ThemeIsle\OtterPro\Plugins\License;
+
+/**
+ * Class Modal_CSS.
+ *
+ * This class handles the CSS for the modal block.
+ */
+class Modal_Block {
+
+	/**
+	 * Block render function for server-side.
+	 *
+	 * This method will pe passed to the render_callback parameter and it will output
+	 * the server side output of the block.
+	 *
+	 * @param array     $attributes The block attributes.
+	 * @param array     $content The saved content.
+	 * @param \WP_Block $block The parsed block.
+	 * 
+	 * @return mixed|string
+	 */
+	public function render( $attributes, $content, $block ) {
+
+		if ( ! License::has_active_license() ) {
+			return '';
+		}
+
+		if ( empty( $attributes['trigger'] ) ) {
+			$attributes['trigger'] = 'onClick';
+		}
+
+		$container_tag = '<div ';
+		if ( ! empty( $attributes['id'] ) ) {
+			$container_tag .= 'id="' . esc_attr( $attributes['id'] ) . '" ';
+		}
+
+		$classes = array( 'wp-block-themeisle-blocks-modal', 'is-active', 'is-front' );
+
+		if ( ! empty( $attributes['className'] ) ) {
+			$classes[] = esc_attr( $attributes['className'] );
+		}
+
+		if ( ! empty( $attributes['closeButtonType'] ) && 'outside' === $attributes['closeButtonType'] ) {
+			$classes[] = 'with-outside-button';
+		}
+
+		$container_tag .= 'class="' . ( implode( ' ', $classes ) ) . '" ';
+		$container_tag .= 'data-open="' . esc_attr( $attributes['trigger'] ) . '" ';
+
+		if ( 'onClick' === $attributes['trigger'] ) {
+			$container_tag .= 'data-anchor="' . ( ! empty( $attributes['anchor'] ) ? esc_attr( $attributes['anchor'] ) : '' ) . '" ';
+		}
+
+		if ( ! empty( $attributes['recurringClose'] ) ) {
+			$container_tag .= 'data-dismiss="' . ( ! empty( $attributes['recurringTime'] ) ? esc_attr( $attributes['recurringTime'] ) : '' ) . '" ';
+		}
+
+		if ( ! empty( $attributes['outsideClose'] ) ) {
+			$container_tag .= 'data-outside="' . esc_attr( $attributes['outsideClose'] ) . '" ';
+		}
+
+		if ( ! empty( $attributes['anchorClose'] ) ) {
+			$container_tag .= 'data-anchorclose="' . esc_attr( $attributes['closeAnchor'] ) . '" ';
+		}
+
+		if ( ! empty( $attributes['lockScrolling'] ) ) {
+			$container_tag .= 'data-lock-scrolling="1" ';
+		}
+
+		if ( ! empty( $attributes['disableOn'] ) ) {
+			$container_tag .= 'data-disable-on="' . esc_attr( $attributes['disableOn'] ) . '" ';
+		}
+
+		$container_tag .= '>';
+
+		$modal_wrap  = '<div class="otter-popup__modal_wrap">';
+		$modal_wrap .= '<div role="presentation" class="otter-popup__modal_wrap_overlay"></div>';
+
+		$modal_content = '<div class="otter-popup__modal_content">';
+		if ( ! empty( $attributes['showClose'] ) ) {
+			$modal_content .= '<div class="otter-popup__modal_header">';
+			$modal_content .= '<button type="button" class="components-button has-icon">';
+			$modal_content .= '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">';
+			$modal_content .= '<path d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"></path>';
+			$modal_content .= '</svg>';
+			$modal_content .= '</button>';
+			$modal_content .= '</div>';
+		}
+
+		$modal_content .= '<div class="otter-popup__modal_body">';
+		foreach ( $block->inner_blocks as $inner_block ) {
+			$modal_content .= $inner_block->render();
+		}
+		$modal_content .= '</div>'; // Close otter-popup__modal_body.
+		$modal_content .= '</div>'; // Close otter-popup__modal_content.
+
+		$modal_wrap .= $modal_content;
+		$modal_wrap .= '</div>'; // Close otter-popup__modal_wrap.
+
+		$container_tag .= $modal_wrap;
+		$container_tag .= '</div>'; // Close container tag.
+
+		return $container_tag;
+	}
+}

src/blocks/blocks/index.js

@@ -25,3 +25,4 @@ import './tabs/index.js';
 import './deprecated/index.js';
 import './content-generator/index.js';
 import './timeline/index.js';
+import './modal/index.js';

src/blocks/blocks/modal/block.json

@@ -0,0 +1,131 @@
+{
+	"$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"]
+		},
+		"anchor": {
+			"type": "string"
+		},
+		"showClose": {
+			"type": "boolean",
+			"default": true
+		},
+		"outsideClose": {
+			"type": "boolean",
+			"default": true
+		},
+		"anchorClose": {
+			"type": "boolean",
+			"default": false
+		},
+		"closeAnchor": {
+			"type": "string"
+		},
+		"backgroundColor": {
+			"type": "string"
+		},
+		"closeColor": {
+			"type": "string"
+		},
+		"overlayColor": {
+			"type": "string"
+		},
+		"overlayOpacity": {
+			"type": "number"
+		},
+		"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"
+}

src/blocks/blocks/modal/index.js

@@ -0,0 +1,53 @@
+/**
+ * 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 save from './save.js';
+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 (
+				<div { ...useBlockProps() }>
+					<Placeholder
+						icon={ icon }
+						label={ metadata.title }
+						instructions={ instructions }
+						className="o-license-warning"
+					/>
+				</div>
+			);
+		},
+		save,
+		example: {
+			attributes: {}
+		}
+	});
+}