Carousel And Cta Button Update

CHANGELOG.md

@@ -4,6 +4,26 @@ All notable changes to the Nynaeve theme will be documented in this file.
 
 For project-wide changes (infrastructure, tooling, cross-cutting concerns), see the [project root CHANGELOG.md](../../../../../CHANGELOG.md).
 
+## [2.0.18] - 2025-11-26
+
+### Fixed
+- **Button Hover Filter**: Fixed React warning "Cannot update component during render"
+  - **Root cause**: `setAttributes()` was being called directly during render phase (line 70-74)
+  - Wrapped state update in `useEffect` hook to comply with React rules
+  - **Impact**: Eliminates console warnings and prevents potential editor instability
+  - Fixed in [button-hover-filter.jsx](resources/js/blocks/cta-block-blue/extends/button-hover-filter.jsx#L71-L78)
+  - **Note**: This was causing carousel images to appear broken in editor after rebuild
+
+### Changed
+- **Carousel Block**: Added Adaptive Height feature for better slide height handling
+  - Added `adaptiveHeight` attribute to [block.json](resources/js/blocks/carousel/block.json#L99-L102)
+  - Added "Adaptive Height" toggle control in block editor settings panel
+  - Slick Slider now automatically adjusts carousel height to match current slide
+  - Useful for slides with varying content amounts or different image aspect ratios
+  - Updated [editor.jsx](resources/js/blocks/carousel/editor.jsx#L226-L231) with new control
+  - Updated [save.jsx](resources/js/blocks/carousel/save.jsx#L37) to pass setting to Slick
+  - Synced improvement from Moiraine demo blocks implementation
+
 ## [2.0.17] - 2025-11-24
 
 ### Fixed

resources/js/blocks/carousel/block.json

@@ -95,6 +95,10 @@
         "dotsBottomSpacing": {
             "type": "string",
             "default": "-35px"
+        },
+        "adaptiveHeight": {
+            "type": "boolean",
+            "default": false
         }
     }
 }

resources/js/blocks/carousel/editor.jsx

@@ -60,6 +60,7 @@ const Edit = compose(
         responsiveSlidesToScroll,
         slides,
         slidePadding,
+        adaptiveHeight,
         arrowColor: arrowColorAttr,
         arrowBackground: arrowBackgroundAttr,
         arrowHoverColor: arrowHoverColorAttr,
@@ -222,6 +223,12 @@ const Edit = compose(
                         checked={slidePadding}
                         onChange={(value) => setAttributes({ slidePadding: value })}
                     />
+                    <ToggleControl
+                        label={__('Adaptive Height', 'imagewize')}
+                        help={__('Adjust carousel height to match the current slide height', 'imagewize')}
+                        checked={adaptiveHeight}
+                        onChange={(value) => setAttributes({ adaptiveHeight: value })}
+                    />
                 </PanelBody>
                 <PanelBody title={__('Responsive Settings', 'imagewize')} initialOpen={false}>
                     <RangeControl

resources/js/blocks/carousel/save.jsx

@@ -20,7 +20,8 @@ export default function save({ attributes }) {
         arrowBackground,
         arrowHoverColor,
         arrowHoverBackground,
-        dotsBottomSpacing
+        dotsBottomSpacing,
+        adaptiveHeight
     } = attributes;
 
     const slickSettings = {
@@ -33,6 +34,7 @@ export default function save({ attributes }) {
         autoplaySpeed: parseInt(autoplaySpeed),
         speed: parseInt(speed),
         rtl,
+        adaptiveHeight,
         responsive: [{
             breakpoint: parseInt(responsiveWidth) + 1,
             settings: {

resources/js/blocks/cta-block-blue/extends/button-hover-filter.jsx

@@ -12,6 +12,7 @@ import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { select } from '@wordpress/data';
 import { ColorPicker } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Add hoverBackgroundColor attribute to button block
@@ -66,12 +67,15 @@ const withHoverColorControl = createHigherOrderComponent((BlockEdit) => {
     );
 
     // If inside CTA block, mark as Nynaeve button and set default hover color if not set
-    if (isInCTABlock && !isNynaeveButton) {
-      setAttributes({
-        isNynaeveButton: true,
-        hoverBackgroundColor: hoverBackgroundColor || '#075985', // sky-700 default only for CTA buttons
-      });
-    }
+    // Use useEffect to avoid setState during render
+    useEffect(() => {
+      if (isInCTABlock && !isNynaeveButton) {
+        setAttributes({
+          isNynaeveButton: true,
+          hoverBackgroundColor: hoverBackgroundColor || '#075985', // sky-700 default only for CTA buttons
+        });
+      }
+    }, [isInCTABlock, isNynaeveButton, hoverBackgroundColor, setAttributes]);
 
     if (!isInCTABlock) {
       return <BlockEdit {...props} />;

style.css

@@ -2,7 +2,7 @@
 Theme Name:         Nynaeve
 Theme URI:          https://imagewize.com
 Description:        Modern WordPress theme built on Sage 11 with reusable custom blocks using WordPress native tools and the Roots.io stack.
-Version:            2.0.17
+Version:            2.0.18
 Author:             Jasper Frumau
 Author URI:         https://magewize.com
 Text Domain:        nynaeve