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.
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.
Testing the configuration options for the @wordpress/scripts package and then creating code examples for the Block Editor handbook docs.
-
Date: June 23, 2022
-
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
-
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
-
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
-
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
-
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
-
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. _ UsedgetEntityProp
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 usedsaveEditedEntityRecord
to persist the change in the database.
Integrating a custom post type into Gutenberg and Full Site Editing
-
Date: Mar 3, 2022
-
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
-
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
-
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
-
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
-
Topics/Highlights: _ Used the
useEffect
anduseState
hooks _ Added caching for the front end via the Transient API
Converting a widget to a custom block. Part 1
-
Date: Jan 20, 2022
-
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
-
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
-
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.
First steam! Let's mess with some custom blocks
-
Date: Sept 17, 2021
-
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
-
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 theindex.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
-
[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 ๐คฆโโ๏ธ
- Talked about custom entry points when using
Creating a plugin with @wordpress/create-blocks that has multiple blocks
-
Date: Oct 7, 2021
-
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
-
Topics/Highlights:
- Used the @wordpress/create-block along with the my
@ryanwelcher/multiple-blocks-template
to setup the plugin.
- Used the @wordpress/create-block along with the my
Building a pre-publish checklist plugin for Gutenberg
-
Date: Oct 21, 2021
-
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
-
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
-
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 betweentoMatchSnapshot
andtoMatchInlineSnapshot
_ Discussed how to pre-populate the test database with content using npmpre
commands and thewp-env run
command _ Created a test to ensure that the block saved test input by the user as themessage
attribute.
Creating a Poll block for Gutenberg. Part 1
-
Date: Nov 18, 2021
-
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
-
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
-
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 aboutmix-blend-mode
and LOVE IT. @props to floridaCoderMan ๐ฅ๐ฅ๐ฅ๐ฅ
Creating a Meme Generator block
-
Date: Dec 9, 2021
-
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 thesupports
object in block.json to introduce color and font controls. _ Leverage theBlockControls
component to add a custom button to the block toolbar.
Expanding the Meme Generator plugin
-
Date: Dec 16, 2021
-
Topics/Highlights: _ Added
TabPanel
to the existingPlaceholder
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 theMediaUpload
andMediaUploadCheck
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!