Fix (block styles): fix block error for divider and icon button#3583
Merged
Fix (block styles): fix block error for divider and icon button#3583
Conversation
WalkthroughUpdated the Edit component compositions for divider and icon-button blocks to pass component-specific style objects to withBlockStyleContext, replacing the previous generic blockStyles argument. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
🤖 Pull request artifacts
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/block/divider/edit.js (1)
9-10: Stray character in comment blockThere’s a stray “k” before the closing
*/. Not functional, but it’s noise.- k*/ + */
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
src/block/divider/edit.js(1 hunks)src/block/icon-button/edit.js(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
src/block/icon-button/edit.js (1)
src/higher-order/with-block-style-context.js (1)
withBlockStyleContext(7-20)
src/block/divider/edit.js (2)
src/higher-order/with-block-style-context.js (1)
withBlockStyleContext(7-20)src/block/divider/style.js (1)
dividerStyles(19-22)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: PHP 7.3 and WP latest
- GitHub Check: PHP 8.2 and WP 6.6.2
- GitHub Check: PHP 8.2 and WP 6.7.2
- GitHub Check: PHP 8.2 and WP latest
- GitHub Check: PHP 8.2 and WP 6.5.5
🔇 Additional comments (1)
src/block/divider/edit.js (1)
140-141: Correct style-context: passing dividerStyles is consistent with generator usageUsing
withBlockStyleContext( dividerStyles )matches the generator fed intouseBlockCssGenerator(Line 62) and should prevent the divider block error. The style-variant UI continues to useblockStylesin the inspector, which is the intended separation.
Comment on lines
+124
to
125
| withBlockStyleContext( iconButtonStyles ), | ||
| )( Edit ) |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Correct style-context: passing iconButtonStyles fixes provider/consumer mismatch
Switching to withBlockStyleContext( iconButtonStyles ) aligns the BlockStyleProvider with the same BlockStyleGenerator used by useBlockCssGenerator (Line 52), which should resolve the reported block error. Inspector still receives blockStyles for UI variants, which is correct.
Run a quick repo-wide check to ensure other blocks don’t still pass blockStyles into withBlockStyleContext and that each file’s HOC argument matches the useBlockCssGenerator({ blockStyles: ... }) value.
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Call sites using withBlockStyleContext(...):"
rg -nP --type=js --type=jsx --type=ts --type=tsx 'withBlockStyleContext\s*\(' -C2 || true
echo
echo "Potential incorrect usages passing blockStyles instead of <block>Styles:"
rg -nP --type=js --type=jsx --type=ts --type=tsx 'withBlockStyleContext\s*\(\s*blockStyles\s*\)' -n -C2 || true
echo
echo "Verifying HOC argument matches useBlockCssGenerator({ blockStyles: ... }) in the same file..."
python - <<'PY'
import re, sys, pathlib
import subprocess
out = subprocess.run(['rg','-l','withBlockStyleContext\\s*\\('], capture_output=True, text=True)
files = [p for p in out.stdout.splitlines() if p.strip()]
mismatches = []
for f in files:
try:
txt = pathlib.Path(f).read_text(encoding='utf-8', errors='ignore')
except Exception:
continue
m1 = re.search(r'withBlockStyleContext\s*\(\s*([A-Za-z_]\w*)\s*\)', txt)
m2 = re.search(r'useBlockCssGenerator\s*\(\s*\{[^}]*?\bblockStyles\s*:\s*([A-Za-z_]\w*)', txt, re.S)
if m1 and m2 and m1.group(1) != m2.group(1):
mismatches.append((f, m1.group(1), m2.group(1)))
if mismatches:
print("Found mismatches (HOC arg vs useBlockCssGenerator blockStyles):", file=sys.stderr)
for f,a,b in mismatches:
print(f"- {f}: withBlockStyleContext({a}) vs useBlockCssGenerator(... blockStyles: {b} ...)")
sys.exit(1)
else:
print("No mismatches found.")
PYLength of output: 778
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Call sites using withBlockStyleContext(...):"
rg -nP --glob '*.{js,jsx,ts,tsx}' 'withBlockStyleContext\s*\(' -n -C2 || true
echo
echo "Potential incorrect usages passing blockStyles instead of <block>Styles:"
rg -nP --glob '*.{js,jsx,ts,tsx}' 'withBlockStyleContext\s*\(\s*blockStyles\s*\)' -n -C2 || true
echo
echo "Verifying HOC argument matches useBlockCssGenerator({ blockStyles: ... }) in the same file..."
python3 - <<'PY'
import re, sys, pathlib, subprocess
# List all files using withBlockStyleContext(...)
result = subprocess.run(
['rg', '-l', '--glob', '*.{js,jsx,ts,tsx}', 'withBlockStyleContext\\s*\\('],
capture_output=True, text=True
)
files = [f.strip() for f in result.stdout.splitlines() if f.strip()]
mismatches = []
for f in files:
try:
content = pathlib.Path(f).read_text(encoding='utf-8', errors='ignore')
except Exception:
continue
h_match = re.search(r'withBlockStyleContext\s*\(\s*([A-Za-z_][A-Za-z0-9_]*)\s*\)', content)
u_match = re.search(
r'useBlockCssGenerator\s*\(\s*\{\s*[^}]*?\bblockStyles\s*:\s*([A-Za-z_][A-Za-z0-9_]*)',
content, re.S
)
if h_match and u_match and (h_match.group(1) != u_match.group(1)):
mismatches.append((f, h_match.group(1), u_match.group(1)))
if mismatches:
sys.stderr.write("Found mismatches (HOC arg vs useBlockCssGenerator blockStyles):\n")
for f, hoc_arg, use_arg in mismatches:
sys.stderr.write(f"- {f}: withBlockStyleContext({hoc_arg}) vs useBlockCssGenerator(... blockStyles: {use_arg} ...)\n")
sys.exit(1)
else:
print("No mismatches found.")
PYLength of output: 22049
Update all blocks to use their specific style-context generators
The verification script uncovered that, beyond icon-button, many blocks are still invoking
withBlockStyleContext( blockStyles )instead of their corresponding <blockName>Styles. To avoid provider/consumer mismatches, each block’s HOC argument must match the identifier passed into its useBlockCssGenerator({ blockStyles: … }).
Please update the following files accordingly (line numbers approximate):
- src/block/countdown/edit.js:476 → use
countdownBlockStyles - src/block/timeline/edit.js:607 → use
timelineBlockStyles - src/block/text/edit.js:220 → use
textBlockStyles - src/block/video-popup/edit.js:293 → use
videoPopupBlockStyles - src/block/team-member/edit.js:153 → use
teamMemberBlockStyles - src/block/tabs/edit.js:325 → use
tabsBlockStyles - src/block/testimonial/edit.js:151 → use
testimonialBlockStyles - src/block/table-of-contents/edit.js:567 → use
tableOfContentsBlockStyles - src/block/tab-content/edit.js:198 → use
tabContentBlockStyles - src/block/price/edit.js:126 → use
priceBlockStyles - src/block/subtitle/edit.js:146 → use
subtitleBlockStyles - src/block/spacer/edit.js:200 → use
spacerBlockStyles - src/block/map/edit.js:573 → use
mapBlockStyles - src/block/separator/edit.js:161 → use
separatorBlockStyles - src/block/progress-circle/edit.js:179 → use
progressCircleBlockStyles - src/block/progress-bar/edit.js:166 → use
progressBarBlockStyles - src/block/pricing-box/edit.js:148 → use
pricingBoxBlockStyles - src/block/posts/edit.js:460 → use
postsBlockStyles - src/block/number-box/edit.js:173 → use
numberBoxBlockStyles - src/block/notification/edit.js:226 → use
notificationBlockStyles - src/block/icon/edit.js:135 → use
iconBlockStyles - src/block/image-box/edit.js:154 → use
imageBoxBlockStyles - src/block/image/edit.js:176 → use
imageBlockStyles - src/block/icon-list/edit.js:499 → use
iconListBlockStyles - src/block/icon-label/edit.js:156 → use
iconLabelBlockStyles - src/block/icon-list-item/edit.js:218 → use
iconListItemBlockStyles - src/block/hero/edit.js:158 → use
heroBlockStyles - src/block/horizontal-scroller/edit.js:271 → use
horizontalScrollerBlockStyles - src/block/icon-box/edit.js:162 → use
iconBoxBlockStyles - src/block/card/edit.js:210 → use
cardBlockStyles - src/block/heading/edit.js:291 → use
headingBlockStyles - src/block/feature-grid/edit.js:159 → use
featureGridBlockStyles - src/block/feature/edit.js:152 → use
featureBlockStyles - src/block/divider/edit.js:140 → already correct (
dividerStyles) - src/block/expand/edit.js:150 → use
expandBlockStyles - src/block/count-up/edit.js:139 → use
countUpBlockStyles - src/block/columns/edit.js:203 → use
columnsBlockStyles - src/block/call-to-action/edit.js:156 → use
callToActionBlockStyles - src/block/column/edit.js:226 → use
columnBlockStyles - src/block/carousel/edit.js:796 → use
carouselBlockStyles - src/block/button-group/edit.js:269 → use
buttonGroupBlockStyles - src/block/blockquote/edit.js:146 → use
blockquoteBlockStyles - src/block/accordion/edit.js:217 → use
accordionBlockStyles
Example diff for countdown:
- withBlockStyleContext( blockStyles ),
+ withBlockStyleContext( countdownBlockStyles ),🤖 Prompt for AI Agents
In src/block/icon-button/edit.js around lines 124-125 and in each file listed
(e.g., src/block/countdown/edit.js ~476, src/block/timeline/edit.js ~607,
src/block/text/edit.js ~220, etc.), update the HOC invocation so the
withBlockStyleContext argument matches the block-specific style generator used
by useBlockCssGenerator; replace withBlockStyleContext(blockStyles) with the
corresponding specific identifier (e.g., countdownBlockStyles,
timelineBlockStyles, textBlockStyles, videoPopupBlockStyles,
teamMemberBlockStyles, tabsBlockStyles, testimonialBlockStyles,
tableOfContentsBlockStyles, tabContentBlockStyles, priceBlockStyles,
subtitleBlockStyles, spacerBlockStyles, mapBlockStyles, separatorBlockStyles,
progressCircleBlockStyles, progressBarBlockStyles, pricingBoxBlockStyles,
postsBlockStyles, numberBoxBlockStyles, notificationBlockStyles,
iconBlockStyles, imageBoxBlockStyles, imageBlockStyles, iconListBlockStyles,
iconLabelBlockStyles, iconListItemBlockStyles, heroBlockStyles,
horizontalScrollerBlockStyles, iconBoxBlockStyles, cardBlockStyles,
headingBlockStyles, featureGridBlockStyles, featureBlockStyles, (divider stays
dividerStyles), expandBlockStyles, countUpBlockStyles, columnsBlockStyles,
callToActionBlockStyles, columnBlockStyles, carouselBlockStyles,
buttonGroupBlockStyles, blockquoteBlockStyles, accordionBlockStyles) so
provider/consumer identifiers match.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit