Twitch Streams Code

This repo stores all of the code I create during streaming. For each stream, I'll create a branch and then merge it into trunk at the end and push both. That should keep things from getting too messy should. Hopefully it's useful 😎

https://www.twitch.tv/ryanwelchercodes

All of the streams are also available on my YouTube channel but are uploaded after the stream.

Latest Stream

July 14, 2022

Watch: Loading block data only when the block is being viewed on the front-end and probably some more examples for the docs.

Branch: stream/july-14-2022

Click for topics/highlights

• Set up a dynamic block to use viewScript in order to load a JavaScript file on the FE.
• Worked with IntersectionObserver to do some fun things
• Learned a lot about useEffect.

2022

Testing the configuration options for the @wordpress/scripts package and then creating code examples for the Block Editor handbook docs.

• Date: June 23, 2022

• Watch on YouTube

• Topics/Highlights:

• Quick look at the @wordpress/scripts package documentation.

• Plugin scaffold overview.

• Default scripts package setup.

• Set up for having multiple blocks.

• Using a custom directory name instead of src.

• Customizing the output directory.

• Configuring the build process to detect blocks and using custom entry points.

• Using the viewScript property in block.json to load a script on the front end only.

• Using the viewScript property with a dynamic block.

Reviewing changes to the @wordpress/scripts package and trying out Thunks for the first time!

• Date: May 12, 2022

• Watch on YouTube

• Topics/Highlights:

• Demonstrated how the @wordpress/scripts package handles multiple blocks natively

• Talked about use the --webpack-src-dir flag to set a custom directory name for your blocks

• Used the --webpack-copy-php flag to copy .php to the build directory.

• Converted the data store for our prepublish checklist to use thunks. Note: We has to use the __experimentalUseThunks: true option but it looks like thunks will be enabled by default in WordPress 6.0

Creating a custom admin screen using Gutenberg packages and components. Part 4

• Date: Apr 21, 2022

• Watch on Twitch

• Topics/Highlights: _ Briefly discussed Thunks in Wordpress _ Completed the datastore. _ Created the plugin to be loaded into the post editor _ Integrated the datastore with our plugin * Used <PluginDocumentSettingPanel/> to provide the user with feedback.

Creating a custom admin screen using Gutenberg packages and components. Part 3

• Date: Apr 14, 2022

• Watch on Twitch

• Topics/Highlights: _ Fought with state any my datastore. REALLY need to figure out how controls work.🤦‍♂️ _ Added user preferences for the panel toggle state * Abstracted out a new component for creating settings sections.

Creating a custom admin screen using Gutenberg packages and components. Part 2

• Date: Apr 7, 2022

• Watch on YouTube

• Topics/Highlights: _ Remove the tabs for a better UI _ Create a custom datastore for our settings * Continued to work on the <WordCount/> and <FeaturedImage/>

Creating a custom admin screen using Gutenberg packages and components. Part 1

• Date: Mar 31, 2022

• Watch on YouTube

• Topics/Highlights: _ Registered a new admin page for the plugin settings page. _ Used render from the @wordpress/element package to render our basic settings page. _ Messed around with the <TabPanel /> component to manage the different sections of the page. _ Learned a great trick to enqueue the matching CSS for any package we reference. _ Set up a new option to save our data. _ Used getEntityProp hook to access our setting. * Learned that although we can set the value of the option using the hook in state, we have to also used saveEditedEntityRecord to persist the change in the database.

Integrating a custom post type into Gutenberg and Full Site Editing

• Date: Mar 3, 2022

• Watch on YouTube

• Topics/Highlights: _ Scaffolding the plugin using the @wordpress/create-block _ Registering the custom post type. _ Registering some post meta ( custom fields ) _ Creating a custom document settings panel to manage the post meta. _ Creating a separate build process for our panel. _ Manually enqueueing the assets for our panel. _ Restricting the JavaScript to only load for the custom post type. _ Registering the plugin for our panel. _ Accessing the post meta with the useEntityProp hook. _ Adding the DatePicker and TextControl controls to our panel. _ Registering the block to display our post meta. _ Adding a block template to our custom post type _ Adding templates to a block theme for our custom post type _ Updating the archive template in the Site Editor

Getting started contributing to Gutenberg and creating a PR for the create-block package.

• Date: Mar 24, 2022

• Watch on YouTube

• Topics/Highlights: _ There is no code for this stream in the repo. _ We talk about getting set up locally for contributing to Gutenberg. _ We walked through creating a new issue for our feature - #39722 _ We added the npmDevDependencies template variable to the @wordpress/create-block package _ We walked through creating a pull request for our changes - #39723 _ We got it merged! Huge props to @dgwyer for the suggestion and getting co-contributor credit on the changes!

Looking at block deprecation strategies.

• Date: Feb 17, 2022

• Watch on YouTube

• Branch

• Topics/Highlights: _ We talk about using deprecations for static blocks. _ We learn how to convert a static block to a dynamic one

Creating a Block Based Theme with Daisy Olsen. Part 3.

* Date: Feb 10, 2022 * [Watch on YouTube](https://www.youtube.com/watch?v=kmbiQ6TsYd0) * [Branch](https://github.com/ryanwelcher/twitch/tree/stream/feb-10-2022)

• Topics/Highlights: _ Final stream with Daisy 😞 _ We create a single post with a sidebar _ We create a 404 page _ Demo the upcoming style pattern changes

Looking at Block locking, create-block, and script packages updates.

• Date: Feb 3, 2022

• Watch on YouTube

• Branch

• Topics/Highlights: _ Demo'd block-level locking using this repo/plugin. _ Demo'd how @wordpress/scripts now supports multiple blocks by default. _ Went through the updates to the @wordpress/create-block package. _ Create a template for the @wordpress/create-block package for Dynamic blocks. * Published the template to npm.

Converting a widget to a custom block. Part 2

• Date: Jan 27, 2022

• Watch on YouTube

• Branch

• Topics/Highlights: _ Used the useEffect and useState hooks _ Added caching for the front end via the Transient API

Converting a widget to a custom block. Part 1

• Date: Jan 20, 2022

• Watch on YouTube

• Branch

• Topics/Highlights: _ Daisy was feeling under the weather so we switched topics _ Explored an existing widget to convert into a blocks _ Scaffolded the files with the @wordpress/create-block package _ Started with retrieving Gutenberg props via their API. * Created the attributes and controls to manage the params for the query

Creating a block-based theme part 2

• Date: Jan 13, 2022

• Watch on YouTube

• Branch

• Topics/Highlights: _ Joined by Daisy Olsen _ Created a header.html and footer.html template parts _ Discovered an issue with the Navigation block that has already been fixed and will be released with the next version of the Gutenberg plugin. _ Defined a custom gradient in theme.json

Creating a block-based theme part 1

• Date: Jan 6, 2022

• Watch on YouTube

• Branch

• Topics/Highlights: _ Joined by Daisy Olsen _ Went through how Block Based Themes are structure by examining the TwentyTwentyTwo theme _ Started creating a theme from scratch _ Created a couple of templates * Used theme.json to define some settings and styles.

2021

First steam! Let's mess with some custom blocks

• Date: Sept 17, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ We talked about creating blocks from scratch using @wordpress/scripts _ Demonstrated the differences between Dynamic and Static blocks _ Showed how to save attributes in a block. _ Used the [@wordpress/create-block](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/) package to scaffold a new block. 🔥🔥🔥🔥 _ Talked about using how to get multiple blocks in a plugin ( code was never completed) _ Audio issues 😞 _ Ryan not able to type while people watch ( recurring theme...) _ Worked with getEntityRecords, isResolving, and invalidateResolver` to display posts in the Block Editor. Inspired by this blog post.

Updating the block examples at https://github.com/WordPress/gutenberg-examples

• Date: Sept 23, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ No code in this repos, as we updated some of the blocks in the Gutenberg Examples repo. _ Discussed that if a block isn't using @wordpress/scripts for a build process, that we need to manually add the index.asset.php file. * Figured out how the useBlockProps hook worked when passing items. Thanks to everyone who helped on that one!

Converting a shortcode to a custom block

• Date: Sept 30, 2021

• Watch on YouTube

• [Branch]((https://github.com/ryanwelcher/twitch/tree/stream/sept-30-2021)

• Topics/Highlights:

  • Talked about custom entry points when using @wordpress/scripts
  • Converted a shortcode to a custom block.
  • Learned that Transforms are very confusing and the docs aren't that helpful.
  • Ryan's first day with JS for loops and React 🤦‍♂️

Creating a plugin with @wordpress/create-blocks that has multiple blocks

• Date: Oct 7, 2021

• Watch on YouTube

• Branch

• Topics/Highlights:

  • Used the @wordpress/create-block package to scaffold a new plugin with a single block.
  • Restructured the plugin to allow for registering multiple blocks.
  • Added a custom webpack.config.js to set up one entry point per block.
  • Demo'd a custom template that uses the same structure: npx @wordpress/create-block --template @ryanwelcher/multiple-blocks-template.
  • https://www.npmjs.com/package/@ryanwelcher/multiple-blocks-template

Creating an accordion block that uses the InnerBlock component

• Date: Oct 14, 2021

• Watch on YouTube

• Branch

• Topics/Highlights:

  • Used the @wordpress/create-block along with the my @ryanwelcher/multiple-blocks-template to setup the plugin.

Building a pre-publish checklist plugin for Gutenberg

• Date: Oct 21, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ Inspired by this WordPress Stack Exchange question and this article by Rich Tabor _ Introduced registerPlugin and some of the slots available in Gutenberg. _ Learned how to disabled the Publish button _ Added requirements for word count, having a featured image, and having at least one category selected that is not Uncategorized

The @wordpress/create-blocks package now supports local templates - let's give it a spin!

• Date: Oct 28, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ Discussed new feature in @wordpress/create-block that allows using local directories for templates. _ Created custom template to build out additional blocks. _ Showed how the $scheme property in block.json is 🔥🔥🔥 _ Linked to great article by Marcus Kazmierczak on how to create your own custom template

Adding e2e tests to blocks

• Date: Nov 4, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ Discussed how the @wordpress/scripts package contains the e2e testing tools _ Discussed how we also need @wordpress/env to run them. _ Created a basic e2e test suite to test if the block was inserted and that the content was correct _ Discussed using snapshots and the difference between toMatchSnapshot and toMatchInlineSnapshot _ Discussed how to pre-populate the test database with content using npm pre commands and the wp-env run command _ Created a test to ensure that the block saved test input by the user as the message attribute.

Creating a Poll block for Gutenberg. Part 1

• Date: Nov 18, 2021

• Watch on YouTube

• Branch

• Topics/Highlights:

  • Started the Poll block using an external React library ( Google Charts) to display the content.

Creating a Poll block for Gutenberg Part 2: The Poll-ening

• Date: Nov 25, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ Decided that I hated the approach from the last stream and moved to using InnerBlocks. _ Used block context to pass the color from the main Poll block to the child Poll Item block. * CSS hates me and I have removed it from my Christmas card list.

Creating a Poll block for Gutenberg Part 3: The Final Chapter

• Date: Dec 2, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ Finished the Poll Block _ Wrote the JavaScript to allow the voting and display to happen _ Used getThemeSupports() to retrieve the color palette. _ I learned about mix-blend-mode and LOVE IT. @props to floridaCoderMan 🔥🔥🔥🔥

Creating a Meme Generator block

• Date: Dec 9, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ Worked with the @wordpress/create-block package _ Used the useEffect hook to retrieve meme data from an external API and stored it using useState _ Leveraged the supports object in block.json to introduce color and font controls. _ Leverage the BlockControls component to add a custom button to the block toolbar.

Expanding the Meme Generator plugin

• Date: Dec 16, 2021

• Watch on YouTube

• Branch

• Topics/Highlights: _ Added TabPanel to the existing Placeholder component to be able to choose being images provided by the API or from the Media Library _ Added the ability to upload and use an image from the Media Library using the MediaUpload and MediaUploadCheck components. _ Display the images that are associated with the current post in the same way we're showing the API images. _ Talked about some great ways to get started with contributing to WordPress * Happy Holidays!