Fixed rendering performance in editor (#222)

* fixed slow rendering issue when first page load and when duplicate blocks without any extensions on blocks

* fixed counters animation callback

* Update frontend.js

* revert back animation for Accordion and improved animation to properly run without blinks

* fixed InputGroup component styles

* build

build/gutenberg/blocks/accordion/frontend.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '07f8b5d1e865ee742849');
+<?php return array('dependencies' => array(), 'version' => '61ceb041748865c11d7d');

build/gutenberg/extend/effects/frontend.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'b6f99e2d5bf8a8e6cf12');
+<?php return array('dependencies' => array(), 'version' => '42f5f2cc501efadd2b31');

build/gutenberg/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-rich-text', 'wp-token-list'), 'version' => '513bbfd525041dd2bd20');
+<?php return array('dependencies' => array('jquery', 'lodash', 'react', 'react-dom', 'react-jsx-runtime', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-date', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-notices', 'wp-plugins', 'wp-rich-text', 'wp-token-list'), 'version' => '15c30a586b736b5631ce');

gutenberg/blocks/accordion/frontend.js

@@ -15,7 +15,24 @@ const { events } = GHOSTKIT;
 
 let pageHash = location.hash;
 
-const ANIMATION_SPEED = 300;
+const ANIMATION_SPEED = 400;
+
+function getCurrentContentStyles($el) {
+	return {
+		display: $el.style.display,
+		overflow: $el.style.overflow,
+		height: $el.style.height,
+		paddingTop: $el.style.paddingTop,
+		paddingBottom: $el.style.paddingBottom,
+	};
+}
+function resetContentStyles($el) {
+	$el.style.display = '';
+	$el.style.overflow = '';
+	$el.style.height = '';
+	$el.style.paddingTop = '';
+	$el.style.paddingBottom = '';
+}
 
 function show($item, animationSpeed, cb) {
 	const $button = $item.querySelector(
@@ -29,6 +46,10 @@ function show($item, animationSpeed, cb) {
 		$button.setAttribute('aria-expanded', 'true');
 	}
 
+	const currentStyles = getCurrentContentStyles($content);
+
+	resetContentStyles($content);
+
 	const contentStyles = window.getComputedStyle($content);
 
 	const endHeight = contentStyles.height;
@@ -37,6 +58,9 @@ function show($item, animationSpeed, cb) {
 
 	$content.style.display = 'block';
 	$content.style.overflow = 'hidden';
+	$content.style.height = currentStyles.height || 0;
+	$content.style.paddingTop = currentStyles.paddingTop || 0;
+	$content.style.paddingBottom = currentStyles.paddingBottom || 0;
 
 	const animation = animate(
 		$content,
@@ -47,17 +71,19 @@ function show($item, animationSpeed, cb) {
 		},
 		{
 			duration: animationSpeed / 1000,
-			easing: 'easeOut',
+			ease: [0.6, 0, 0.3, 1],
 		}
 	);
 
 	animation.then(() => {
-		// Reset styles.
-		$content.style.display = '';
-		$content.style.overflow = '';
-		$content.style.height = '';
-		$content.style.paddingTop = '';
-		$content.style.paddingBottom = '';
+		// Check if animation stopped manually.
+		const isStopped =
+			$item.gktAccordion.animation?.animations?.[0]?.isStopped || false;
+
+		if (!isStopped) {
+			resetContentStyles($content);
+		}
+
 		$item.gktAccordion.animation = null;
 
 		cb();
@@ -84,17 +110,19 @@ function hide($item, animationSpeed, cb) {
 		},
 		{
 			duration: animationSpeed / 1000,
-			easing: 'easeOut',
+			ease: [0.6, 0, 0.3, 1],
 		}
 	);
 
 	animation.then(() => {
-		// Reset styles.
-		$content.style.display = '';
-		$content.style.overflow = '';
-		$content.style.height = '';
-		$content.style.paddingTop = '';
-		$content.style.paddingBottom = '';
+		// Check if animation stopped manually.
+		const isStopped =
+			$item.gktAccordion.animation?.animations?.[0]?.isStopped || false;
+
+		if (!isStopped) {
+			resetContentStyles($content);
+		}
+
 		$item.gktAccordion.animation = null;
 
 		cb();

gutenberg/components/input-group/editor.scss

@@ -26,7 +26,7 @@
 
 	// Better help styles.
 	.components-base-control__help {
-		margin-top: -6px;
+		margin-top: 0;
 		font-size: 9px;
 		font-weight: 500;
 		text-align: center;
@@ -68,8 +68,8 @@
 		// Important toggle.
 		.ghostkit-control-important-toggle {
 			position: absolute;
-			top: 6px;
-			right: 1px;
+			top: 10px;
+			right: 2px;
 			opacity: 0;
 		}
 

gutenberg/extend/effects/frontend.js

@@ -187,7 +187,7 @@ events.on(document, 'init.blocks.gkt', () => {
 			const config = {
 				from,
 				to,
-				duration: 0.8,
+				duration: 1,
 				easing: [0.6, 0, 0.3, 1],
 				cb(progress) {
 					const position = (to - from) * progress + from;
@@ -233,15 +233,13 @@ events.on(document, 'init.blocks.gkt', () => {
 						});
 					}
 
-					animate(
-						(progress) => {
+					animate(0, 1, {
+						duration: config.duration,
+						ease: config.easing,
+						onUpdate: (progress) => {
 							config.cb(progress);
 						},
-						{
-							duration: config.duration,
-							ease: config.easing,
-						}
-					).then(() => {
+					}).then(() => {
 						events.trigger($counter, 'counted.counter.gkt', {
 							config,
 						});

gutenberg/extend/styles/index.js

@@ -231,11 +231,10 @@ function CustomStylesComponent(props) {
 
 			// Reset unused styles and ID.
 			if (reset) {
-				const newClassName = replaceClass(
-					className,
-					'ghostkit-custom',
-					''
-				);
+				// Convert to undefined when empty to prevent unnecessary
+				// rerenders if className remains unchanged.
+				const newClassName =
+					replaceClass(className, 'ghostkit-custom', '') || undefined;
 
 				if (newClassName !== className) {
 					newAttrs.className = !newClassName

languages/ghostkit.pot

@@ -9,7 +9,7 @@ msgstr ""
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"POT-Creation-Date: 2024-12-18T14:37:32+00:00\n"
+"POT-Creation-Date: 2024-12-18T20:25:17+00:00\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "X-Generator: WP-CLI 2.9.0\n"
 "X-Domain: ghostkit\n"