Page components
| 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. |
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]
- ↑ Of course they 'stole' the wp:Gutenberg name for their product.
References[edit]
- ↑ 1.0 1.1 1.2 https://drupalcloud.mit.edu/help/frequently-asked-questions-about-drupal/what-are-basic-concepts-and-terminology-drupal
- ↑ 2.0 2.1 2.2 https://wordpress.com/support/wordpress-editor/add-content-blocks/
- ↑ 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.0 4.1 4.2 https://ninja-army.hashnode.dev/shopware-6-cms-elements-hidden-options
- ↑ 5.0 5.1 https://learn.wordpress.org/lesson/overview-of-wordpress-block-theme-terms-and-hierarchy/
- ↑ https://www.npgroup.net/blog/modular-web-design-the-age-of-templates-is-over/
- ↑ https://www.hostinger.in/tutorials/gutenberg-wordpress
- ↑ https://wpvip.com/blog/wordpress-block-data/
- ↑ https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components
- ↑ https://developer.mozilla.org/en-US/docs/Web/HTML
- ↑ https://marketing-toolbox.dcreate.domains/website-social/understanding-components/
- ↑ 12.0 12.1 https://marcom.wwu.edu/drupal-vocabulary
- ↑ https://drupalguide.slac.stanford.edu/organize-and-build/glossary-terms
- ↑ 14.0 14.1 14.2 https://wordpress.harvardsites.harvard.edu/blocks-components/
- ↑ 15.0 15.1 https://www.webdevelopmentgroup.com/insights/wordpress-terminology/
- ↑ https://www.hostinger.com/ph/tutorials/wordpress-blocks
- ↑ https://docs.joomla.org/Component
- ↑ https://www.joomlacontenteditor.net/support/documentation/editor/editor-format-blocks
- ↑ https://www.joomlageek.com/joomla-glossary
- ↑ https://www.joomlart.com/documentation/wiki-ja-t3v2-joomla-2-5/developer-guide
- ↑ https://docs.joomla.org/Extension_types_(general_definitions)
- ↑ https://ostraining.com/blog/magento-blog/blocks-widgets/
- ↑ https://experienceleague.adobe.com/en/docs/commerce-admin/content-design/elements/blocks/blocks
- ↑ https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block.html
- ↑ 25.0 25.1 https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6
- ↑ Others include Accordion, Breadcrumbs, Card, Dialog, InfoChip, Menu, ProgressBar, SearchInput, Table, Tab, Thumbnail, Tooltip, etc. https://www.mediawiki.org/wiki/Codex/Planned_Components
- ↑ https://vuejs.org/guide/reusability/composables.html
- ↑ https://designsystem.harvardsites.harvard.edu/
- ↑ See https://en.wikipedia.org/wiki/HTML_element and the HTML Specification itself https://html.spec.whatwg.org/multipage/index.html
- ↑ https://www.mediawiki.org/wiki/Manual:Page_content_models
- ↑ https://www.mediawiki.org/wiki/Category:ContentHandler_extensions
