Course - Advanced Shortcodes to Blocks

[jonathanbossenger]

Needs Assessment Statement

The Converting a Shortcode to a Block course provides an introduction to taking existing WordPress shortcodes and turning them into blocks. However, it covers only the basics of what this might look like, and does not deeper into topics like using dynamic blocks for rendering, accepting and using user attributes to determine block output, and accessing data from the WordPress database to display in the block output. This course will cover these topics, and more, using real world examples.

Target Audience

WordPress developers who make extensive use of shortcodes in their plugins or themes.

Course Objective

Once completing this course, developers will be able to convert any shortcode into a block.

Outline #

• [ ]

Related Resources

Links to related content on Learn, HelpHub, DevHub, GitHub Gutenberg Issues, DevNotes, etc.

• [ ]

Guidelines

Review the team guidelines

Course Development Checklist

• Needs Assessment Statement, Target Audience, Course Objective, and Outline created
• Needs Assessment Statement, Target Audience, Course Objective, and Outline vetted by an ID and feedback given
• Overall topic and Outline Vetted by a Subject Matter Expert and feedback given
• Gather links to Support and Developer Docs
• Review any related material on Learn
• Course created and announced to the team for Q/A review
• Course review completed and ready to publish
• Course excerpt created and featured on Learn WordPress
• Course announced to Marketing Team for promotion

[jonathanbossenger]

This course will attempt to answer some of the questions raised in this content feedback issue #1759, but will also expand on the topic.

It would be great if we could get examples of the types of things this course should cover. I have some ideas of my own, but it would be ideal to gather ideas from WordPress developers using shortcodes in production and discover their hurdles turning those shortcodes into blocks.

[TobiasBg]

Nice idea, @jonathanbossenger.
In my plugin https://github.com/TablePress/TablePress I have a fairly complex Shortcode, which retrieves data from the database based on an ID attribute and generates HTML output (which can be further influenced by even more Shortcode attributes), and which enqueues frontend JS and CSS.
I have added a block for this (with the main aspect being backwards compatibility), however "only" using ServerSideRender, and without the integration of the Shortcode's JS code in the block editor.
If that would be of interest, I'll be happy to have a chat!

[jonathanbossenger]

Thanks @TobiasBg. The link to the source code should be enough for me to investigate. If I have questions, I will reach out. I appreciate your input here, knowing how folks are using shortcodes will help me define the course content better.

[sc0ttkclark]

My shortcode to block usage so far has just used transforms logic. I didn’t see that side covered in some of the learn pages code snippets I just looked at, but I may have missed it. Specifically I was looking for mapping the attributes.

I guess that the docs about converting are more about how to take a shortcode that you have and make a block that does the same thing, not about backcompat / transforming.

I'd also love to see a highlight of ServerSideRender for folks who aren't ready to let go of PHP or cannot feasibly do the same thing in PHP without much more complicated JS work.

[jonathanbossenger]

Thank you @sc0ttkclark

[jonathanbossenger]

This should probably be handled in the Intermediate Plugin Developer learning pathway.