Description

This PR serves as an iteration on #14241 and #14943.

As mentioned in a couple of comments by @aduth, using createElement instead of the traditional function call when rendering a render prop offers more flexibility for the implementor of the render prop. The implementor can use the traditional render prop style:

renderAppender={ () =>  ( <MyComponent /> ) }

as well as using a simpler style without the need for the wrapping function:

renderAppender={ MyComponent }

The only downside I can see is that if parameters were added to renderAppender, they'd need to be expressed as props:

renderAppender={ ( { someParam } ) => ( <MyComponent someProp={ someParam } /> ) }

instead of a plain argument:

renderAppender={ ( someParam ) => ( <MyComponent someProp={ someParam } /> ) }

which is inconsistent with other render props.

How has this been tested?

1. Create a Group Block
2. Observe that the button appender is initially rendered
3. Click the button appender and add an image block to the group block
4. Observe that button appender is no longer shown and a trailing appender is displayed after the image block
5. Add a paragraph to the group block
6. Observe that no trailing appender (or button appender) is shown in the group block (the user can press 'enter' to add another block.)

Types of changes

Non-breaking refactor

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.