Chapter 4: Basic Blocks

This chapter introduces students to the WordPress block editor—the modern tool for creating rich, formatted content. Learners will master essential content blocks (Paragraph, Heading, Image, Quote, List, Table, Gallery) and embedded media (Video, Audio), with emphasis on accessibility (alt text) and semantic HTML (proper heading hierarchy). Through hands-on practice, students will build a multi-block page that demonstrates their ability to combine different content types into cohesive, professionally formatted material.

Overview

The WordPress Block Editor (Gutenberg) is a modern, flexible tool for creating rich, visually appealing, and semantically structured content. Unlike the classic editor, which treated content as a single block of text, the Block Editor organizes content into individual “blocks.” Each block represents a distinct element—such as a paragraph, heading, image, or video—making it easy to design professional layouts without coding.

The Block Editor organizes content into modular units called blocks. Each block is self-contained, with its own settings and styling options. This approach offers several benefits:

• Drag-and-drop flexibility: Easily rearrange content blocks to change layout.
• Consistent design: Blocks follow theme styles for a polished look.
• Improved accessibility and SEO: Blocks use semantic HTML, making content easier to navigate for screen readers and search engines.

Essential Content Blocks

Block Name	Purpose / What it does
Paragraph	Adds body text. Supports basic formatting like bold, italic, links, and alignment.
Heading	Creates headings (H1–H6) for organizing content. Important for semantic structure and Search Engine Optimization.
Image	Inserts an image with alignment options and alt text for accessibility.
Quote	Displays quotations or testimonials with styled formatting for emphasis.
List	Creates ordered (numbered) or unordered (bulleted) lists. Supports nesting and formatting.
Table	Displays structured data in rows and columns. Options for header rows and styling.
Gallery	Shows multiple images in a grid layout. Captions can be added for each image.
Video	Embeds videos from the media library or external sources (YouTube, Vimeo).
Audio	Adds audio files or podcasts with playback controls.

Accessibility and Semantic HTML

Accessibility and semantic structure are essential for creating content that is usable by all audiences and optimized for search engines. Always provide descriptive alt text for images so that screen readers can convey meaningful information to visually impaired users. Maintain a logical heading hierarchy by using headings to organize content rather than for visual styling—start with H1 for the page title, followed by H2 for main sections, and H3 for subsections. Avoid using headings solely for aesthetic purposes; instead, ensure they reflect the structure and meaning of your content. This approach improves both accessibility and SEO, making your content easier to navigate and understand.

Styling Your Blocks

You can manually adjust the style of each block as you add it, but this approach is time-consuming and often results in inconsistencies. It also makes global updates across your site much harder.

When you customize a block’s style during creation, you override the default settings. If you later update the default style, those individual overrides will remain unchanged.

Alignment Icons

Icon	Name	Meaning
	Align Center	Centers the block or content horizontally within its container. Useful for headings, images, or buttons that need to be visually centered.
	Align Justify	Justifies text so that it spans the full width of its container, aligning both the left and right edges. Commonly used for paragraphs to create a clean block of text.
	Align Left	Aligns the selected block or content to the left side of its container. Commonly used for text, images, or media when you want them flush to the left margin.
	Align Right	Aligns the block or content to the right side of its container. Often used for images or elements that should appear on the right margin.
	Align None	Removes any special alignment and places the block in its default position according to the theme’s layout. No left, center, or right alignment applied.
	Stretch Full Width	Stretch Full Width makes a block span the entire width of the browser or page container, ignoring the usual content constraints. Perfect for bold, immersive hero sections, cover blocks, or banners that should stretch edge-to-edge.
	Stretch Wide	Stretch Wide expands a block beyond the normal content column while still leaving some margin on each side—ideal for featured sections that need emphasis without going full width.
	Justify Left	Arranges items so they’re grouped toward the left side of the container, leaving extra space on the right for a clean, aligned layout.
	Justify Center	Distributes items evenly around the center of the container, creating balanced layouts with equal space on both sides—often used for nav menus or button groups.
	Justify Right	Positions items toward the right side of the container—useful for elements that should appear flush with the right margin.
	Justify Space Between	Spreads items across the container: first item aligned left, last item right, and equal space between all items—great for toolbars or navigation bars.
	Justify Stretch	Expands items so they fill the container’s width, removing gaps. Useful for uniform layouts where each item occupies equal space (e.g., evenly sized buttons or columns).
	Position Center	Centers the block horizontally within its container without text wrapping—ideal for standalone elements like images, buttons, or groups.
	Position Left	Positions the block to the left side of the container, often with text wrapping around it—commonly used for images or media with adjacent text.
	Position Right	Positions the block to the right side of the container, typically with text wrapping on the left—useful for right-aligned callouts or images.
	Pull Left	Moves a block (often an image/media) to the left and allows surrounding text to wrap on the right—similar to a traditional floated image.
	Pull Right	Moves a block to the right and enables text to wrap on the left—useful for magazine-style layouts or emphasizing an element on the right beside text.