Page components: Difference between revisions

(10 intermediate revisions by the same user not shown)

Line 1:

{{#ev:youtube|jCjaMnxgq2Q||right|river's talk about the wiki.gg IMP (Improved Main Page) framework||t=6022|autoresize}}

{{Feature

|description=Page Components is the name I'm using for a visual design system that lets Users easily ~~compose~~ pages with various "blocks" or "elements" on the page. The goal is to ~~describe how~~ to ~~apply industry~~-~~norms~~ in [[MediaWiki]] software. MediaWiki is famously not a CMS, but more like a collaborative ~~swiss-army knife~~ complex construction kit. Because the system is virtually ~~unconstrained~~, we provide ~~opinions on the~~ "best way" when there is TIMTOWTDI.

|image=Figma.svg

|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.

}}

{{ambox

|text=Inspired by [https://www.youtube.com/live/jCjaMnxgq2Q?t=6022 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.

}}

{{~~ambox~~

{{messagebox

|text=~~Inspired by [https://www.youtube.com/live/jCjaMnxgq2Q?si=inFGxpygdOv8HNMh&t=6022 river's talk about the wiki.gg IMP (Improved Main Page) framework], I finally got around to creating this content.~~}}

|text=Draft}}

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

Line 12:

Line 23:

<ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref>

A modular, component-based design is the modern standard in pretty much every CMS. In WordPress, for example, the newer "block" editor ([https://wordpress.org/gutenberg/ Gutenberg])<ref group="lower-alpha">Of course they 'stole' the [[wp:Gutenberg]] name for their product.</ref> moved from the older system of static content to a modular, block-based approach for building pages. <ref name="z2">https://wordpress.com/support/wordpress-editor/add-content-blocks/</ref><ref name="z5">https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/</ref>

A modular, component-based design is the modern standard in pretty much every CMS. In WordPress, for example, the newer "block" editor ([https://wordpress.org/gutenberg/ Gutenberg])<ref group="lower-alpha">Of course they 'stole' the [[wp:Gutenberg]] name for their product.</ref> moved from the older system of static content to a modular, block-based approach for building pages.

<ref name="z2">https://wordpress.com/support/wordpress-editor/add-content-blocks/</ref>

<ref name="z5">https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/</ref>

<ref name="z6">https://www.npgroup.net/blog/modular-web-design-the-age-of-templates-is-over/</ref>

<ref name="z7">https://www.hostinger.in/tutorials/gutenberg-wordpress</ref>

<ref name="z8">https://wpvip.com/blog/wordpress-block-data/</ref>

== Solutions ==

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

# Creating Pages and Content

# Building Page Components

# Managing Site Design

=== Drupal ===

Drupal has '''[https://www.drupal.org/project/canvas Canvas]''' which was developed under the name 'Experience Builder' and [https://www.youtube.com/watch?v=9klcnRxoMho featured in DrupalCon Atlanta 2025]

Drupal has the '''[https://www.drupal.org/project/dxpr_theme DXPR Theme]''' which is a Drupal Theme offering a low-code approach based on Bootstrap. The theme can be complemented by [https://www.drupal.org/project/dxpr_cms '''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 '''[https://www.drupal.org/project/dxpr_builder 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 ===

[[File:Screenshot-typical-product-feature-pricing-more.png|thumb|Typical "more features is more money" pricing]]

WordPress has plugins like [https://wordpress.org/plugins/elementor/ '''Elementor''']<ref>see also <nowiki>https://elementor.com/</nowiki></ref> and [https://www.elegantthemes.com/gallery/divi/ '''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<ref>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. </ref>, 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 [https://breakdance.com/ '''Breakdance'''] or Oxygen<ref>For a decent comparison of Divi vs Elementor, see https://www.wpallimport.com/divi-vs-elementor/</ref>. '''[https://oxygenbuilder.com/ 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 ==

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.

~~Cross-CMS terminology~~

{| class="wikitable"

|Term

!'''Term'''

<ref name="z1">https://drupalcloud.mit.edu/help/frequently-asked-questions-about-drupal/what-are-basic-concepts-and-terminology-drupal</ref>

'''<ref name="z1">https://drupalcloud.mit.edu/help/frequently-asked-questions-about-drupal/what-are-basic-concepts-and-terminology-drupal</ref>'''

<ref name="z2">https://wordpress.com/support/wordpress-editor/add-content-blocks/</ref>

<ref name="z3">https://www.cloudaccess.net/joomla-knowledgebase/138-joomla-3-1/getting-started/782-tutorial-9-using-modules-joomla-3-2.html</ref>

<ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref><ref name="z9">https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components</ref>

<ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref>

<ref name="z9">https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components</ref>

<ref name="z10">https://developer.mozilla.org/en-US/docs/Web/HTML</ref>

<ref name="z11">https://marketing-toolbox.dcreate.domains/website-social/understanding-components/</ref>

Line 41:

Line 76:

<ref name="z24">https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html</ref>

<ref name="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref>

|Drupal

!Wiki

|WordPress

!'''Drupal'''

|Joomla

!'''WordPress'''

|Other CMSs

!'''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.

Line 53:

Line 90:

|-

|'''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.

Line 59:

Line 97:

|-

|'''Components'''

|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.

|[https://doc.wikimedia.org/codex/latest/components/overview.html Components] are the interactive building blocks of MediaWiki's '''Codex''' design system built on [https://vuejs.org/ Vue.js] and CSS. [https://doc.wikimedia.org/codex/latest/components/demos/button.html Buttons] are an example of components<ref>Others include Accordion, Breadcrumbs, Card, Dialog, InfoChip, Menu, ProgressBar, SearchInput, Table, Tab, Thumbnail, Tooltip, etc. https://www.mediawiki.org/wiki/Codex/Planned_Components</ref>. The system also offers [https://doc.wikimedia.org/codex/latest/composables/overview.html composables] which encapsulate and reuse stateful logic<ref>https://vuejs.org/guide/reusability/composables.html</ref>.

|While not a core content term, some web publishing teams (like at Harvard) refer to custom blocks based on their design system as "components".

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<ref>https://designsystem.harvardsites.harvard.edu/</ref> for Drupal with the same for WordPress<ref name="z14" />

|While not a core content term, some web publishing teams (like at Harvard<ref name="z14" />) 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<ref>See https://en.wikipedia.org/wiki/HTML_element and the HTML Specification itself https://html.spec.whatwg.org/multipage/index.html</ref> 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 [https://doc.wikimedia.org/codex/latest/design-tokens/definition-and-structure.html token]. Tokens help implement the Codex Design Style Guide across all page components<ref>[https://doc.wikimedia.org/codex/latest/design-tokens/definition-and-structure.html token definition]

[[mediawikiwiki:Codex#Using_design_tokens_directly|Using design tokens directly in MediaWiki]]</ref>.

|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.

Line 71:

Line 114:

|-

|'''Widgets'''

|Functionality provided by the [[mediawikiwiki:Extension:Widgets|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.

Line 76:

Line 120:

|Similar to legacy WordPress, sometimes refers to small blocks of content, often found in sidebars or footers.

|-

|'''Content Types'''

|'''Content Types (or Content Models)'''

|MediaWiki allows for page content types other than built-in support for wikitext<ref>https://www.mediawiki.org/wiki/Manual:Page_content_models</ref>, 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<ref>https://www.mediawiki.org/wiki/Category:ContentHandler_extensions</ref>: [[mediawikiwiki:Extension:IIIF|IIIF]], [[mediawikiwiki:Extension:Scribunto|Scribunto]], [[mediawikiwiki:Extension:WikiMarkdown|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.

Line 94:

Line 140:

<ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref>

<ref name="z5">https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/</ref>

<ref name="z12">https://marcom.wwu.edu/drupal-vocabulary</ref><ref name="z15">https://www.webdevelopmentgroup.com/insights/wordpress-terminology/</ref><ref name="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref>

<ref name="z12">https://marcom.wwu.edu/drupal-vocabulary</ref>

<ref name="z15">https://www.webdevelopmentgroup.com/insights/wordpress-terminology/</ref>

<ref name="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref>

== Personal Notes ==

@@ Line 1: / Line 1: @@
+{{#ev:youtube|jCjaMnxgq2Q||right|river's talk about the wiki.gg IMP (Improved Main Page) framework||t=6022|autoresize}}
 {{Feature
-|description=Page Components is the name I'm using for a visual design system that lets Users easily compose pages with various "blocks" or "elements" on the page. The goal is to describe how to apply industry-norms in [[MediaWiki]] software. MediaWiki is famously not a CMS, but more like a collaborative swiss-army knife complex construction kit. Because the system is virtually unconstrained, we provide opinions on the "best way" when there is TIMTOWTDI.
+|image=Figma.svg
+|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.
+}}
+<!-- {{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}} -->
+{{ambox
+|text=Inspired by [https://www.youtube.com/live/jCjaMnxgq2Q?t=6022 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.
 }}
-{{ambox
+{{messagebox
-|text=Inspired by [https://www.youtube.com/live/jCjaMnxgq2Q?si=inFGxpygdOv8HNMh&t=6022 river's talk about the wiki.gg IMP (Improved Main Page) framework], I finally got around to creating this content.}}
+|text=Draft}}
 In [[Drupal]], [[WordPress]], and other CMSs, the terminology for "page components" varies, but the most common terms are '''Blocks, Modules, Widgets, and Elements'''.
@@ Line 12: / Line 23: @@
 <ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref>
-A modular, component-based design is the modern standard in pretty much every CMS. In WordPress, for example, the newer "block" editor ([https://wordpress.org/gutenberg/ Gutenberg])<ref group="lower-alpha">Of course they 'stole' the [[wp:Gutenberg]] name for their product.</ref> moved from the older system of static content to a modular, block-based approach for building pages. <ref name="z2">https://wordpress.com/support/wordpress-editor/add-content-blocks/</ref><ref name="z5">https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/</ref>
+A modular, component-based design is the modern standard in pretty much every CMS. In WordPress, for example, the newer "block" editor ([https://wordpress.org/gutenberg/ Gutenberg])<ref group="lower-alpha">Of course they 'stole' the [[wp:Gutenberg]] name for their product.</ref> moved from the older system of static content to a modular, block-based approach for building pages.
+<ref name="z2">https://wordpress.com/support/wordpress-editor/add-content-blocks/</ref>
+<ref name="z5">https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/</ref>
 <ref name="z6">https://www.npgroup.net/blog/modular-web-design-the-age-of-templates-is-over/</ref>
 <ref name="z7">https://www.hostinger.in/tutorials/gutenberg-wordpress</ref>
 <ref name="z8">https://wpvip.com/blog/wordpress-block-data/</ref>
+== Solutions ==
+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
+# Creating Pages and Content
+# Building Page Components
+# Managing Site Design
+=== Drupal ===
+Drupal has '''[https://www.drupal.org/project/canvas Canvas]''' which was developed under the name 'Experience Builder' and [https://www.youtube.com/watch?v=9klcnRxoMho featured in DrupalCon Atlanta 2025]
+Drupal has the '''[https://www.drupal.org/project/dxpr_theme DXPR Theme]''' which is a Drupal Theme offering a low-code approach based on Bootstrap. The theme can be complemented by [https://www.drupal.org/project/dxpr_cms '''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 '''[https://www.drupal.org/project/dxpr_builder 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 ===
+[[File:Screenshot-typical-product-feature-pricing-more.png|thumb|Typical "more features is more money" pricing]]
+WordPress has plugins like [https://wordpress.org/plugins/elementor/ '''Elementor''']<ref>see also <nowiki>https://elementor.com/</nowiki></ref> and [https://www.elegantthemes.com/gallery/divi/ '''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<ref>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. </ref>, 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 [https://breakdance.com/ '''Breakdance'''] or Oxygen<ref>For a decent comparison of Divi vs Elementor, see https://www.wpallimport.com/divi-vs-elementor/</ref>. '''[https://oxygenbuilder.com/ 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 ==
+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.
-Cross-CMS terminology
 {| class="wikitable"
-|Term
+!'''Term'''
-<ref name="z1">https://drupalcloud.mit.edu/help/frequently-asked-questions-about-drupal/what-are-basic-concepts-and-terminology-drupal</ref>
+'''<ref name="z1">https://drupalcloud.mit.edu/help/frequently-asked-questions-about-drupal/what-are-basic-concepts-and-terminology-drupal</ref>'''
 <ref name="z2">https://wordpress.com/support/wordpress-editor/add-content-blocks/</ref>
 <ref name="z3">https://www.cloudaccess.net/joomla-knowledgebase/138-joomla-3-1/getting-started/782-tutorial-9-using-modules-joomla-3-2.html</ref>
-<ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref><ref name="z9">https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components</ref>
+<ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref>
+<ref name="z9">https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components</ref>
 <ref name="z10">https://developer.mozilla.org/en-US/docs/Web/HTML</ref>
 <ref name="z11">https://marketing-toolbox.dcreate.domains/website-social/understanding-components/</ref>
@@ Line 41: / Line 76: @@
 <ref name="z24">https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html</ref>
 <ref name="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref>
-|Drupal
+!Wiki
-|WordPress
+!'''Drupal'''
-|Joomla
+!'''WordPress'''
-|Other CMSs
+!'''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.
@@ Line 53: / Line 90: @@
 |-
 |'''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.
@@ Line 59: / Line 97: @@
 |-
 |'''Components'''
-|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.
+|[https://doc.wikimedia.org/codex/latest/components/overview.html Components] are the interactive building blocks of MediaWiki's '''Codex''' design system built on [https://vuejs.org/ Vue.js] and CSS.  [https://doc.wikimedia.org/codex/latest/components/demos/button.html Buttons] are an example of components<ref>Others include Accordion, Breadcrumbs, Card, Dialog, InfoChip, Menu, ProgressBar, SearchInput, Table, Tab, Thumbnail, Tooltip, etc. https://www.mediawiki.org/wiki/Codex/Planned_Components</ref>. The system also offers [https://doc.wikimedia.org/codex/latest/composables/overview.html composables] which encapsulate and reuse stateful logic<ref>https://vuejs.org/guide/reusability/composables.html</ref>.
-|While not a core content term, some web publishing teams (like at Harvard) refer to custom blocks based on their design system as "components".
+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<ref>https://designsystem.harvardsites.harvard.edu/</ref> for Drupal with the same for WordPress<ref name="z14" />
+|While not a core content term, some web publishing teams (like at Harvard<ref name="z14" />) 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<ref>See https://en.wikipedia.org/wiki/HTML_element and the HTML Specification itself https://html.spec.whatwg.org/multipage/index.html</ref> 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 [https://doc.wikimedia.org/codex/latest/design-tokens/definition-and-structure.html token]. Tokens help implement the Codex Design Style Guide across all page components<ref>[https://doc.wikimedia.org/codex/latest/design-tokens/definition-and-structure.html token definition]
+[[mediawikiwiki:Codex#Using_design_tokens_directly|Using design tokens directly in MediaWiki]]</ref>.
 |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.
@@ Line 71: / Line 114: @@
 |-
 |'''Widgets'''
+|Functionality provided by the [[mediawikiwiki:Extension:Widgets|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.
@@ Line 76: / Line 120: @@
 |Similar to legacy WordPress, sometimes refers to small blocks of content, often found in sidebars or footers.
 |-
-|'''Content Types'''
+|'''Content Types (or Content Models)'''
+|MediaWiki allows for page content types other than  built-in support for wikitext<ref>https://www.mediawiki.org/wiki/Manual:Page_content_models</ref>, 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<ref>https://www.mediawiki.org/wiki/Category:ContentHandler_extensions</ref>: [[mediawikiwiki:Extension:IIIF|IIIF]], [[mediawikiwiki:Extension:Scribunto|Scribunto]], [[mediawikiwiki:Extension:WikiMarkdown|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.
@@ Line 94: / Line 140: @@
 <ref name="z4">https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options</ref>
 <ref name="z5">https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/</ref>
-<ref name="z12">https://marcom.wwu.edu/drupal-vocabulary</ref><ref name="z15">https://www.webdevelopmentgroup.com/insights/wordpress-terminology/</ref><ref name="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref>
+<ref name="z12">https://marcom.wwu.edu/drupal-vocabulary</ref>
+<ref name="z15">https://www.webdevelopmentgroup.com/insights/wordpress-terminology/</ref>
+<ref name="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref>
 == Personal Notes ==