Fix (block styles): fix block error for divider and icon button #3583

coderabbitai · 2025-08-26T03:22:52Z

💡 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.") PY

Length 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.") PY

Length 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.

-Original file line number
+Diff line change
@@ Expand Up / @@ -137,5 +137,5 @@ export default compose( @@
     	withBlockWrapperIsHovered,
     	withQueryLoopContext,
     	withBlockAttributeContext,
-    	withBlockStyleContext( blockStyles ),
+    	withBlockStyleContext( dividerStyles ),
     )( Edit )

-Original file line number
+Diff line change
@@ Expand Up / @@ -121,5 +121,5 @@ export default compose( @@
     	withBlockWrapper,
     	withQueryLoopContext,
     	withBlockAttributeContext,
-    	withBlockStyleContext( blockStyles ),
+    	withBlockStyleContext( iconButtonStyles ),
     )( Edit )

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix (block styles): fix block error for divider and icon button #3583

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai bot Aug 26, 2025

Uh oh!

Uh oh!

Fix (block styles): fix block error for divider and icon button #3583

Uh oh!

Fix (block styles): fix block error for divider and icon button #3583

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

coderabbitai bot Aug 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!