Page components: Difference between revisions

Line 2:

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

}}

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>

Cross-CMS terminology

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

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

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

|While not a core content term, some web publishing teams (like at Harvard) 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'''

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

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

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

<ref name="z9">https://www.drupal.org/docs/develop/theming-drupal/using-single-directory-components/about-single-directory-components</ref>