Skip to content

Conversation

@ncoetzer
Copy link
Contributor

@ncoetzer ncoetzer commented Aug 29, 2025

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 #393

How to test the Change

Changelog Entry

Added - New Hook

Credits

Props @ncoetzer @fabiankaegy

Checklist:

@cypress
Copy link

cypress bot commented Aug 29, 2025

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 ↗︎

@ncoetzer ncoetzer changed the title Add useRenderAppenderWithLimits hook Add useRenderAppenderWithLimit hook Aug 29, 2025
…mponent instead of a boolean flag for button appender
…etailed parameter descriptions and usage examples for default, button type, and custom appenders.
Copy link
Member

@fabiankaegy fabiankaegy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is looking good :)

@fabiankaegy fabiankaegy merged commit ead8456 into develop Sep 8, 2025
8 of 9 checks passed
@fabiankaegy fabiankaegy deleted the feature/hook-render-appender-with-limit branch September 8, 2025 07:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

New Hook [Type] Enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add useRenderAppenderWithLimit hook

2 participants