Skip to content

Add [sticky] shortcode for highlighted content blocks with aspect ratio support#13

Merged
wolffe merged 3 commits intowolffe:masterfrom
ElisabettaCarrara:master
Apr 3, 2026
Merged

Add [sticky] shortcode for highlighted content blocks with aspect ratio support#13
wolffe merged 3 commits intowolffe:masterfrom
ElisabettaCarrara:master

Conversation

@elisabettac77
Copy link
Copy Markdown
Contributor

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.

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.
@elisabettac77
Copy link
Copy Markdown
Contributor Author

sticky-note this for context - how it appears in front-end

@wolffe wolffe self-assigned this Apr 2, 2026
@wolffe wolffe added the enhancement New feature or request label Apr 2, 2026
@wolffe wolffe merged commit c95d61c into wolffe:master Apr 3, 2026
1 check passed
@wolffe
Copy link
Copy Markdown
Owner

wolffe commented Apr 3, 2026

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/

@wolffe wolffe added this to the 1.6.1 milestone Apr 3, 2026
@elisabettac77
Copy link
Copy Markdown
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants