Fix JSDoc alignment error in color helper function by Copilot · Pull Request #2743 · Codeinwp/otter-blocks

Copilot · 2026-02-16T12:24:51Z

CI linting failed due to misaligned JSDoc tags in resolveColorValue. The @deprecated tag must precede parameter declarations per JSDoc/ESLint standards.

Changes:

Reordered JSDoc tags in src/blocks/helpers/helper-functions.js to place @deprecated before @param
Aligned parameter descriptions for consistency

Before:

/**
 * @param {string|undefined} value The color value or slug
 * @param {Array} palette Optional color palette array
 * @return {string|undefined} The CSS variable or color value
 * @deprecated The palette parameter is deprecated...
 */

After:

/**
 * @deprecated The palette parameter is deprecated...
 * @param {string|undefined} value   The color value or slug
 * @param {Array}            palette Optional color palette array
 * @return {string|undefined} The CSS variable or color value
 */

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

https://api.github.com/repos/Automattic/VIP-Coding-Standards/zipball/2b1d206d81b74ed999023cffd924f862ff2753c8
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)
https://api.github.com/repos/Dealerdirect/phpcodesniffer-composer-installer/zipball/fe390591e0241955f22eb9ba327d137e501c771c
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)
https://api.github.com/repos/PHPCSStandards/PHPCSExtra/zipball/fa4b8d051e278072928e32d817456a7fdb57b6ca
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)
https://api.github.com/repos/PHPCSStandards/PHPCSUtils/zipball/f7eb16f2fa4237d5db9e8fed8050239bee17a9bd
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)
https://api.github.com/repos/PHPCSStandards/PHP_CodeSniffer/zipball/5b5e3821314f947dd040c70f7992a64eac89025c
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)
https://api.github.com/repos/WordPress/WordPress-Coding-Standards/zipball/d2421de7cec3274ae622c22c744de9a62c7925af
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)
https://api.github.com/repos/composer/installers/zipball/12fb2dfe5e16183de69e784a7b84046c43d97e8e
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)
https://api.github.com/repos/sirbrillig/phpcs-variable-analysis/zipball/4debf5383d9ade705e0a25121f16c3fecaf433a7
- Triggering command: /usr/bin/php8.3 /usr/bin/php8.3 -n -c /tmp/XppSdh /usr/bin/composer install (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

This section details on the original issue you should resolve

<issue_title>Color slugs are not working in Otter Blocks</issue_title>
<issue_description>### Description

Currently if we reference in the color attributes a color slug from the theme.json Otter is not using that and is reverting to the defaults

Similar with the core blocks it should use the slug name when that is used as value.

Step-by-step reproduction instructions

Pick a color slug form theme.json, let's say base

Pick a core block, let's say button. You can use this snippet:
window.wp.data.dispatch('core/block-editor').insertBlocks(window.wp.blocks.createBlock(
        'core/paragraph',
         { textColor:"base", content:"Test"},
         []
       ))
You can see the paragraph color is used corectly.

Pick a Otter block, lets say a heading. You can use this snippet:
window.wp.data.dispatch('core/block-editor').insertBlocks(window.wp.blocks.createBlock(
         'themeisle-blocks/advanced-heading',
          { headingColor:"base", content:"Test"},
          []
        ))
You can see that is not using the right color and is reverting to the default.

Screenshots, screen recording, code snippet or Help Scout ticket

No response

Environment info

No response

Is the issue you are reporting a regression

No</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes Color slugs are not working in Otter Blocks #2742

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

selul · 2026-02-16T12:45:23Z

@copilot apply the fix to all blocks that uses attributes for colors.

…-icons, popup, and flip blocks - circle-counter: Added useColorResolver hook and wrapped color attributes in edit.js and CircularProgressBar component; added color resolution in CSS for backgroundColor, progressColor, and titleColor - countdown: Added color resolution in CSS for backgroundColor, borderColor, valueColor, labelColor, and separatorColor - sharing-icons: Added color resolution in CSS for icon backgroundColor and textColor - popup: Added useColorResolver hook and wrapped color attributes in edit.js; added color resolution in CSS for backgroundColor, closeColor, overlayColor, and borderColor - flip: Added color resolution in CSS for borderColor, frontBackgroundColor, backBackgroundColor, titleColor, and descriptionColor All changes follow the pattern of using useColorResolver() in edit.js and Base_CSS::resolve_color_value() in PHP CSS files to properly handle theme color slugs. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

… icons, posts, review, progress-bar) Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Copilot · 2026-02-16T13:12:31Z

@copilot apply the fix to all blocks that uses attributes for colors.

Applied the color slug resolution fix to all 15 blocks with color attributes:

Commits:

ec91125: High-priority blocks (button, section, icons, posts, review, progress-bar)
b3417e8: Medium-priority blocks (circle-counter, countdown, sharing-icons, popup, flip)

Pattern applied:

JavaScript: useColorResolver() hook wraps all color attributes
PHP: Base_CSS::resolve_color_value() format function on all color properties

All blocks now properly resolve theme color slugs from theme.json while remaining backward compatible with hex/rgb/hsl values.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/1045629/chrome-linux.zip
- Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node install.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

pirate-bot · 2026-02-16T13:23:14Z

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	271.38 KB	271.38 KB	0 B (0.00%)
Blocks	1.54 MB	1.54 MB	702 B (0.04%)
CSS	100.76 KB	100.76 KB	0 B (0.00%)
Dashboard	198.36 KB	198.36 KB	0 B (0.00%)
Onboarding	160.8 KB	160.8 KB	0 B (0.00%)
Export Import	97.73 KB	97.73 KB	0 B (0.00%)
Pro	407.08 KB	407.08 KB	0 B (0.00%)

pirate-bot · 2026-02-16T13:25:00Z

Plugin build for 3d2950b is ready 🛎️!

Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
Download Otter Pro - Production ~ Development
Download Blocks Animation - Production ~ Development
Download Blocks CSS - Production ~ Development
Download Blocks Export Import - Production ~ Development

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

…functions Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Initial plan

60605d9

Copilot AI assigned Copilot and selul Feb 16, 2026

Copilot started work on behalf of selul February 16, 2026 12:25 View session

Copilot AI and others added 5 commits February 16, 2026 12:31

Add color slug resolution for advanced-heading block

109f6b3

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Build project successfully with color slug resolution

645bad3

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Add useColorResolver hook for easier color slug resolution

aaa302c

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Add documentation for color slug resolution

cc7555e

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Fix trailing whitespace issues from code review

da6b837

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix color slugs not working in Otter Blocks~~ Resolve color slugs from theme.json in Otter blocks Feb 16, 2026

Copilot AI requested a review from selul February 16, 2026 12:44

Copilot finished work on behalf of selul February 16, 2026 12:44

Copilot started work on behalf of selul February 16, 2026 12:45 View session

Copilot AI and others added 2 commits February 16, 2026 13:04

Apply color slug resolution to high-priority blocks (button, section,…

ec91125

… icons, posts, review, progress-bar) Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Copilot AI changed the title ~~Resolve color slugs from theme.json in Otter blocks~~ Resolve color slugs from theme.json in all Otter blocks Feb 16, 2026

Copilot finished work on behalf of selul February 16, 2026 13:14

selul marked this pull request as ready for review February 16, 2026 13:21

Copilot started work on behalf of selul February 19, 2026 10:42 View session

Copilot AI and others added 5 commits February 19, 2026 10:49

Use CSS variables to preserve color slug connection to theme.json

97a84f0

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Add slug sanitization and improve documentation clarity

339205d

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Add comprehensive implementation summary documentation

2062294

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Remove extra documentation and add unit tests for color CSS variable …

1caa725

…functions Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Allow underscores in color slug sanitization per WordPress conventions

f58891e

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Copilot AI changed the title ~~Resolve color slugs from theme.json in all Otter blocks~~ Convert color slugs to CSS variables to preserve theme.json connection Feb 19, 2026

Copilot finished work on behalf of selul February 19, 2026 11:01

Copilot started work on behalf of selul February 19, 2026 11:08 View session

Remove color-slug-resolution.md documentation file

ccac00d

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Copilot AI changed the title ~~Convert color slugs to CSS variables to preserve theme.json connection~~ Remove leftover color-slug-resolution.md documentation file Feb 19, 2026

Copilot finished work on behalf of selul February 19, 2026 11:10

selul changed the base branch from master to development February 19, 2026 11:17

Copilot started work on behalf of selul February 19, 2026 12:08 View session

Fix JSDoc alignment error in helper-functions.js

3d2950b

Co-authored-by: selul <3330746+selul@users.noreply.github.com>

Copilot AI changed the title ~~Remove leftover color-slug-resolution.md documentation file~~ Fix JSDoc alignment error in color helper function Feb 19, 2026

Copilot finished work on behalf of selul February 19, 2026 12:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix JSDoc alignment error in color helper function#2743

Fix JSDoc alignment error in color helper function#2743
Copilot wants to merge 15 commits intodevelopmentfrom
copilot/fix-color-slugs-in-otter-blocks

Copilot AI commented Feb 16, 2026 •

edited

Loading

Uh oh!

selul commented Feb 16, 2026

Uh oh!

Copilot AI commented Feb 16, 2026 •

edited

Loading

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

pirate-bot commented Feb 16, 2026 •

edited

Loading

Uh oh!

pirate-bot commented Feb 16, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Conversation

Copilot AI commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet or Help Scout ticket

Environment info

Is the issue you are reporting a regression

Comments on the Issue (you are @copilot in this section)

Uh oh!

selul commented Feb 16, 2026

Uh oh!

Copilot AI commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

pirate-bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Size Diff

Uh oh!

pirate-bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Comments

Copilot AI commented Feb 16, 2026 •

edited

Loading

Copilot AI commented Feb 16, 2026 •

edited

Loading

pirate-bot commented Feb 16, 2026 •

edited

Loading

pirate-bot commented Feb 16, 2026 •

edited

Loading