Online Workshop Series - Developing Blocks without React!

[jonathanbossenger]

This issue will be used to track the series of workshops on this topic, including any notes taken from the live stream sessions.

Event Details

• Title: Developing Blocks without React!!! (title to be confirmed)
• Description: JSX is the React extension to JavaScript that allows you to create components using a syntax similar to HTML. While most block editor tools and tutorials on the web provide JSX examples for creating blocks, not many folks know that it is not required. You can use plain JavaScript. In fact, the initial block editor documentation for building a basic block contains both JSX and Plain JavaScript examples, as does the Gutenberg Examples repository. This workshop (or series of workshops) intends to cover what this might look like.
• Target Audience: Developers
• Other info:
  • https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/
  • https://github.com/WordPress/gutenberg-examples

Sessions

• Online Workshop - Let's code: Developing Blocks without React! - Part 1 #1078
• Online Workshop - Let's code: Developing Blocks without React! - Part 2 #1088
• Online Workshop - Let's code: Developing Blocks without React! - Part 2 #1098
• Online Workshop - Let's code: Developing Blocks without React! - Part 3 #1119
• Online Workshop - Let's code: Developing Blocks without React! - Block Supports #1155

[jonathanbossenger]

Documentation updates:

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/#step-4-build-or-add-dependency

• include wp-block-editor dependancy in the block.asset.php file

WordPress/gutenberg#45604

[jonathanbossenger]

https://developer.wordpress.org/block-editor/how-to-guides/javascript/scope-your-code/

[jonathanbossenger]

https://developer.wordpress.org/resource/dashicons/#media-code

[jonathanbossenger]

https://developer.wordpress.org/block-editor/how-to-guides/javascript/js-build-setup/

[jonathanbossenger]

Package list for part 1

• https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/
• https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/
• https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/

[jonathanbossenger]

https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields/
https://developer.wordpress.org/block-editor/reference-guides/richtext/

Goal:

• implement attributes
• implement RichText
• enable styling Settings (padding, background color, text color)