Add [sticky] shortcode for highlighted content blocks with aspect ratio support#13
Conversation
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]
improved aspect ratio for sticky notes shortcode
Added 'box-sizing: border-box' to style parts for better padding handling.
|
I approved it, although I think it would have been more suited for your Shortcodes Ultimate plugin. I remember you wanting to take it over and make it ClassicPress compatible. Looks interesting - https://dev.vault80.com/fx-builder-sticky-note/ |
|
I studied the matter further about shortcodes ultimate - it has a very strict managing of styles and is not agnostic (meaning to put in your styles or allow it to be consistent with the theme you need to really code a long CSS file). that did not sit well with me. Since I do use shortcode inside FX Builder and I have studied how you implemented cover and button ones I coded the sticky notes and I discovered that in FX Builder it works no matter what theme one uses and also in FX being that it is possible to set CSS per page/post adding few lines of CSS is a real breeze. FX Builder is a real page builder done the right way IMHO - adding the shortcodes to it (via a plugin or directly I will try both ways) is the best way to use build a site. |

Description
This PR introduces a new [sticky] shortcode that allows users to display content inside a stylized, rotated “sticky note” block. This is particularly useful for highlighting notes, tips, or callouts in content, without requiring custom CSS.
Features
Customizable background color: via bg-color (hex, default #fff3cd)
Customizable text color: via text-color (hex, default #212529)
Inner padding: via padding (default 1.5em)
Rotation: via rotate (e.g., -2deg, default -2deg)
Border radius: via border-radius (default 6px)
Shadow toggle: via shadow (0/1, default 1)
Aspect ratio control: via aspect-ratio (e.g., 1/1, default 1/1)
All attributes are optional and have sensible defaults to ensure the shortcode works out-of-the-box.
Usage
[sticky bg-color="#fff3cd" text-color="#212529" padding="2em" rotate="-3deg" border-radius="8px" shadow="1" aspect-ratio="1/1"]
Your content here
[/sticky]
This generates a rotated, colored block with optional shadow and aspect ratio control. Content inside the shortcode is fully processed, so other shortcodes can be nested.
Notes
Aspect ratio is enforced via inline CSS, ensuring the block remains square or according to the specified ratio.
Defaults are designed to look good with minimal configuration.
Fully sanitized inputs for security and consistency.
This PR adds only the shortcode itself and its inline styles; it does not affect other plugin functionality.