Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a Person block #6

Open
bobbingwide opened this Issue Feb 27, 2018 · 4 comments

Comments

Projects
None yet
1 participant
@bobbingwide
Copy link
Owner

commented Feb 27, 2018

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 bobbingwide self-assigned this Feb 27, 2018

bobbingwide referenced this issue in bobbingwide/oik-block Mar 2, 2018

@bobbingwide

This comment has been minimized.

Copy link
Owner Author

commented Mar 14, 2018

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

image

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

This comment has been minimized.

Copy link
Owner Author

commented Feb 28, 2019

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

This comment has been minimized.

Copy link
Owner Author

commented Mar 4, 2019

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

This comment has been minimized.

Copy link
Owner Author

commented Mar 4, 2019

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

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.