The purpose of any block is to produce semantic accessible HTML for the end-user. Building the block HTML by hand using a custom HTML block before actually creating the custom block saves time and makes the overall block building process easier.
- [Instructor] Short sidebar. … I want to give you a tip before we get started in Earnest, … and it's one I learned the hard way. … When building blocks, … I strongly recommend mocking up the blocks in WordPress … using good old fashioned HTML first. … That way you keep your focus … on the most important aspect of any block … that it produces semantic accessible HTML on the front end … for the visitor to access. … Here's how I do it. … In a new post or page, … or in whatever context the block will eventually be used, … I add custom HTML blocks … and enter the HTML I want the block to output … for each of my custom blocks. … Here we can see I have a custom HTML block … with the output for the first block, and the second block, … and then the third block. … This HTML is the exact HTML … I want to see on the front end. … Complete with classes and elements and nesting … and everything else. … So this is what I want my block to produce. … I'm just dumping it into WordPress … so I can see what it looks like on the front end. …
- Anatomy of a basic block
- Using attributes to capture data
- Finding and using components
- Adding wide and full block alignments
- Adding style variations to custom blocks
- Creating a dynamic block