grappler / twitch

Repo for the code from live streams

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

May 12, 2022

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

Branch: stream/may-12-2022

Click for 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

2022

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

• Date: Apr 21, 2021

• 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, 2021

• 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, 2021

• 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, 2021

• 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, 2021

• 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, 2021

• 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, 2021

• 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 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!