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 drafting this initiative. The goal is to create a reference, or even an installable system for third-party wikis to be able to equip their authors and content creators with the best tools, guidelines and components for creating said content. If MediaWiki is the platform, and a full set of curated extensions (plus attendant microservices) creates an even more powerful platform, you still end up with an unfurnished mansion on day one (launch). To develop such a system we 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> == Context == 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 frame the discussion of what could be possible for MediaWiki in terms of # Creating Pages and Content # Building Page Components # Managing Site Design If you want, you can [[Page components/about|skip all the context and just dive into solutions for MediaWiki]] === Drupal === Drupal has '''[https://www.drupal.org/project/canvas Canvas]''', released on Dec. 4 2025<ref>https://dri.es/drupal-canvas-1-0-released</ref><ref>https://www.reddit.com/r/drupal/comments/1pecsf8/drupal_canvas_is_now_available_inside_drupals_new/</ref>, which was developed under the name 'Experience Builder' but due to a threat of a lawsuit the name was changed to Canvas. It was [https://www.youtube.com/watch?v=9klcnRxoMho featured in DrupalCon Atlanta 2025] Canvas does not come with a component library, it is just the builder. If you want to use Canvas, you may want to also start with the [https://new.drupal.org/drupal-cms Drupal CMS]<ref>https://dri.es/drupal-cms-1-released</ref> rather than Drupal Core. 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-platform 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 discuss the topic with different people, different product communities do not use the same terminology. In fact, sometimes a term can mean quite the opposite in different communities. A MediaWiki '''template''' is totally not what you might be accustomed to from the CMS definition<ref name="z6"></ref>. 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 attempt to 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''' |The term 'module' is most often referring to a Lua script that provides functionality to the User Interface in combination with Templates. The ''concept'' of a Drupal Module or WordPress Plugin is an Extension. |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
