block-components icon indicating copy to clipboard operation
block-components copied to clipboard

Add useRenderAppenderWithLimit hook

Open ncoetzer opened this issue 4 months ago • 1 comments

Description of the Change

This pull request introduces a new custom React hook, useRenderAppenderWithLimit, which allows developers to easily enforce a maximum number of inner blocks in WordPress blocks. It also demonstrates its usage by adding an example block and updates the block components package to export the new hook.

New Hook Implementation and Documentation

  • Added useRenderAppenderWithLimit hook in hooks/use-render-appender-with-limit/index.ts, which conditionally returns a block appender based on the number of inner blocks and a specified limit.
  • Provided documentation for the hook in hooks/use-render-appender-with-limit/readme.md, including usage instructions and an example.

Example Block Demonstrating the Hook

  • Created a new block, example/inner-block-limit, with configuration in example/src/blocks/inner-blocks-limit/block.json to showcase usage of the hook.
  • Implemented the block edit component in example/src/blocks/inner-blocks-limit/edit.tsx, utilizing the hook to limit inner blocks to four.
  • Registered the block in example/src/blocks/inner-blocks-limit/index.tsx, wiring up the edit and save functionality.

Package Export Update

  • Exported useRenderAppenderWithLimit from the main hooks index for easier import throughout the codebase.

Closes https://github.com/10up/block-components/issues/393

How to test the Change

Changelog Entry

Added - New Hook

Credits

Props @ncoetzer @fabiankaegy

Checklist:

ncoetzer avatar Aug 29 '25 15:08 ncoetzer

10up Block Components    Run #1057

Run Properties:  status check passed Passed #1057  •  git commit 6f752fca48: Enhance documentation for useRenderAppenderWithLimit hook by adding detailed par...
Project 10up Block Components
Branch Review feature/hook-render-appender-with-limit
Run status status check passed Passed #1057
Run duration 05m 07s
Commit git commit 6f752fca48: Enhance documentation for useRenderAppenderWithLimit hook by adding detailed par...
Committer Neil Coetzer
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 0
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 35
View all changes introduced in this branch ↗︎

cypress[bot] avatar Aug 29 '25 16:08 cypress[bot]