Freephile Wiki

Page components

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
Load video
YouTube
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
Inspired by river's talk about the wiki.gg IMP (Improved Main Page) framework, I finally got around to creating this content.

To develop such a system we also need to refer to all the technical underpinnings used by developers and wiki admins, so bear with us during the process. Eventually there will be separate technical vs. user content.

mw:Design is probably the best starting point to learn about User Interface in the MediaWiki context.

Draft


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

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

Solutions edit

We try to untangle the confusing mess of terminology later, but first let's just jump into an overview of some of the current solutions available for Drupal and WordPress users to get an idea of what could be possible for MediaWiki in terms of

  1. Creating Pages and Content
  2. Building Page Components
  3. Managing Site Design

Drupal edit

Drupal has Canvas which was developed under the name 'Experience Builder' and featured in DrupalCon Atlanta 2025

Drupal has the DXPR Theme which is a Drupal Theme offering a low-code approach based on Bootstrap. The theme can be complemented by DXPR CMS which is a customized Drupal distribution offering AI-assisted content creation and 'recipes' for page components. The CMS includes 88 carefully selected Drupal modules organized by functionality to provide comprehensive functionality out of the box. The recipes pull together the underlying codebase to surface these content types or features: Case Studies, Events, Forms, Analytics, News, SEO Tools. One key module in the CMS is the DXPR Builder. Builder is the AI page-builder for Drupal. It swaps complex back-end forms for a front-end, drag-and-drop experience that respects Drupal's Entity API (revisions, translations, permissions) and works with any theme.

WordPress edit

Typical "more features is more money" pricing

WordPress has plugins like Elementor[9] and Divi. Divi is a popular WordPress theme and website builder from Elegant Themes that allows users to build websites using a visual, front-end, drag-and-drop interface instead of code. It includes a powerful page builder with over 200 website elements and 2,000 pre-made layouts[10], as well as advanced design settings.

Both Divi and Elementor perform well on pages of simple and moderate complexity. The current version of Divi shows poor performance on complex pages. Elementor performs much better than Divi on complex pages, though not as well as modern page builders like Breakdance or Oxygen[11]. Oxygen is distinct from traditional page builders like Elementor or Divi because it replaces the standard WordPress theme system, allowing users to design every aspect of their website, including headers, footers, content areas, and dynamic data layouts, directly within its visual editor.

Cross-CMS terminology edit

Page components is supposed to be about a high-level design system and editor-centered workflow or toolset to easily produce good-looking content. But there is a language problem before you can even discusss the topic with different people: different product communities do not use the same terminology. A MediaWiki template is not what you might be familiar with from other definitions of the word template. A module is not a plugin, unless it is like a plugin, but not when you mean a Lua module. While Drupal and WordPress both use the term "theme" for the UI, MediaWiki calls this a "skin".

This table will not achieve a unified lexicon across the industry, but it does at least show where the same concepts have completely different terminology; or where the exact same word is used for different concepts by different groups.

Term

[1] [2] [3] [4] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26] [27] [28]

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[29]. The system also offers composables which encapsulate and reuse stateful logic[30].

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[31] for Drupal with the same for WordPress[17] While not a core content term, some web publishing teams (like at Harvard[17]) 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[32] 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[33]. 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[34], 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[35]: 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.

[1] [3] [4] [5] [15] [18] [28]

Personal Notes edit

  1. ↑ Of course they 'stole' the wp:Gutenberg name for their product.

References edit

  1. ↑ 1.0 1.1 1.2 https://drupalcloud.mit.edu/help/frequently-asked-questions-about-drupal/what-are-basic-concepts-and-terminology-drupal
  2. ↑ 2.0 2.1 2.2 https://wordpress.com/support/wordpress-editor/add-content-blocks/
  3. ↑ 3.0 3.1 3.2 https://www.cloudaccess.net/joomla-knowledgebase/138-joomla-3-1/getting-started/782-tutorial-9-using-modules-joomla-3-2.html
  4. ↑ 4.0 4.1 4.2 https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options
  5. ↑ 5.0 5.1 https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/
  6. ↑ https://www.npgroup.net/blog/modular-web-design-the-age-of-templates-is-over/
  7. ↑ https://www.hostinger.in/tutorials/gutenberg-wordpress
  8. ↑ https://wpvip.com/blog/wordpress-block-data/
  9. ↑ see also https://elementor.com/
  10. ↑ More is not better! Every product out there tries to outdo the other in terms of how many X or Y they have compared to some other product. But I don't want 2,637 options to choose from! Simplicity and quality should be built in so the job is easy and the results are fantastic.
  11. ↑ For a decent comparison of Divi vs Elementor, see https://www.wpallimport.com/divi-vs-elementor/
  12. ↑ https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components
  13. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML
  14. ↑ https://marketing-toolbox.dcreate.domains/website-social/understanding-components/
  15. ↑ 15.0 15.1 https://marcom.wwu.edu/drupal-vocabulary
  16. ↑ https://drupalguide.slac.stanford.edu/organize-and-build/glossary-terms
  17. ↑ 17.0 17.1 17.2 https://wordpress.harvardsites.harvard.edu/blocks-components/
  18. ↑ 18.0 18.1 https://www.webdevelopmentgroup.com/insights/wordpress-terminology/
  19. ↑ https://www.hostinger.com/ph/tutorials/wordpress-blocks
  20. ↑ https://docs.joomla.org/Component
  21. ↑ https://www.joomlacontenteditor.net/support/documentation/editor/editor-format-blocks
  22. ↑ https://www.joomlageek.com/joomla-glossary
  23. ↑ https://www.joomlart.com/documentation/wiki-ja-t3v2-joomla-2-5/developer-guide
  24. ↑ https://docs.joomla.org/Extension_types_(general_definitions)
  25. ↑ https://ostraining.com/blog/magento-blog/blocks-widgets/
  26. ↑ https://experienceleague.adobe.com/en/docs/commerce-admin/content-design/elements/blocks/blocks
  27. ↑ https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html
  28. ↑ 28.0 28.1 https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6
  29. ↑ Others include Accordion, Breadcrumbs, Card, Dialog, InfoChip, Menu, ProgressBar, SearchInput, Table, Tab, Thumbnail, Tooltip, etc. https://www.mediawiki.org/wiki/Codex/Planned_Components
  30. ↑ https://vuejs.org/guide/reusability/composables.html
  31. ↑ https://designsystem.harvardsites.harvard.edu/
  32. ↑ See https://en.wikipedia.org/wiki/HTML_element and the HTML Specification itself https://html.spec.whatwg.org/multipage/index.html
  33. ↑ token definition Using design tokens directly in MediaWiki
  34. ↑ https://www.mediawiki.org/wiki/Manual:Page_content_models
  35. ↑ https://www.mediawiki.org/wiki/Category:ContentHandler_extensions
Retrieved from "https://wiki.freephile.org/wiki/index.php?title=Page_components&oldid=12579"