Page components: Difference between revisions

From Freephile Wiki
Browse history interactively
← Older editNewer edit →
VisualWikitext
change table headers to actual headers
fill out new column for MediaWiki and add HTML5 logo image
Line 1: Line 1:
{{Feature
{{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.
|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=HTML5 logo and wordmark.svg
}}
}}


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


 
==  Cross-CMS terminology ==
Cross-CMS terminology  
{| class="wikitable"
{| 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="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="z3">https://www.cloudaccess.net/joomla-knowledgebase/138-joomla-3-1/getting-started/782-tutorial-9-using-modules-joomla-3-2.html</ref>
Line 46: Line 46:
<ref name="z23">https://experienceleague.adobe.com/en/docs/commerce-admin/content-design/elements/blocks/blocks</ref>
<ref name="z23">https://experienceleague.adobe.com/en/docs/commerce-admin/content-design/elements/blocks/blocks</ref>
<ref name="z24">https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html</ref>
<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>'''
<ref name="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref>
!Wiki
!'''Drupal'''
!'''Drupal'''
!'''WordPress'''
!'''WordPress'''
Line 53: Line 54:
|-
|-
|'''Blocks'''
|'''Blocks'''
|
|Blocks are collections of content that can be placed into different "regions" of a page layout.
|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.
|A block is a single piece of content used in the Gutenberg editor, such as a paragraph, image, or button.
Line 59: Line 61:
|-
|-
|'''Modules'''
|'''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.
|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.
|This term is generally associated with plugins and themes in WordPress, not content elements.
Line 65: Line 68:
|-
|-
|'''Components'''
|'''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.
|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.
|Often refers to the building blocks of a page, such as accordions, alerts, and grids.
|-
|-
|'''Elements'''
|'''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 'token'
|The building blocks or fields that make up a content type (such as a title or body).
|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.
|Refers to HTML elements (e.g., heading, paragraph), which are represented as blocks in the Gutenberg editor.
Line 77: Line 83:
|-
|-
|'''Widgets'''
|'''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.
|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.
|Legacy name for small content blocks placed in sidebars or footers. The block editor now handles this functionality more flexibly.
Line 82: Line 89:
|Similar to legacy WordPress, sometimes refers to small blocks of content, often found in sidebars or footers.
|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 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.
|A broader term for content structures like Posts, Pages, or custom post types.

Revision as of 09:45, 14 November 2025


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.

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]

Cross-CMS terminology[edit]

Term

[1] [2] [3] [4] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25]

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

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[28] for Drupal with the same for WordPress[14] While not a core content term, some web publishing teams (like at Harvard[14]) 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[29] 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' 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[30], 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[31]: 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] [12] [15] [25]


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. ↑ https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components
  10. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML
  11. ↑ https://marketing-toolbox.dcreate.domains/website-social/understanding-components/
  12. ↑ 12.0 12.1 https://marcom.wwu.edu/drupal-vocabulary
  13. ↑ https://drupalguide.slac.stanford.edu/organize-and-build/glossary-terms
  14. ↑ 14.0 14.1 14.2 https://wordpress.harvardsites.harvard.edu/blocks-components/
  15. ↑ 15.0 15.1 https://www.webdevelopmentgroup.com/insights/wordpress-terminology/
  16. ↑ https://www.hostinger.com/ph/tutorials/wordpress-blocks
  17. ↑ https://docs.joomla.org/Component
  18. ↑ https://www.joomlacontenteditor.net/support/documentation/editor/editor-format-blocks
  19. ↑ https://www.joomlageek.com/joomla-glossary
  20. ↑ https://www.joomlart.com/documentation/wiki-ja-t3v2-joomla-2-5/developer-guide
  21. ↑ https://docs.joomla.org/Extension_types_(general_definitions)
  22. ↑ https://ostraining.com/blog/magento-blog/blocks-widgets/
  23. ↑ https://experienceleague.adobe.com/en/docs/commerce-admin/content-design/elements/blocks/blocks
  24. ↑ https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html
  25. ↑ 25.0 25.1 https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6
  26. ↑ Others include Accordion, Breadcrumbs, Card, Dialog, InfoChip, Menu, ProgressBar, SearchInput, Table, Tab, Thumbnail, Tooltip, etc. https://www.mediawiki.org/wiki/Codex/Planned_Components
  27. ↑ https://vuejs.org/guide/reusability/composables.html
  28. ↑ https://designsystem.harvardsites.harvard.edu/
  29. ↑ See https://en.wikipedia.org/wiki/HTML_element and the HTML Specification itself https://html.spec.whatwg.org/multipage/index.html
  30. ↑ https://www.mediawiki.org/wiki/Manual:Page_content_models
  31. ↑ https://www.mediawiki.org/wiki/Category:ContentHandler_extensions

There Is More Than One Way To Do It wp:Perl Urban Dictionary Wiktionary:TIMTOWTDI

Cascading Style Sheets = A technology that deals with the presentation of content on the web

Object Oriented User Interface mw:OOUI

HyperText Markup Language = structured text that uses logical links (hyperlinks) between nodes containing text.

JavaScript Object Notation = A data representation format in JavaScript

Retrieved from "https://wiki.freephile.org/wiki/index.php?title=Page_components&oldid=12521"
Powered by QualityBox
Powered by Semantic MediaWiki