fix: skip the first render so the anchor auto-generation only happens…

[Arukuen]

… onchange

fixes #3297, #3078

Summary by CodeRabbit

• Bug Fixes
  • Adjusted heading block processing to skip an unnecessary initial update while preserving debounced updates for subsequent edits, reducing redundant work and improving responsiveness when a heading is first rendered.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Added a first-render guard in the heading block's edit component useEffect to skip timeout clearing and debounced anchor/text processing on initial render, deferring that logic to subsequent renders to avoid incorrect anchor propagation during duplication.

Changes

Cohort / File(s)	Summary
Effect guard for anchor debouncing src/block/heading/edit.js	Added an isFirstRender ref and an early-return in the useEffect to bypass clearTimeout and debounced anchor/text processing on the initial render; subsequent renders continue using the existing debounced update logic.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• Verify the isFirstRender guard correctly prevents initial effect execution without leaking timers.
• Test duplication flow to confirm heading anchors are not copied to other blocks.
• Confirm debounced updates behave normally after the initial render.

Poem

🐰
A quiet hop on first display,
I skip the sweep and clear the way.
Anchors stay where they belong,
Duplication no longer wrong.
Hop—this little fix is done! 🎉

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: skipping the first render to prevent anchor auto-generation on initial render, addressing the core fix.
Linked Issues check	✅ Passed	The code changes directly address issue #3297 by preventing anchor auto-generation on first render, ensuring anchors are only generated on user changes.
Out of Scope Changes check	✅ Passed	All changes are scoped to the heading block's edit component to fix the anchor duplication issue; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/3297/3078-heading-anchor

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0931bab and 5bd1a88.

📒 Files selected for processing (1)

• src/block/heading/edit.js (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/block/heading/edit.js

⏰ 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). (7)

• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: build

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🤖 Pull request artifacts

file	commit
pr3651-stackable-3651-merge.zip	5bd1a88

[github-actions]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3651-stackable-3651-merge.zip"}}]}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/block/heading/edit.js (1)

108-114: Type inconsistency in updateTimeout ref usage.

The guard works but reuses updateTimeout for two purposes: a boolean flag on first render, then a timeout ID. On the second render, clearTimeout(true) is called—harmless but semantically incorrect.

Consider using a separate ref for the mount check:

 const [ prevText, setPrevText ] = useState( props.attributes.text )
 const updateTimeout = useRef( null )
+const isFirstRender = useRef( true )

 useEffect( () => {
-	// Use updateTimeout to skip effect on first render
-	if ( updateTimeout.current === null ) {
-		updateTimeout.current = true
+	if ( isFirstRender.current ) {
+		isFirstRender.current = false
 		return
 	}

 	clearTimeout( updateTimeout.current )

Alternatively, guard clearTimeout with a type check:

if ( typeof updateTimeout.current === 'number' ) {
	clearTimeout( updateTimeout.current )
}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7d01e08 and 0931bab.

📒 Files selected for processing (1)

• src/block/heading/edit.js (1 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: kaeizen
Repo: gambitph/Stackable PR: 3601
File: src/components/design-library-list/use-preview-renderer.js:307-331
Timestamp: 2025-09-25T08:17:15.564Z
Learning: In the design library preview renderer hook (src/components/design-library-list/use-preview-renderer.js), selectedTab changes trigger content updates through a chain of effects rather than direct dependencies. The first useEffect (template processing) responds to selectedTab changes indirectly and updates content state, which then triggers the second useEffect (rendering/scaling) that depends on content. This eliminates the need to add selectedTab to the second effect's dependency array.

📚 Learning: 2025-09-25T08:17:15.564Z

Learnt from: kaeizen
Repo: gambitph/Stackable PR: 3601
File: src/components/design-library-list/use-preview-renderer.js:307-331
Timestamp: 2025-09-25T08:17:15.564Z
Learning: In the design library preview renderer hook (src/components/design-library-list/use-preview-renderer.js), selectedTab changes trigger content updates through a chain of effects rather than direct dependencies. The first useEffect (template processing) responds to selectedTab changes indirectly and updates content state, which then triggers the second useEffect (rendering/scaling) that depends on content. This eliminates the need to add selectedTab to the second effect's dependency array.

Applied to files:

• src/block/heading/edit.js

🧬 Code graph analysis (1)

src/block/heading/edit.js (1)

src/block/timeline/edit.js (1)

• updateTimeout (134-134)

⏰ 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). (7)

• GitHub Check: PHP 7.3 and WP 6.5.5
• GitHub Check: PHP 8.2 and WP latest
• GitHub Check: PHP 7.3 and WP latest
• GitHub Check: PHP 8.2 and WP 6.7.2
• GitHub Check: PHP 8.2 and WP 6.6.2
• GitHub Check: PHP 8.2 and WP 6.5.5
• GitHub Check: build

🔇 Additional comments (1)

src/block/heading/edit.js (1)

117-125: Fix approach looks correct for the duplication issue.

Skipping the first render prevents anchor auto-generation from running immediately after block duplication, which addresses issue #3297. The debounce logic and __unstableMarkNextChangeAsNotPersistent usage are appropriate.