MDN/Projects/Development/Building Blocks

As part of the redesign, we intend to offer templates for page layouts of the standard types of pages. In addition, we will offer in the toolbar a list of standard components for pages; we call these "building blocks."

This page covers each of the building blocks we'll need, what features they should have, and what they should look like.

YouTube video

We'll be using embedded YouTube videos more and more often. We need to make it easy to embed these in a standard way. While we already have a button in the toolbar for linking these, we want to add this to the building block mechanism.

Features

• Specify the URL of the video
• Specify a caption to display under the video
• The video and caption should be drawn styled neatly inside a box
• Make sure there's alt text for a11y; most not be optional

Mockup

<coming soon>

Screenshot

Screenshots are a commonly used item. Let's standardize their appearance.

Features

• Upload or select an existing image as the screenshot; both of these options should be available from the UI for configuring the screenshot
• Specify an optional caption
• Draw the screenshot (and caption, if any) neatly in a box, sized to fit the available space
• Click to zoom into a lightbox
• Make sure there's alt text for a11y; this mustn't be optional