Create a Person block

[bobbingwide]

Create a block displaying details of a person / user with contact information

The Person block will work with the oik-user plugin to display information about a particular user.
It will combine a set of shortcodes into a single block.

Initial version

Block to be the equivalent of

<h3>Person</h3>
[bw_user user=abc name,bio]
[bw_follow_me user=abc]

where abc is the user name or ID entered in the Advanced Settings User field.

Subsequent versions

• Toggle to decide whether or not to display Follow me buttons
• Options to choose the different fields
• Display other information
• Alter the block heading
• Dynamic selection from a list of users
• When oik-user is not valid use alt=0,1,2 settings

[bobbingwide]

The current state of the Person block is as these screenshots.

Changes in this version

1. Add key= property
2. Add default: '' to user attribute
3. Import and use to encapsulate shortcodes. May be unnecessary in this instance.

For edit and save I've set the key= property to avoid getting the particularly unhelpful message

Warning: Each child in an array or iterator should have a unique "key" prop. 
See https://fb.me/react-warning-keys for more information. 

I've read the help multiple times but it really doesn't give any indication how to perform problem determination using Developer tools. There must be a rite of passage that I've not been prepared for.

How do I identify which controls need key= fields and which don't?

Note: Setting multiple key= fields with the same value does at least produce a slightly more useful message.

Warning: Encountered two children with the same key, `perinspector`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted 
— the behavior is unsupported and could change in a future version.

Perhaps there could be some provision in core for the commonly used tags.

Additional requirements

1. Display user's name rather than Person in the heading
2. Provide select list for users.
3. Use a generalised function for building shortcodes from attributes

[bobbingwide]

It’s time to change this block to a server side rendered function that under the covers will use the shortcode functions. There is already an example of using the bw_user shortcode to display an author box with gravatar,about,bio and a class of author-box.
The block should optionally include the Follow me block as a child element.

[bobbingwide]

The trouble with having the follow me block as a child element is that nested blocks do not automatically inherit attributes of the parent block. So the user= attribute would need to be set for both the Person block and the child follow me block.

Possible solutions

• Extend the server side logic for user to support a virtual follow_me field
• Change the Person block to display the Gravatar, if required, in a separate div
• Change the Person block to display the other fields in another div.
• Display order, if selected: about, bio, follow_me
• implement as server side rendered
• consider generating the equivalent shortcode as an option.

[bobbingwide]

Latest example in the block editor, showing the equivalent shortcode and the rendered output.

[bobbingwide]

• WordPress core now delivers a number of author blocks.
• But these don't support the display of user specific social media links
• The Person block is still delivered in oik-blocks
• Last updated in Block list block not showing icons with Gutenberg 11.9.0 #50
• Closing therefore