Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Gutenberg Blocks for WordPress and React Developers, а также все другие курсы, прямо сейчас!
Премиум
  • Урок 1. 00:03:34
    Before Watching the Course
  • Урок 2. 00:05:01
    Installing a Starter WordPress Theme
  • Урок 3. 00:02:42
    The Block Editor Interface
  • Урок 4. 00:11:41
    The Block Interface & Design Guidelines
  • Урок 5. 00:05:18
    How is a Post in the Block Editor Saved in the Database
  • Урок 6. 00:03:53
    How the Visual Editor is Reconstructed From Plain HTML
  • Урок 7. 00:08:42
    A Brief Introduction to the Redux-like Data Stores in the Block Editor
  • Урок 8. 00:09:06
    The Post State Array in Action
  • Урок 9. 00:03:07
    Creating a New WordPress Plugin
  • Урок 10. 00:12:00
    Registering our First Block
  • Урок 11. 00:05:15
    Returning React Components in the Edit & Save Functions
  • Урок 12. 00:13:04
    Compiling ESNext to ES5 with wp-scripts
  • Урок 13. 00:16:23
    Compiling & Loading SASS Files
  • Урок 14. 00:09:37
    Generating a Block with @wordpress/create-block
  • Урок 15. 00:08:56
    Configuring ESLint & Prettier for JavaScript Files
  • Урок 16. 00:08:22
    Configuring Stylelint for Linting our SCSS Files
  • Урок 17. 00:09:40
    Adding a Pre-commit Git Hook with Husky
  • Урок 18. 00:09:11
    Adding Custom Styles to the Block Editor
  • Урок 19. 00:12:29
    Adding Support for Align Wide and Align Full
  • Урок 20. 00:10:03
    Adding Custom Colour Pallets
  • Урок 21. 00:04:10
    Adding Custom Font Sizes
  • Урок 22. 00:03:00
    Custom Sizing & Custom Units
  • Урок 23. 00:04:43
    Creating a New Clone from our Boilerplate Properly
  • Урок 24. 00:05:05
    Editing the Boilerplate's Metadata
  • Урок 25. 00:03:04
    Customizing the Block's Icon
  • Урок 26. 00:17:19
    The RichText Component
  • Урок 27. 00:14:36
    Adding Options in the Block Toolbar Using BlockControls
  • Урок 28. 00:10:26
    The AlignmentToolbar Component
  • Урок 29. 00:10:14
    Adding Options in the Sidebar Using InspectorControls
  • Урок 30. 00:11:30
    Adding an Option to Change the Background and Text Colours
  • Урок 31. 00:21:48
    Using the withColors Higher Order Component
  • Урок 32. 00:10:48
    Changing the Background and Text Colours using Block Supports
  • Урок 33. 00:16:21
    Adding an Option to Change the Block's Padding
  • Урок 34. 00:12:41
    Adding an Option for toggling Box Shadow
  • Урок 35. 00:03:26
    Adding Support for Different Style Options
  • Урок 36. 00:05:29
    Examples & Variations
  • Урок 37. 00:11:31
    Transforming Blocks into Other Blocks
  • Урок 38. 00:09:46
    Adding Deprecated Versions for our Block
  • Урок 39. 00:10:05
    Adding Deprecated Versions for our Block (Part. 2)
  • Урок 40. 00:02:32
    Block Overview
  • Урок 41. 00:03:32
    Initializing a New Plugin for Our Block
  • Урок 42. 00:04:22
    Editing the Boilerplate's Metadata
  • Урок 43. 00:06:18
    Using InnerBlocks to Create a Nested Block
  • Урок 44. 00:05:27
    Registering the Team Member Block
  • Урок 45. 00:12:12
    Creating the edit and save functions for the name and bio
  • Урок 46. 00:04:27
    Adding templates for our team members
  • Урок 47. 00:08:38
    Adding an option for changing the number of columns
  • Урок 48. 00:08:54
    Styling the Front-end of the Block
  • Урок 49. 00:14:39
    Adding the Editor Styles for our Block
  • Урок 50. 00:08:32
    Introducing the ImagePlaceholder Component
  • Урок 51. 00:13:19
    Storing & Displaying the Team Member Image
  • Урок 52. 00:01:53
    Handiling Inserting an Image from an External URL
  • Урок 53. 00:05:25
    Displaying Image Related Errors
  • Урок 54. 00:05:10
    Displaying the Image in the Save Function (Front-end)
  • Урок 55. 00:08:43
    Blob URL Edge Case & Memory Optimization
  • Урок 56. 00:05:21
    Replacing the Image with a Toolbar Option
  • Урок 57. 00:02:42
    Removing the Image with a Toolbar Option
  • Урок 58. 00:06:09
    Adding a Sidebar Option to Modify the Alt Text of the Image
  • Урок 59. 00:20:25
    Adding an Option for Changing the Image Size
  • Урок 60. 00:05:51
    Focusing on the Name Input After Selecting an Image
  • Урок 61. 00:01:30
    Adding Alignment Options for the Team Members Block
  • Урок 62. 00:09:56
    Adding & Displaying an Attribute for the Social Links
  • Урок 63. 00:04:39
    Styling the Social Links for the Editor Page
  • Урок 64. 00:06:48
    Selected Link State & Styling
  • Урок 65. 00:04:02
    Adding New Items to the Social Links
  • Урок 66. 00:05:42
    The Save Function Markup for the Social Links
  • Урок 67. 00:06:43
    Extracting the Social Links Array from the HTML to Improve Efficiency
  • Урок 68. 00:06:06
    Adding the Markup for the Edit Link Form
  • Урок 69. 00:05:05
    Editing the Social Media Links & Icons
  • Урок 70. 00:05:20
    Removing Social Links
  • Урок 71. 00:16:45
    Making our Social Links Sortable (Part. 1)
  • Урок 72. 00:15:53
    Making our Social Links Sortable (Part. 2)
  • Урок 73. 00:07:10
    Adding an Example for the Block Preview
  • Урок 74. 00:12:28
    Adding Transformations for the Team Members Block
  • Урок 75. 00:03:02
    Introduction to Dynamic Blocks
  • Урок 76. 00:03:02
    Initializing our Latest Posts Block
  • Урок 77. 00:04:12
    Editing the Boilerplate's Metadata
  • Урок 78. 00:04:55
    Displaying Dynamic Content in the Front-end
  • Урок 79. 00:15:36
    Displaying the Latest Posts in the Frond-end Using PHP
  • Урок 80. 00:07:50
    Preparing Our Data for the Editor Loop
  • Урок 81. 00:15:37
    Displaying the Latest Posts in the Editor
  • Урок 82. 00:05:41
    Styling the Posts in the Editor and Front-end
  • Урок 83. 00:09:26
    Adding Options for Number of Posts and Featured Image
  • Урок 84. 00:05:17
    Adding an Option for Changing the Order of the Posts
  • Урок 85. 00:22:50
    Filtering Posts by Categories
  • Урок 86. 00:12:00
    Creating a New Plugin Boilerplate for the Block Editor
  • Урок 87. 00:11:57
    Integrating wp-scripts in our Boilerplate
  • Урок 88. 00:11:07
    The Core Data Stores
  • Урок 89. 00:09:20
    Using the Data Stored Inside the Blocks
  • Урок 90. 00:06:56
    Todos Store Overview
  • Урок 91. 00:18:26
    Registering a Custom Store
  • Урок 92. 00:16:24
    Populating Our Store Data from an external API
  • Урок 93. 00:05:47
    Handling API Errors
  • Урок 94. 00:09:26
    Displaying the Todos in the Todo List Block
  • Урок 95. 00:07:42
    Adding a Form for Adding New Todos
  • Урок 96. 00:10:15
    Using the API to Add New Todos
  • Урок 97. 00:14:17
    Using the API to Toggle the Todos
  • Урок 98. 00:08:08
    Creating the Todo List Info Block
  • Урок 99. 00:09:47
    The Old PHP Way of Managing Metadata
  • Урок 100. 00:07:51
    Manipulating Meta Fields Using the Data Stores
  • Урок 101. 00:13:45
    Managing Meta Fields Using Blocks
  • Урок 102. 00:05:57
    Adding a Custom Sidebar using Plugins
  • Урок 103. 00:06:48
    Customizing the Existing Editor UI
  • Урок 104. 00:06:31
    Adding an Option to Edit Meta Fields in the Sidebar
  • Урок 105. 00:04:16
    Passing Attributes from Parent to Child using Context
  • Урок 106. 00:06:57
    Adding Predefined Templates for Post Types
  • Урок 107. 00:08:11
    Adding Predefined Block Patterns
  • Урок 108. 00:08:48
    Using the Formatting API to add New Text Formats
  • Урок 109. 00:11:08
    Modifying Existing Behaviour with PHP Filters
  • Урок 110. 00:11:38
    Modifying Existing Behaviour with JavaScript Filters
  • Урок 111. 00:19:55
    Internationalization - Generating & Loading Translation FIles
  • Урок 112. 00:05:35
    Installing a Theme & Cloning the Gutenberg Repository
  • Урок 113. 00:03:03
    The Editor Interface
  • Урок 114. 00:06:38
    The Block Interface
  • Урок 115. 00:06:45
    Block Design - Best Practices & Guidelines
  • Урок 116. 00:05:15
    How Our Gutenberg Post is Saved in the Database
  • Урок 117. 00:03:52
    How the Visual Editor is Reconstructed From Plain HTML
  • Урок 118. 00:06:28
    A Brief Introduction to Redux in Gutenberg
  • Урок 119. 00:07:08
    The Post State Array in Action
  • Урок 120. 00:06:28
    Writing a React Component Without JSX
  • Урок 121. 00:04:15
    Preparing Our Files for Webpack & NPM
  • Урок 122. 00:07:48
    Using Webpack to Bundle Our JS Files
  • Урок 123. 00:09:31
    Using Webpack Loaders to Transpile ES6 into ES5
  • Урок 124. 00:04:09
    Transpiling JSX with Webpack
  • Урок 125. 00:04:06
    React Babel Preset Development Mode
  • Урок 126. 00:05:03
    Exploring Source-mapping Options in Webpack
  • Урок 127. 00:06:38
    Compiling & Loading SASS Files with Webpack
  • Урок 128. 00:04:22
    Adding Autoprefixer to Our CSS
  • Урок 129. 00:05:45
    Moving the CSS Bundle into a Separate File Using Webpack Plugins
  • Урок 130. 00:05:54
    Minifying the CSS Bundle with Webpack
  • Урок 131. 00:06:43
    Creating a Plugin & Registering a Block with ES5
  • Урок 132. 00:05:19
    Block Server Side Registration
  • Урок 133. 00:04:00
    Using React Properly in Gutenberg Blocks
  • Урок 134. 00:03:17
    Changing the Block Icons and Filtering Keywords
  • Урок 135. 00:04:30
    Applying Webpack to our WordPress Plugin
  • Урок 136. 00:05:47
    Enqueuing Our New Bundle & Refactoring PHP Registration
  • Урок 137. 00:05:35
    Registering a Block With ES6 & JSX
  • Урок 138. 00:06:37
    Styling Our Block in the Editor Page
  • Урок 139. 00:10:57
    Creating a New Webpack Bundle for Editor+Frontend Styles & Scripts
  • Урок 140. 00:10:35
    Understanding & Using the Webpack Externals Feature
  • Урок 141. 00:09:24
    Adding Gulp to the Workflow to Produce a Zipped version of the plugin
  • Урок 142. 00:06:48
    [Optional] Integrating ESLint in Our Project
  • Урок 143. 00:04:07
    [Optional] Running ESLint Before Creating a production Bundle
  • Урок 144. 00:06:45
    [Optional] Adding Prettier to Our Project
  • Урок 145. 00:03:23
    [Optional] Disabling ESLint Rules that Prettier Will Fix
  • Урок 146. 00:08:08
    [Optional] Running Prettier Before Committing to Repository Using Husky Hooks
  • Урок 147. 00:04:11
    Adding align-wide & align-full support
  • Урок 148. 00:04:08
    Creating a Custom Colour Palette
  • Урок 149. 00:01:27
    Making Gutenberg's Embedded Content Responsive
  • Урок 150. 00:06:22
    Adding Editor Styles to Resemble Front-end
  • Урок 151. 00:07:04
    The "wp.editor" & "wp.components" Modules
  • Урок 152. 00:05:44
    Using the RichText Component in the Editor
  • Урок 153. 00:03:29
    Using the RichText Component in the save() Function
  • Урок 154. 00:02:02
    Avoiding Saving Attributes in Block Delimiters and Parsing them from the HTML
  • Урок 155. 00:08:54
    An Overview of the BlockControls Component
  • Урок 156. 00:05:19
    Using the AlignmentToolbar Component
  • Урок 157. 00:04:47
    An Overview of the InspectorControls Component
  • Урок 158. 00:05:20
    Using the PanelColorSettings Component
  • Урок 159. 00:03:44
    Adding Multiple Styles to our Block
  • Урок 160. 00:02:50
    Adding a Custom Category to the Block Library
  • Урок 161. 00:04:04
    Moving the Edit Component into a Separate File
  • Урок 162. 00:06:22
    Porting the Edit Function from a Functional to a Class Component
  • Урок 163. 00:04:24
    Introducing the withColors Higher Order Component
  • Урок 164. 00:09:09
    Using withColors HOC in the Editor
  • Урок 165. 00:08:01
    Using withColors HOC in the Front-end
  • Урок 166. 00:04:43
    Adding a Toggle Shadow Option in the Block Toolbar
  • Урок 167. 00:06:31
    Adding a Shadow Opacity Option Using RangeControl
  • Урок 168. 00:05:30
    Adding Deprecated Versions to your Block to Avoid Validation Errors
  • Урок 169. 00:11:17
    Migrating Old Attributes in Deprecations
  • Урок 170. 00:06:23
    Transforming Other Block Types into Our Block
  • Урок 171. 00:02:35
    Transforming Our Block Type into Other Block Types
  • Урок 172. 00:01:56
    Block Overview
  • Урок 173. 00:04:15
    Setting Up Our Block
  • Урок 174. 00:06:27
    Implementing the Edit Function for Editing the Title & the Bio
  • Урок 175. 00:02:56
    Adding the Save Function for the Team Member Block
  • Урок 176. 00:08:59
    Creating the Team Members Block Using InnerBlocks
  • Урок 177. 00:05:19
    Adding a Columns Attribute for the Parent Team Members Block
  • Урок 178. 00:07:04
    Styling the Columns in the Front-end
  • Урок 179. 00:07:34
    Styling the Columns in the Editor Page
  • Урок 180. 00:01:44
    Removing Unneeded Block Features
  • Урок 181. 00:06:27
    Introducing the MediaPlaceholder Component
  • Урок 182. 00:08:26
    Handling the Image Upload & Media Library Buttons
  • Урок 183. 00:01:47
    Handling Inserting an Image from a URL
  • Урок 184. 00:03:55
    Handling Image Upload Errors
  • Урок 185. 00:02:12
    Displaying a Responsive Image in the Front-end
  • Урок 186. 00:04:44
    Handling Blocks with Unfinished Image Uploads
  • Урок 187. 00:09:38
    Adding Edit Image & Remove Image Buttons and Functionality
  • Урок 188. 00:04:36
    Adding a Textarea in the Sidebar to Edit the Alt Text for the Image
  • Урок 189. 00:06:40
    Adding the Option to Change the Image Size
  • Урок 190. 00:10:29
    Populating the Image Sizes Dropdown from Redux Stores
  • Урок 191. 00:01:11
    Enabling "Align Wide" & "Align Full" in Our Team Members Block
  • Урок 192. 00:07:28
    Adding an Array Type Attribute for the Social Links and Icons
  • Урок 193. 00:08:05
    Adding a Selected Icon State Using React's Component State
  • Урок 194. 00:05:49
    Implementing the Save Function for the Team Member
  • Урок 195. 00:04:30
    Avoiding Saving the Social Array Attribute in the Block Delimiter
  • Урок 196. 00:04:04
    Adding the Markup for the Edit Social Link Form
  • Урок 197. 00:07:05
    Populating the Form and Updating the Social Attribute
  • Урок 198. 00:03:40
    Removing Items from the Social Attribute
  • Урок 199. 00:12:25
    Making the Social Icons Sortable Using react-sortable-hoc
  • Урок 200. 00:08:49
    Transforming Galleries and Images into Team Members
  • Урок 201. 00:04:49
    Setting Up Our Dynamic Block
  • Урок 202. 00:04:28
    Adding Attributes in a Dynamic Block
  • Урок 203. 00:06:07
    Fetching the Latest Posts Dynamically in the Render Callback Function
  • Урок 204. 00:04:24
    Fetching the Latest Posts in the JS Side using Redux
  • Урок 205. 00:06:32
    Mimicking the PHP Posts Loop Using JS in the Edit Function
  • Урок 206. 00:03:31
    Adding a Sidebar Option for the Number of Posts
  • Урок 207. 00:10:30
    Filtering the Latest Posts by Categories
  • Урок 208. 00:07:33
    Accessing redux data & dispatching actions to redux the WRONG Way!
  • Урок 209. 00:07:29
    Using withSelect & withDispatch together using "wp.compose"
  • Урок 210. 00:03:13
    Let's Create a Redux Store and Use it in Multiple Components!
  • Урок 211. 00:07:26
    Setting Up Our Block and Redux Store Files
  • Урок 212. 00:09:49
    Registering our Own Redux Store
  • Урок 213. 00:06:27
    Populating Our Redux Store using an External API
  • Урок 214. 00:05:15
    Improving our Resolver using Controls and Generator Functions
  • Урок 215. 00:07:27
    Displaying our To Dos from the Redux Store in the To Do List Component
  • Урок 216. 00:06:12
    Adding a new Control to Toggle the To Do Item
  • Урок 217. 00:06:07
    Updating the To Do Items After Getting a Response from the API
  • Урок 218. 00:05:55
    Creating a Second Block that Shares the Same Redux Data
  • Урок 219. 00:06:35
    How is Metadata Managed by Default in Gutenberg?
  • Урок 220. 00:08:03
    How to Get and Set Metadata using Redux Selectors and Actions
  • Урок 221. 00:06:41
    Updating Metadata Using a Block
  • Урок 222. 00:07:15
    Using Templates to Pre-define blocks in the Editor Page
  • Урок 223. 00:07:09
    Registering a Gutenberg Plugin to Add a Sidebar
  • Урок 224. 00:04:25
    Using Our Plugin to Modify the Existing Gutenberg Sidebar
  • Урок 225. 00:07:30
    Managing Metadata in the New Sidebar
  • Урок 226. 00:02:14
    Conclusion & Next Steps