Introduction on using Gutenberg components for plugin pages

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/183

^{Originally posted by **bph** December 14, 2023} The whole component system is available for all WordPress developers, even if they don't create for the the block editor per se. The article - introduce to the tools available on how to learn about the components, cue in title music for the [Storybook space](https://wordpress.github.io/gutenberg/?path=/docs/docs-introduction--page). - hold three examples on how to use them outside the block editor on plugin pages. - be a teaser post for the longer Course on Learn.WordPress [Using the WordPress Data Layer](https://learn.wordpress.org/course/using-the-wordpress-data-layer/) - also point towards the in progress _Gutenberg as a platform_ documentation, that right now worked on.

[meszarosrob]

@bph I'm keen on this topic and would gladly give writing an article a shot :slightly_smiling_face:

[justintadlock]

@meszarosrob - Thanks for taking this on. I'm excited to see what you come up with. Feel free to ask me for any help or anyone from the #core-dev-blog Slack channel about getting started.

Here's a list with important links for contributing:

• https://developer.wordpress.org/news/how-to-contribute/
• https://developer.wordpress.org/news/tips-and-guidelines-for-writers/

The biggest thing is to put your draft (when you start it) in a Google Doc that has open comments/suggestions and leave the link to it here. The review process will happen within the doc.

[meszarosrob]

I'll start (slowly) writing the first draft.

Based on your recommendation, @bph, I wrote a fat outline. Justin was more than awesome to take a look at it and support the overall take on the topic.

[meszarosrob]

I'm going to use https://docs.google.com/document/d/1p8LHR8V4-2xNojwDlkPT1MdkpW0Pce3Z95pyfE6rq-8/edit?usp=sharing for my draft.

There are already some things there. It's still far from ready, but I'm getting there. I'll give an update before or at the next developer blog editor meeting :pray:

[bph]

That's a great start! @meszarosrob -

Just added a note pointing to the guidelines to avoid the 'We" pronoun, as it might force you going through and change a few sentences.

I am excited to read the final draft and following along on the tutorial!

[meszarosrob]

That's a great start! @meszarosrob -

Just added a note pointing to the guidelines to avoid the 'We" pronoun, as it might force you going through and change a few sentences.

Thanks for taking a look at it @bph! Absolutely :v:. It's on my list of things to remember when revising the draft.

[meszarosrob]

@bph, @justintadlock I believe the draft is in a good enough shape for somebody to read it through. I'm looking forward to the feedback :slightly_smiling_face:

[justintadlock]

I've finished the first review of this. Overall, I like where this is at in terms of content. This is really good stuff and is definitely needed for the Dev Blog.

The biggest thing I would recommend is being more explicit about what the reader should be doing in each step. Even though this is an advanced tutorial, make sure there's clarity about where each code block should be placed within the reader's files as they walk through. And this is especially important when you jump between different files.

Basically, it's OK to assume some general knowledge on the reader's part. For example, there's no need to teach them how to use wp-scripts. But don't assume they know how to build the thing you're building and know exactly where to put things. Does that make sense?

Another way of putting it might be: baby-step them through the things that you're teaching.

Anyways, this is a good start. We still need someone to do a proper copyediting review (for the 2nd review) who's better at that than me.

[mateuswetah]

Excited for this! As a plugin developer I've created a lot of areas in the admin using my own solutions and would be great to start taking advantage of all the a11y and design concerns the Gutenberg team has had creating this components ❤️

[meszarosrob]

@justintadlock thanks a lot for the feedback. I've incorporated your suggestions :slightly_smiling_face:

@bph would you have time to take a look at it or find the appropriate person for the 2nd review? :bow:

[bph]

@meszarosrob in have one more review to finish, but I should have time today, latest tomorrow for a review. Looking forward to reading it more thoroughly

[bph]

I started a review but it's getting late. I left a bookmark so I know where to continue tomorrow.

I like the step-by-step approach with control screenshots in between.

[bph]

I am done with the review and only had a few more comments. It's a great tutorial now! Thank you.

Just now I added you to the Dev Blog site "Invitation email sent to user. A confirmation link must be clicked for them to be added to your site." the email on your .org profile You should update your profile to show your first and last name so it displays right on the article.

In a separate comment I will share the pre-publish and post-publish checklist.

For first your first article I'll ask you only save it as draft, enable the Public preview link, and share it in a comment.

[bph]

Pre-publishing checklist: (updated 1/29/2024)

• [x] Post Title and subheaders in sentence case
• [x] Are Category or Categories selected?
• [x] Are Tags identifies?
• [x] Is there an explicit Excerpt?
• [x] Are all images files uploaded to the media library
• [x] Do all images have an alt-text?
• [x] Assign or upload a featured image
• [x] Props added? (See Guidelines)
• [x] add copy for a social post as comment to this issue (example) 🙌 Publish! 📗

Post-publishing checklist

• [x] add Props for reviews to #props channel in WP Slack (Example) (use Slack handles)
• [ ] close the issue with a comment to link to the published post
• [x] close the accompanying discussion with the link to the published post.

[meszarosrob]

I am done with the review and only had a few more comments. It's a great tutorial now! Thank you.

Thanks for the feedback and suggestions!

Just now I added you to the Dev Blog site "Invitation email sent to user. A confirmation link must be clicked for them to be added to your site." the email on your .org profile You should update your profile to show your first and last name so it displays right on the article.

Got the invite, and I accepted it. I also changed my display name.

For first your first article I'll ask you only save it as draft, enable the Public preview link, and share it in a comment.

Of course. Here it is: https://developer.wordpress.org/news/?p=3084&preview=1&_ppp=7ec745bf4e

[meszarosrob]

Regarding the pre-publishing checklist:

Are Tags identifies?

I don't see anything suitable from the "most used" list. I would appreciate it if you could select the appropriate ones :bow:


add copy for a social post as comment to this issue

Would something like this be okay?

Learn how to create a settings page with multiple controls using WordPress React components for a plugin that displays an announcement bar on the front end.

---

There's one thing that I find weird and I'm not sure what's going on.

If I create a code block and select the language, then in the preview, the line breaks are not kept.


However, if there's no language set, things look alright on the front end.


Is this a known issue? Did the copy-paste go wrong?

[bph]

Hi Robert! Yes the code block issues is a known issue we are in the midst of finding a better plugin. Please continue and don't attache a language to your code examples.

Social copy is fine :-)

Tags: add 'components' and 'react' should work.

[meszarosrob]

Yes the code block issues is a known issue we are in the midst of finding a better plugin. Please continue and don't attache a language to your code examples.

Got it. I removed from all code blocks the language.

Tags: add 'components' and 'react' should work.

Added these as recommended :slightly_smiling_face:

---

@bph Let me know if there's anything else. I believe and hope I addressed all other points from the pre-publishing checklist :bow:

[bph]

Congratulations @meszarosrob Your article was just published. How to use WordPress React components for plugin pages I took the liberty to shorten the title a bit, though.

[bph]

@meszarosrob Will you do the honors and post the props to the props channel (see above post publish check list?)

[meszarosrob]

Congratulations @meszarosrob Your article was just published.

Thanks :pray:

I took the liberty to shorten the title a bit, though.

It's great!

@meszarosrob Will you do the honors and post the props to the props channel (see above post publish check list?)

Absolutely :slightly_smiling_face: Done :heavy_check_mark: .