You do not have permission to edit this page, for the following reason:
Free text:
{{#ev:youtube|jCjaMnxgq2Q||right|river's talk about the wiki.gg IMP (Improved Main Page) framework||t=6022|autoresize}} <!-- {{#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. }} {{messagebox |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'''. <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> 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. {| class="wikitable" !'''Term''' '''<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="z10">https://developer.mozilla.org/en-US/docs/Web/HTML</ref> <ref name="z11">https://marketing-toolbox.dcreate.domains/website-social/understanding-components/</ref> <ref name="z12">https://marcom.wwu.edu/drupal-vocabulary</ref> <ref name="z13">https://drupalguide.slac.stanford.edu/organize-and-build/glossary-terms</ref> <ref name="z14">https://wordpress.harvardsites.harvard.edu/blocks-components/</ref> <ref name="z15">https://www.webdevelopmentgroup.com/insights/wordpress-terminology/</ref> <ref name="z16">https://www.hostinger.com/ph/tutorials/wordpress-blocks</ref> <ref name="z17">https://docs.joomla.org/Component</ref> <ref name="z18">https://www.joomlacontenteditor.net/support/documentation/editor/editor-format-blocks</ref> <ref name="z19">https://www.joomlageek.com/joomla-glossary</ref> <ref name="z20">https://www.joomlart.com/documentation/wiki-ja-t3v2-joomla-2-5/developer-guide</ref> <ref name="z21">https://docs.joomla.org/Extension_types_(general_definitions)</ref> <ref name="z22">https://ostraining.com/blog/magento-blog/blocks-widgets/</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="z25">https://stackoverflow.com/questions/76098702/custom-fields-for-custom-block-in-shopware-6</ref> !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''' |[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>. 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. |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 [[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. |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<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. |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. <ref name="z1">https://drupalcloud.mit.edu/help/frequently-asked-questions-about-drupal/what-are-basic-concepts-and-terminology-drupal</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="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> == Personal Notes == <references group="lower-alpha"/> {{References}}
Save page Show preview Show changes Cancel
