Page components: Difference between revisions

(4 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

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

~~|image=HTML5 logo and wordmark.svg~~

}}

{{ambox

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

Line 28:

Line 29:

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

Line 120:

Line 143:

<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
+|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.
-|image=HTML5 logo and wordmark.svg
 }}
+<!-- {{#ev:service|id|dimensions|alignment|description|container|urlargs|autoresize|valignment}} -->
 {{ambox
-|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=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.
@@ Line 28: / Line 29: @@
 <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'''
@@ Line 120: / Line 143: @@
 <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 ==