Creating a custom WordPress admin screen using Gutenberg packages: Part 2 | WordPress Tutorial
In this video, originally streamed on April 7, 2022, we continue the work on our settings screen by removing the TabPanel, creating a custom data store using @wordpress/data, and creating a much better UI.
00:00 Intro
00:31 Recap from last week
02:02 Going over the code, removing the TabPanel, and general cleanup
11:21 Working on the WordCount component.
14:38 Working on the FeaturedImage component
17:50 Answering viewer question about controlling the amount of renders cause by an onChange handler in WordCount component
26:57 Exploring using useReducer hook for state management of our settings screen.
28:15 Exploring using @wordpress/data to create a custom store
30:41 Creating a custom datastore using the @wordpress/data package
31:54 Creating some actions for the datastore
36:54 Creating the reducer function for the datastore
41:36 Registering the datastore
43:20 Using the Redux Chrome extension to test our actions
45:38 Add selectors to retrieve data from the store
47:41 Using the useSelect hook and our custom selectors
51:02 Creating an action to hydrate the store with the settings saved in the database
01:02:26 Hydrating the app correctly with useEffect
1:10:20 Adding the datastore to the FeaturedImage component
01:17:32 Creating a better UI by using the Panel, PaneBody, and PanelRow components
Music: Philanthrope, mommy - Burgundy https://chll.to/bc9c5cfe
#Gutenberg #WordPressPluginDevelopement #CustomWordPressAdminScreen
Watch video Creating a custom WordPress admin screen using Gutenberg packages: Part 2 | WordPress Tutorial online without registration, duration hours minute second in high quality. This video was added by user Ryan Welcher Codes 12 April 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 602 once and liked it 11 people.