Page components

Load video

YouTube

YouTube might collect personal data. Privacy Policy

Continue Dismiss

river's talk about the wiki.gg IMP (Improved Main Page) framework

Page components
Summary
Title:	Page components
Description:	Page Components is the name I'm using for a visual design system that lets Users easily author pages with various "blocks" or "elements" on the page. The goal is to come up with a re-usable and easy-to-use system in MediaWiki software. MediaWiki is famously not a CMS, but more like a collaborative complex construction kit. Because the system is virtually unlimited and powerful, we would like to provide a pre-packaged "best way" to use that power without needing to be a power user and when there is TIMTOWTDI.
More

Draft

In Drupal, WordPress, and other CMSs, the terminology for "page components" varies, but the most common terms are Blocks, Modules, Widgets, and Elements.

A modular, component-based design is the modern standard in pretty much every CMS. In WordPress, for example, the newer "block" editor (Gutenberg) moved from the older system of static content to a modular, block-based approach for building pages.

Cross-CMS terminology

Term	Wiki	Drupal	WordPress	Joomla	Other CMSs
Blocks		Blocks are collections of content that can be placed into different "regions" of a page layout.	A block is a single piece of content used in the Gutenberg editor, such as a paragraph, image, or button.	In some versions, "blocks" referred to files that hold module positions.	Often refers to reusable content elements for building pages.
Modules		A module is an add-on that provides specialized functionality to Drupal. It is not the content itself, but rather the feature that provides the content.	This term is generally associated with plugins and themes in WordPress, not content elements.	Similar to a Drupal block, a module is a lightweight extension that adds functionality to a page. Modules are commonly used for sidebars and footers.	Other CMSs may have their own equivalent, often referring to a functional extension.
Components	Components are the interactive building blocks of MediaWiki's Codex design system built on Vue.js and CSS. Buttons are an example of components. The system also offers composables which encapsulate and reuse stateful logic. Note: Codex replaces the earlier OOUI design system.	A component can be a building block of a site, but in a more technical context, a "Single-Directory Component" can refer to the HTML, CSS, and JavaScript for a UI element. Compare HarvardSites Design System for Drupal with the same for WordPress	While not a core content term, some web publishing teams (like at Harvard) refer to custom blocks based on their design system as "components".	A component is a major functional unit, like a mini-application, that handles the main content of a page.	Often refers to the building blocks of a page, such as accordions, alerts, and grids.
Elements	An element is a general term that comes from the HTML specification meaning an individual part of a document, encapsulated by an HTML tag. A 'link' is an element. In the MediaWiki Design System (Codex), the smallest unit is the token. Tokens help implement the Codex Design Style Guide across all page components.	The building blocks or fields that make up a content type (such as a title or body).	Refers to HTML elements (e.g., heading, paragraph), which are represented as blocks in the Gutenberg editor.	HTML elements like headings and paragraphs are formatted using the editor.	The actual content primitives (text, image, video) placed inside slots within a block.
Widgets	Functionality provided by the Widgets extension. It allows privileged users to create pages in the Widget: namespace containing raw HTML or other code (using a templating language like Smarty) that can be easily transcluded into normal wiki pages, similar to templates.	While less emphasized in modern versions, widgets were historically used for small content blocks.	Legacy name for small content blocks placed in sidebars or footers. The block editor now handles this functionality more flexibly.	Sometimes referred to as small block-like pieces of content.	Similar to legacy WordPress, sometimes refers to small blocks of content, often found in sidebars or footers.
Content Types (or Content Models)	MediaWiki allows for page content types other than built-in support for wikitext, JavaScript, CSS, JSON and plain text. Extensions can use MediaWiki's ContentHandler mechanism to add new content models for accepting different formats and controlling how they are rendered, stored and edited. Examples: IIIF, Scribunto, WikiMarkdown	A predefined structure or template for a node (a unit of content) that determines its fields.	A broader term for content structures like Posts, Pages, or custom post types.	The templates that organize content.	Used to define the overall content structure, not individual components.

How these terms work together

In many modern systems, the architecture works like this:

• A Theme or Template defines the overall layout and where content goes.
• The layout is divided into Regions (in Drupal) or Template Parts (in WordPress block themes), like headers, footers, and sidebars.
• Within these regions, you place reusable Blocks or Modules.
• A block or module can be an Element itself (e.g., an image element) or a collection of other elements, which are configured via settings.