From 2d0ee27cead3e4e2c7f43f74d746de87c6978cb6 Mon Sep 17 00:00:00 2001
From: Elisabetta Carrara <146635386+elisabettac77@users.noreply.github.com>
Date: Thu, 2 Apr 2026 23:07:55 +0200
Subject: [PATCH 1/3] Add [sticky] shortcode for highlighted content blocks

Introduces a new [sticky] shortcode for creating highlighted content blocks (e.g. notes, callouts).
It follows the same implementation pattern as existing shortcodes (cover, button):
attribute-driven styling
inline CSS variables
lazy CSS enqueue
defensive input validation
Example usage:
[sticky bg-color="#fff3cd" rotate="-2deg"]
Your content here
[/sticky]
---
 includes/shortcodes.php | 101 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)

diff --git a/includes/shortcodes.php b/includes/shortcodes.php
index 7e4b6db..2bbf143 100644
--- a/includes/shortcodes.php
+++ b/includes/shortcodes.php
@@ -342,4 +342,105 @@ function ( $atts, $content = null ) {
     }
 );
 
+add_shortcode(
+    'sticky',
+    function ( $atts, $content = null ) {
+        static $did_enqueue_css = false;
+
+        /**
+         * [sticky] shortcode parameters:
+         * - bg-color: Background color (hex, default: #fff3cd)
+         * - text-color: Text color (hex, default: #212529)
+         * - padding: Inner padding (default: 1.5em)
+         * - rotate: Rotation (e.g. -2deg, default: -2deg)
+         * - border-radius: Border radius (default: 6px)
+         * - shadow: Enable shadow (0/1, default: 1)
+         */
+        $atts = is_array( $atts ) ? $atts : [];
 
+        // Back-compat aliases
+        $alias_map = [
+            'bg_color'      => 'bg-color',
+            'text_color'    => 'text-color',
+            'border_radius' => 'border-radius',
+        ];
+        foreach ( $alias_map as $from => $to ) {
+            if ( isset( $atts[ $from ] ) && ! isset( $atts[ $to ] ) ) {
+                $atts[ $to ] = $atts[ $from ];
+            }
+        }
+
+        $atts = shortcode_atts(
+            [
+                'bg-color'      => '#fff3cd',
+                'text-color'    => '#212529',
+                'padding'       => '1.5em',
+                'rotate'        => '-2deg',
+                'border-radius' => '6px',
+                'shadow'        => '1',
+            ],
+            $atts,
+            'sticky'
+        );
+
+        $bg_color = sanitize_hex_color( trim( (string) $atts['bg-color'] ) ) ?: '#fff3cd';
+        $text_color = sanitize_hex_color( trim( (string) $atts['text-color'] ) ) ?: '#212529';
+
+        $padding = trim( (string) $atts['padding'] );
+        if ( ! preg_match( '/^(0|\d+(\.\d+)?(px|%|em|rem|vh|vw))( (0|\d+(\.\d+)?(px|%|em|rem|vh|vw))){0,3}$/', $padding ) ) {
+            $padding = '1.5em';
+        }
+
+        $rotate = trim( (string) $atts['rotate'] );
+        if ( ! preg_match( '/^-?\d+(\.\d+)?deg$/', $rotate ) ) {
+            $rotate = '-2deg';
+        }
+
+        $border_radius = trim( (string) $atts['border-radius'] );
+        if ( $border_radius !== '' && ! preg_match( '/^\d+(\.\d+)?(px|%|em|rem)$/', $border_radius ) ) {
+            $border_radius = '6px';
+        }
+
+        $shadow = strtolower( trim( (string) $atts['shadow'] ) );
+        $has_shadow = in_array( $shadow, [ '1', 'true', 'yes', 'on' ], true );
+
+        if ( ! $did_enqueue_css ) {
+            wp_register_style( 'fxb-sticky-shortcode', false, [], FX_BUILDER_VERSION );
+            wp_enqueue_style( 'fxb-sticky-shortcode' );
+            wp_add_inline_style(
+                'fxb-sticky-shortcode',
+                '.fxb-sticky{position:relative;display:block}' .
+                '.fxb-sticky__inner{display:block}' .
+                '.fxb-sticky--shadow{box-shadow:0 10px 20px rgba(0,0,0,.15)}'
+            );
+            $did_enqueue_css = true;
+        }
+
+        $style_parts = [
+            '--fxb-sticky-bg:' . $bg_color,
+            '--fxb-sticky-color:' . $text_color,
+            '--fxb-sticky-padding:' . $padding,
+            '--fxb-sticky-rotate:' . $rotate,
+            '--fxb-sticky-radius:' . $border_radius,
+            'background:' . $bg_color,
+            'color:' . $text_color,
+            'padding:' . $padding,
+            'border-radius:' . $border_radius,
+            'transform:rotate(' . $rotate . ')',
+        ];
+
+        $classes = 'fxb-sticky';
+        if ( $has_shadow ) {
+            $classes .= ' fxb-sticky--shadow';
+        }
+
+        return sprintf(
+            '<div class="%s" style="%s">' .
+                '<div class="fxb-sticky__inner">%s</div>' .
+            '</div>',
+            esc_attr( $classes ),
+            esc_attr( implode( ';', $style_parts ) . ';' ),
+            do_shortcode( shortcode_unautop( $content ?? '' ) )
+        );
+    }
+);

From 48d46d98146381afb8b40fb78a04c2690a144048 Mon Sep 17 00:00:00 2001
From: Elisabetta Carrara <146635386+elisabettac77@users.noreply.github.com>
Date: Thu, 2 Apr 2026 23:14:04 +0200
Subject: [PATCH 2/3] Add aspect ratio support to shortcode attributes

improved aspect ratio for sticky notes shortcode
---
 includes/shortcodes.php | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/includes/shortcodes.php b/includes/shortcodes.php
index 2bbf143..ad44ef7 100644
--- a/includes/shortcodes.php
+++ b/includes/shortcodes.php
@@ -355,6 +355,7 @@ function ( $atts, $content = null ) {
          * - rotate: Rotation (e.g. -2deg, default: -2deg)
          * - border-radius: Border radius (default: 6px)
          * - shadow: Enable shadow (0/1, default: 1)
+         * - aspect-ratio: Aspect ratio (e.g. 1/1, default: 1/1)
          */
         $atts = is_array( $atts ) ? $atts : [];
 
@@ -363,6 +364,7 @@ function ( $atts, $content = null ) {
             'bg_color'      => 'bg-color',
             'text_color'    => 'text-color',
             'border_radius' => 'border-radius',
+            'aspect_ratio'  => 'aspect-ratio',
         ];
         foreach ( $alias_map as $from => $to ) {
             if ( isset( $atts[ $from ] ) && ! isset( $atts[ $to ] ) ) {
@@ -378,6 +380,7 @@ function ( $atts, $content = null ) {
                 'rotate'        => '-2deg',
                 'border-radius' => '6px',
                 'shadow'        => '1',
+                'aspect-ratio'  => '1/1',
             ],
             $atts,
             'sticky'
@@ -401,6 +404,11 @@ function ( $atts, $content = null ) {
             $border_radius = '6px';
         }
 
+        $aspect_ratio = trim( (string) $atts['aspect-ratio'] );
+        if ( ! preg_match( '/^\d+\/\d+$/', $aspect_ratio ) ) {
+            $aspect_ratio = '1/1';
+        }
+
         $shadow = strtolower( trim( (string) $atts['shadow'] ) );
         $has_shadow = in_array( $shadow, [ '1', 'true', 'yes', 'on' ], true );
 
@@ -422,11 +430,13 @@ function ( $atts, $content = null ) {
             '--fxb-sticky-padding:' . $padding,
             '--fxb-sticky-rotate:' . $rotate,
             '--fxb-sticky-radius:' . $border_radius,
+            '--fxb-sticky-aspect:' . $aspect_ratio,
             'background:' . $bg_color,
             'color:' . $text_color,
             'padding:' . $padding,
             'border-radius:' . $border_radius,
             'transform:rotate(' . $rotate . ')',
+            'aspect-ratio:' . $aspect_ratio,
         ];
 
         $classes = 'fxb-sticky';
@@ -444,3 +454,4 @@ function ( $atts, $content = null ) {
         );
     }
 );
+

From b0209060b44f2fdb186717139ebd3e58ad352b61 Mon Sep 17 00:00:00 2001
From: Elisabetta Carrara <146635386+elisabettac77@users.noreply.github.com>
Date: Thu, 2 Apr 2026 23:24:26 +0200
Subject: [PATCH 3/3] Add box-sizing to style parts in shortcodes.php

Added 'box-sizing: border-box' to style parts for better padding handling.
---
 includes/shortcodes.php | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/includes/shortcodes.php b/includes/shortcodes.php
index ad44ef7..2981633 100644
--- a/includes/shortcodes.php
+++ b/includes/shortcodes.php
@@ -425,19 +425,20 @@ function ( $atts, $content = null ) {
         }
 
         $style_parts = [
-            '--fxb-sticky-bg:' . $bg_color,
-            '--fxb-sticky-color:' . $text_color,
-            '--fxb-sticky-padding:' . $padding,
-            '--fxb-sticky-rotate:' . $rotate,
-            '--fxb-sticky-radius:' . $border_radius,
-            '--fxb-sticky-aspect:' . $aspect_ratio,
-            'background:' . $bg_color,
-            'color:' . $text_color,
-            'padding:' . $padding,
-            'border-radius:' . $border_radius,
-            'transform:rotate(' . $rotate . ')',
-            'aspect-ratio:' . $aspect_ratio,
-        ];
+    'box-sizing:border-box',           // <-- ensure padding is counted
+    '--fxb-sticky-bg:' . $bg_color,
+    '--fxb-sticky-color:' . $text_color,
+    '--fxb-sticky-padding:' . $padding,
+    '--fxb-sticky-rotate:' . $rotate,
+    '--fxb-sticky-radius:' . $border_radius,
+    '--fxb-sticky-aspect:' . $aspect_ratio,
+    'background:' . $bg_color,
+    'color:' . $text_color,
+    'padding:' . $padding,
+    'border-radius:' . $border_radius,
+    'transform:rotate(' . $rotate . ')',
+    'aspect-ratio:' . $aspect_ratio,
+];
 
         $classes = 'fxb-sticky';
         if ( $has_shadow ) {