Gutenberg Block Development Tutorial projects based on Obi Plabon's tutorial hosted on Learn With Hasin Hayder.
One image bolck which can upload, select from media and show in back end and front end. It has alignment functionality.
Learning context
- Basic block creation
- JSON attributes
- MediaUpload, MediaUploadCheck controls
- Use of Components: Button, Icon
- Saving block content
A card block consists of image, title, description and a button. It has several layout such as image on top, left, right. On the image it has a label tag can be used for price, category etc.
Learning context
- Basic block creation
- JSON attributes
- Use of InspectorControls, MediaUpload, MediaUploadCheck, RichText
- Use of Components: Button, Icon, PanelBody, SelectControl
- Saving block content
A card block consists of image and an InnerBlock templates. It has several layout such as image on top, left, right. On the image it has a label tag can be used for price, category etc.
Learning context
- Use of useBlockProps, custome classes, inline CSS
- JSON attributes
- Use of InspectorControls, MediaUpload, MediaUploadCheck, RichText
- Use of Components: Button, Icon, PanelBody, SelectControl, RangeControl
- InnerBlocks use, InnerBlocks Templates
- Saving block content
This section describes how to install the plugin and get it working.
e.g.
- Upload the plugin files to the
/wp-content/plugins/tutorial-projectsdirectory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the 'Plugins' screen in WordPress
= Where do I get this tutorial =
As on 7th February 2024, the tutorial is not available any more. These project's original codes also gone out dated.
= Why do you do it? =
I was refresing myself with the current Gutenberg updates. I found those out dated so just rewrite them in new way. Hopeing someone who had that tutorial could be beneficial.
= 1.0 [12nd Feb 2024]
- Tutorial successfully finish
= 0.1.1 [11th Feb 2024]=
- Start Card block
= 0.1.0 [7th Feb 2024]=
- Release