Repo for the code from live streams
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
viewScript
in order to load a JavaScript file on the FE.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.
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
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.
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.
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/>
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.
_ 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.
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
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!
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
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.
Date: Jan 27, 2022
Topics/Highlights:
_ Used the useEffect
and useState
hooks
_ Added caching for the front end via the Transient API
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
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
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.
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.
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 the index.asset.php
file. * Figured out how the useBlockProps hook worked when passing items. Thanks to everyone who helped on that one!
Date: Sept 30, 2021
[Branch]((https://github.com/ryanwelcher/twitch/tree/stream/sept-30-2021)
Topics/Highlights:
@wordpress/scripts
for
loops and React 🤦♂️Date: Oct 7, 2021
Topics/Highlights:
webpack.config.js
to set up one entry point per block.npx @wordpress/create-block --template @ryanwelcher/multiple-blocks-template
.Date: Oct 14, 2021
Topics/Highlights:
@ryanwelcher/multiple-blocks-template
to setup the plugin.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
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
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 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.
Date: Nov 18, 2021
Topics/Highlights:
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.
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 about mix-blend-mode
and LOVE IT. @props to floridaCoderMan 🔥🔥🔥🔥
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 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.
Date: Dec 16, 2021
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!