Customizing and extending the Formatting Toolbar

[bph]

Discussed in #255

^{Originally posted by magdalenapaciorek April 30, 2024}
I'm proposing this topic (and volunteering myself as the author) because patterns similar to the one below are quite common in web design. I believe the formatting API is often overlooked, and developers who are unfamiliar with it might struggle to implement such designs.

The initial plan for the article:

• an overview of available formats with examples of how they can be used (e.g., adding an inline image to the citation in the Quote Block)
• how to unregister default formats
• how to add a basic format, similar to the one shown in the screenshot
• how to implement more complex format controls, such as the one in the Language Format, where a click opens a popover with multiple options.

[magdalenapaciorek]

I'm happy to take this on.

[flexseth]

I'm happy to take this on.

+1 - happy to see this, hidden gem in the toolbar!!

[justintadlock]

@magdalenapaciorek - If you need any inspiration for examples, I have quite a few: https://github.com/x3p0-dev/x3p0-ideas/tree/9d2e309ab639b169709c53260dab8377c44d47ad/resources/js/format-library The abbreviation and span (custom class) formats are more advanced and include popups for additional attribute input.

[magdalenapaciorek]

@justintadlock great examples, thank you! :)

[bph]

@magdalenapaciorek just wanted to check in with you on the progress of your article and if there are any blockers, I can assist you with.

[magdalenapaciorek]

I'm getting close to the finish line and should have a draft ready to share in just a few days

[ndiego]

Hi @magdalenapaciorek just checking in to see how the draft is coming along. Let me know if I can help with anything.

[bph]

Hi there, @magdalenapaciorek Are there any blockers to your progress that I can help remove?

[magdalenapaciorek]

@ndiego , @bph thanks for checking in! Last time I wrote, I was close to finishing the draft, but unfortunately, I haven’t made any progress since then due to some health issues. I had to put the article aside for a bit, but I’m planning to get back to it soon. I don’t want to promise any specific dates just yet, but I’ll keep you updated. Thanks for your understanding! :)

[bph]

@magdalenapaciorek So sorry to read that you were sick, hope you are feeling better soon. Just know that, we are here if you need anything.

[bph]

@magdalenapaciorek I hope this note finds you well, and you're completely recovered from your health woes. If you get a minute, maybe you can update us on the adjusted timeline for working on your blog post? We are coming up to holiday/year-end vacation time, and resources for reviews will be sparse... Also, please let us know if there are blockers we can help you with.

[magdalenapaciorek]

@bph I came back to it a few days ago, and I'm aiming to have it ready for review by the end of the week. Thanks for checking in! 😊

[bph]

That's great news! @magdalenapaciorek Thank you for keeping at it. Looking forward to reading a first draft :-)

[magdalenapaciorek]

I think the article is finally ready for review: https://docs.google.com/document/d/1ByMbX1wRb4C53vwq2sD2_mVKY0lVk7uaVp0krzDcfHQ/edit?usp=sharing

I probably won’t be able to update the screenshots today, will do it tomorrow.

[bph]

Hi @magdalenapaciorek I started the first review and will continue tomorrow Thursday at the bookmark.

[bph]

Hi @magdalenapaciorek I had quite a few correction and suggestions for you.

• I would have luv;d to see the screenshots that will go with it, too
• Please ensure code snippet adhere to the WordPress coding standards. I have seen a few non-compliant sections.
• Will you provide a functioning code example repo? Maybe as plugin? It helps readers to double-check against a final version.

I just sent you an invitation to the Learn WordPress organization on GitHub, just in case.

[magdalenapaciorek]

@bph thank you for taking the time to review the article. I’ve made the changes and added some comments. I also included more screenshots and used eslint and prettier from wp-scripts to format the code according to WordPress coding standards. I’ll be uploading the code to the repo shortly.