Sidebar UI

inc/class-blocks-animation.php

@@ -67,6 +67,10 @@ public function enqueue_editor_assets() {
 			$asset_file['version']
 		);
 
+		if ( defined( 'OTTER_BLOCKS_VERSION' ) ) {
+			array_push( $asset_file['dependencies'], 'otter-blocks' );
+		}
+
 		wp_enqueue_script(
 			'otter-animation',
 			BLOCKS_ANIMATION_URL . 'build/animation/index.js',
@@ -75,6 +79,14 @@ public function enqueue_editor_assets() {
 			true
 		);
 
+		wp_localize_script(
+			'otter-animation',
+			'blocksAnimation',
+			array(
+				'hasOtter' => defined( 'OTTER_BLOCKS_VERSION' ),
+			)
+		);
+
 		wp_set_script_translations( 'otter-animation', 'otter-blocks' );
 
 		$asset_file = include BLOCKS_ANIMATION_PATH . '/build/animation/anim-count.asset.php';

inc/class-blocks-css.php

@@ -56,6 +56,10 @@ public function enqueue_editor_assets() {
 
 		$asset_file = include BLOCKS_CSS_PATH . '/build/css/index.asset.php';
 
+		if ( defined( 'OTTER_BLOCKS_VERSION' ) ) {
+			array_push( $asset_file['dependencies'], 'otter-blocks' );
+		}
+
 		wp_enqueue_script(
 			'otter-css',
 			BLOCKS_CSS_URL . 'build/css/index.js',
@@ -64,6 +68,14 @@ public function enqueue_editor_assets() {
 			true
 		);
 
+		wp_localize_script(
+			'otter-css',
+			'blocksCSS',
+			array(
+				'hasOtter' => defined( 'OTTER_BLOCKS_VERSION' ),
+			)
+		);
+
 		wp_set_script_translations( 'otter-css', 'otter-blocks' );
 
 		wp_enqueue_style(

inc/class-blocks-export-import.php

@@ -38,12 +38,6 @@ public function init() {
 	 * @access  public
 	 */
 	public function enqueue_editor_assets() {
-		$current_screen = get_current_screen();
-
-		if ( 'post' !== $current_screen->base ) {
-			return;
-		}
-
 		$asset_file = include BLOCKS_EXPORT_IMPORT_PATH . '/build/export-import/index.asset.php';
 
 		wp_enqueue_script(

inc/class-registration.php

@@ -262,7 +262,9 @@ public function enqueue_block_editor_assets() {
 				'showOnboarding'          => $this->show_onboarding(),
 				'ratingScale'             => get_option( 'themeisle_blocks_settings_review_scale', false ),
 				'hasModule'               => array(
-					'blockConditions' => get_option( 'themeisle_blocks_settings_block_conditions', true ),
+					'blockCSS'        => boolval( get_option( 'themeisle_blocks_settings_css_module', true ) ),
+					'blockAnimations' => boolval( get_option( 'themeisle_blocks_settings_blocks_animation', true ) ),
+					'blockConditions' => boolval( get_option( 'themeisle_blocks_settings_block_conditions', true ) ),
 				),
 				'isLegacyPre59'           => version_compare( get_bloginfo( 'version' ), '5.8.22', '<=' ),
 				'isAncestorTypeAvailable' => version_compare( get_bloginfo( 'version' ), '5.9.22', '>=' ),

plugins/blocks-animation/readme.md

@@ -1,7 +1,7 @@
 # Blocks Animation: CSS Animations for Gutenberg Blocks #
 **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/), [mariamunteanu1](https://profiles.wordpress.org/mariamunteanu1/)  
 **Tags:** gutenberg, block, block editor, editor, animation, animations, animate, styles, block animations  
-**Requires at least:** 5.4  
+**Requires at least:** 5.9  
 **Tested up to:** 6.1  
 **Requires PHP:** 5.4  
 **Stable tag:** trunk  

plugins/blocks-animation/readme.txt

@@ -1,7 +1,7 @@
 === Blocks Animation: CSS Animations for Gutenberg Blocks ===
 Contributors: themeisle, hardeepasrani, mariamunteanu1
 Tags: gutenberg, block, block editor, editor, animation, animations, animate, styles, block animations
-Requires at least: 5.4
+Requires at least: 5.9
 Tested up to: 6.1
 Requires PHP: 5.4
 Stable tag: trunk

plugins/blocks-css/readme.md

@@ -1,7 +1,7 @@
 # Blocks CSS: CSS Editor for Gutenberg Blocks #
 **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/)  
 **Tags:** gutenberg, block, css, css editor, blocks css  
-**Requires at least:** 5.2      
+**Requires at least:** 5.9      
 **Tested up to:** 6.1  
 **Requires PHP:** 5.4    
 **Stable tag:** trunk  

plugins/blocks-css/readme.txt

@@ -1,7 +1,7 @@
 === Blocks CSS: CSS Editor for Gutenberg Blocks ===
 Contributors: themeisle, hardeepasrani
 Tags: gutenberg, block, css, css editor, blocks css
-Requires at least: 5.2    
+Requires at least: 5.9    
 Tested up to: 6.1
 Requires PHP: 5.4  
 Stable tag: trunk

plugins/blocks-export-import/readme.md

@@ -1,7 +1,7 @@
 # Blocks Export Import #
 **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/)  
 **Tags:** gutenberg, block, blocks, export, import, exporter, importer, block exporter, block export, block import, block importer  
-**Requires at least:** 5.3      
+**Requires at least:** 5.9      
 **Tested up to:** 6.1  
 **Requires PHP:** 5.4    
 **Stable tag:** trunk  

plugins/blocks-export-import/readme.txt

@@ -1,7 +1,7 @@
 === Blocks Export Import ===
 Contributors: themeisle, hardeepasrani
 Tags: gutenberg, block, blocks, export, import, exporter, importer, block exporter, block export, block import, block importer
-Requires at least: 5.3    
+Requires at least: 5.9    
 Tested up to: 6.1
 Requires PHP: 5.4  
 Stable tag: trunk

readme.md

@@ -1,7 +1,7 @@
 # Otter - Gutenberg Blocks – Page Builder for Gutenberg Editor & FSE #
 **Contributors:** [themeisle](https://profiles.wordpress.org/themeisle/), [hardeepasrani](https://profiles.wordpress.org/hardeepasrani/), [soarerobertdaniel7](https://profiles.wordpress.org/soarerobertdaniel7/), [mariamunteanu1](https://profiles.wordpress.org/mariamunteanu1/), [arinat](https://profiles.wordpress.org/arinat/), [uriahs-victor](https://profiles.wordpress.org/uriahs-victor/), [john_pixle](https://profiles.wordpress.org/john_pixle/), [wildmisha](https://profiles.wordpress.org/wildmisha/), [irinelenache](https://profiles.wordpress.org/irinelenache/)  
 **Tags:** gutenberg blocks, gutenberg, block,post grid block, google map block, columns block, advanced columns, section, row, layout, templates, lottie, progress bar, product review, review, accordion, tabs, page builder, countdown, contact form, masonry, popup, review builder  
-**Requires at least:** 5.8  
+**Requires at least:** 5.9  
 **Tested up to:** 6.1  
 **Requires PHP:** 5.4  
 **Stable tag:** trunk  

readme.txt

@@ -1,7 +1,7 @@
 === Otter - Gutenberg Blocks – Page Builder for Gutenberg Editor & FSE ===
 Contributors: themeisle, hardeepasrani, soarerobertdaniel7, mariamunteanu1, arinat, uriahs-victor, john_pixle, wildmisha, irinelenache
 Tags: gutenberg blocks, gutenberg, block,post grid block, google map block, columns block, advanced columns, section, row, layout, templates, lottie, progress bar, product review, review, accordion, tabs, page builder, countdown, contact form, masonry, popup, review builder
-Requires at least: 5.8
+Requires at least: 5.9
 Tested up to: 6.1
 Requires PHP: 5.4
 Stable tag: trunk

src/animation/count/index.js

@@ -8,31 +8,34 @@ import { brush } from '@wordpress/icons';
  */
 import { __ } from '@wordpress/i18n';
 
+import { RichTextToolbarButton } from '@wordpress/block-editor';
+
+import { Fragment } from '@wordpress/element';
+
 import {
 	registerFormatType,
 	toggleFormat
 } from '@wordpress/rich-text';
 
-import {
-	RichTextToolbarButton
-} from '@wordpress/block-editor';
-
-import { Fragment } from '@wordpress/element';
-
 /**
  * Internal dependencies.
  */
-import './editor.scss';
+import InlineControls from './inline-controls.js';
 
 const name = 'themeisle-blocks/count-animation';
 
-registerFormatType( name, {
+export const format = {
 	name,
 	title: __( 'Count Animation', 'otter-blocks' ),
 	tagName: 'o-anim-count',
 	className: null,
 
-	edit: ({ isActive, value, onChange }) => {
+	edit: ({
+		isActive,
+		value,
+		onChange,
+		contentRef
+	}) => {
 		const regex = /^\$?[\d,]+(\.\d*)?$/;
 
 		const onToggle = () => {
@@ -50,7 +53,16 @@ registerFormatType( name, {
 					onClick={ onToggle }
 					isActive={ isActive }
 				/>
+
+				{ isActive && (
+					<InlineControls
+						value={ value }
+						contentRef={ contentRef }
+					/>
+				) }
 			</Fragment>
 		);
 	}
-});
+};
+
+registerFormatType( name, format );

src/animation/count/inline-controls.js

@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies.
+ */
+import { __ } from '@wordpress/i18n';
+
+import {
+	__experimentalHeading as Heading,
+	Popover,
+	SelectControl
+} from '@wordpress/components';
+
+import {
+	useDispatch,
+	useSelect
+} from '@wordpress/data';
+
+import {
+	useEffect,
+	useState
+} from '@wordpress/element';
+
+import { applyFilters } from '@wordpress/hooks';
+
+import { useAnchorRef } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies.
+ */
+import {
+	delayList,
+	speedList
+} from '../data.js';
+
+import { format as settings } from './index.js';
+
+import { updateAnimConfig } from '../editor.js';
+
+const InlineControls = ({
+	value,
+	contentRef
+}) => {
+	useEffect( () => {
+		let classes;
+
+		if ( attributes.className ) {
+			classes = attributes.className;
+			classes = classes.split( ' ' );
+
+			const countDelayClass = Array.from( delayList ).find( ( i ) => {
+				return classes.find( ( o ) => o === `o-count-${ i.value }` );
+			});
+
+			const countSpeedClass = Array.from( speedList ).find( ( i ) => {
+				return classes.find( ( o ) => o === `o-count-${ i.value }` );
+			});
+
+			setCountDelay( countDelayClass ? countDelayClass.value : 'none' );
+			setCountSpeed( countSpeedClass ? countSpeedClass.value : 'none' );
+		}
+
+	}, []);
+
+	const {
+		clientId,
+		attributes
+	} = useSelect( select => {
+		const { getSelectedBlock } = select( 'core/block-editor' );
+
+		const currentBlock = getSelectedBlock();
+
+		return {
+			clientId: currentBlock?.clientId,
+			attributes: currentBlock?.attributes
+		};
+	}, []);
+
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
+
+	const setAttributes = attributes => updateBlockAttributes( clientId, attributes );
+
+	const [ countDelay, setCountDelay ] = useState( 'none' );
+	const [ countSpeed, setCountSpeed ] = useState( 'none' );
+
+	const anchorRef = useAnchorRef({ ref: contentRef, value, settings });
+
+	return (
+		<Popover
+			position="bottom center right"
+			placement="bottom"
+			noArrow={ false }
+			anchor={ anchorRef }
+			anchorRef={ anchorRef }
+			focusOnMount={ false }
+			className="o-animation-popover"
+		>
+			<Heading level={ 4 }>{ __( 'Count Animation', 'otter-blocks' ) }</Heading>
+
+			<SelectControl
+				label={ __( 'Delay', 'otter-blocks' ) }
+				value={ countDelay || 'none' }
+				options={ delayList }
+				onChange={ value => updateAnimConfig( 'count', countDelay, value, () => setCountDelay( value ) ), attributes, setAttributes }
+			/>
+
+			<SelectControl
+				label={ __( 'Speed', 'otter-blocks' ) }
+				value={ countSpeed || 'none' }
+				options={ speedList }
+				onChange={ value => updateAnimConfig( 'count', countSpeed, value, () => setTypingSpeed( value ) ), attributes, setAttributes }
+			/>
+
+			{ applyFilters( 'otter.poweredBy', '' ) }
+		</Popover>
+	);
+};
+
+export default InlineControls;