Documentation

Block Collection

Last update: Wed May 08 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

This is a collection of blocks considered a part of the AEM product and are recommended as blueprints for blocks in your project.

These blocks come from real production AEM projects. To be a part of this collection, a block needs to have a high use across a number of projects and provide enough abstract functionality and be general enough so it can be reused without having to change the underlying content model.

As the needs and designs of websites change, the block collection will change as well. Additions will be made to reflect emerging needs of projects, but blocks that are not used frequently enough will also be removed (deprecated).

There are few technical principles for the blocks in the collection:

  • Intuitive: Content structure that’s intuitive and easy to author
  • Useable: No dependencies, compatible with boilerplate
  • Responsive: Works across all breakpoints
  • Context Aware: Inherits CSS context such text and background colors
  • Localizable: No hard-coded content
  • Fast: No negative performance impact
  • SEO and A11y: SEO friendly and accessible

All of the blocks can be considered as a basis for your own block development. It is very likely that you will change all the .css and .js code to meet your own project needs. The primary value of these blocks is the content structure they provide.

Considering that the code of your block will be fully adapted to your project, there is no intent for the blocks in the collection to be backwards compatible to their respective older versions or to make them upgradable.

Boilerplate

The most commonly used blocks (as well as default content types) are curated in the AEM Boilerplate and are a part of every AEM project. For a block to become a part of boilerplate it has to be used by the vast majority of all AEM projects.

Headings

Default Content

Different levels of headings provide the semantic backbone of your document

Text

Default Content

Body text or copy with rich semantic formatting options

Images

Default Content

Pictures bring your content alive

Lists

Default Content

Ordered and unordered lists wherever they are needed

Default Content

Reference other websites or your own content

Buttons

Default Content

Call-to-action buttons and more

Code

Default Content

Highlight preformatted code snippets in your content

Sections

Default Content

Group content on your page into sections

Icons

Default Content

Make your content more interesting with icons

Hero

Block

Hero treatment at the top of a page

Columns

Block

Flexible way to handle multi-column layouts in a responsive way

Cards

Block

List of cards with or without images and links

Block

Flexible header and navigation example

Block

Simple extensible footer block

Metadata

Add metadata to your page where needed

Section Metadata

Highlight or structure all the content in a section

Block Collection

The block collection contains blocks that are commonly-used, but are not so common to be considered boilerplate. As a rule-of-thumb, to be included in the block collection a block must be used on more than half of all AEM projects.

The block collection can be the entry path into boilerplate code. Likewise if a block in the boilerplate is no longer used as much, it can be moved to this collection.

Embed

Block

A simple way to embed social media content into AEM pages

Fragment

Block

Share pieces of content across multiple pages

Table

Block

A way to organize tabular data into rows and columns

Video

Block

Display and playback videos directly from AEM

Accordion

Block

A stack of descriptive labels that can be toggled to display related full content

Block Add-on

A list of page titles and relevant links showing the location of the current page in the navigational hierarchy

Block

A dynamic display tool that smoothly transitions through a series of images with optional text content

Form

Block

A set of input controls grouped together that enables users to submit information

Quote

Block

A display of a quotation or a highlight of specific passage (or “pull quotes”) within a document

Block

Allows users to find site content by entering a search term

Tabs

Block

Segment information into multiple labeled (or “tabbed”) panels

Autoblock

A popup that appears over other site content

The block collection is continually evolving based on the feedback from the AEM community. If you think that there is a block that should be included in the block collection please speak to your AEM contact. Current candidates for inclusion in the block collection include:

  • Consent Banner

If you have immediate need of a block that is not yet part of the collection, it is relatively easy to find AEM projects on GitHub that have example implementations for all of the above candidates.

Block Party

With Block Party, we would like to give our passionate developer community a place to showcase what they have built on AEM sites. It also allows others to avoid reinventing the wheel and reuse these blocks / code snippets / integrations built by the community and tweak the code as necessary to fit their own projects.

Note: While we love and support our AEM developer community, Adobe is not responsible for maintaining or updating the code that is showcased in Block Party. Please use the code at your own discretion.

If you are an AEM Developer and would like to submit your cool block / code snippet or integration, please enter your submission using this form.

Code snippet
hannessolo

Preview

Script to add modals to your franklin page. This uses the new(ish) native dialog element.

You can see it in action here:

Code snippet
msagolj

Video autoplay

To autoplay videos across different browsers, a set of attributes need to be set. It is important to set videoTag.muted = true exactly this way otherwise it won't play in chrome. Eg. setAttribute('muted', true) doesn't work.

Sidekick plugin
dylandepass

Sidekick Library

Preview

The Sidekick Library is an extension for the AEM Sidekick that enables developers to create UI-driven tooling for content authors. It includes a built-in blocks plugin that can display a list of all blocks to authors in an intuitive manner, removing the need for authors to remember or search for every variation of a block. Developers can also write their own plugins for the sidekick library.

Code snippet
davidnuescheler

Metatag / JSON based CSP

This approach is setting a CSP in a way that is only transported over the wire once and then cached on the client. Allows to manage the CSP in an easy to read JSON file

Build tooling
sachioross

SASS + AEM

SASS compile for your CSS while locally developing in AEM

Code snippet
Buuhuu

ffetch

ffetch is a small wrapper around the JavaScript fetch function that helps you deal with the AEM Content API when building a composable application. It makes it easy to fetch content from a AEM Index, apply lazy pagination, follow links to pages, and even pull page metadata. With ffetch you get all the ease of creating a headless application without the peformance baggage of headless SDKs and the complexity of headless APIs.

Code snippet
shsteimer

Dynamically loaded Templates

Load CSS and JS specific to a template, allowing for template specific styling and auto-blocking, without intermingling that code into global scripts/styles.

Note: because the template js is loaded before blocks are loaded, but after sections/blocks are decorated, auto blocking needs to be done with that in mind (that is, build and decorate your blocks, and add them to a section, but do not load them).

Code snippet
fkakatie

Preview

This snippet adds ihyperlinks to images. In order to use it, refer the linked code snippet. And while authoring in Wod/GDoc, specify the link url immediately after the image.

Block
jalagari

Form Block

Preview

Form Block with various capabilities

  • Google Recaptcha Integration
  • Attachment Support in Forms.
  • Post Processing
    • Email Notification
    • Sync Data to Marketo or Salesforce.

Block
niekraaijmakers

Tabs

Preview

Tabs block based on sections that are auto-blocked in scripts.js Supports "nesting" blocks in the tab block as well as section metadata such as styles.

Tab block logic controlled partially by css

Block
dave-fink

Image-Compare

Preview

This is a simple content block to compare two images with a slider to show or hide the left or right image.

Block
shsteimer

Creates a breadcrumb nav based on page titles of parent pages

Code snippet
andreituicu

DOM Helpers (React JSX-Like)

Preview

Dom Helpers inspired by React JSX to make the AEM JS code more concise, easier to write, understand and review. DOM like syntax structure to easily visualise the resulting HTML when looking at the code using 100% vanilla JS with no compilation or external dependencies required. Minimal overhead (a few ifs and function calls) allowing you to maintain 100 LHS and avoid the pitfalls of using string templates to DOM manipulation. Can be used both for rendering dynamic data from sheets or with data coming from word documents.

Sidekick plugin
herzog31

Block and Section Scheduling

Preview

This code lets you schedule blocks or sections. Simply add a date or date range as row to your block or section metadata table and your content will only be displayed after the date or within the range.

This comes with a Sidekick extension, which allows to you preview past or future content.

Not suitable for confidential data, since the scheduled content will still be in the DOM.

Other
bosschaert

docxtools: work with multiple .docx files from the command-line linux-style

This command-line tool allows you to perform tasks on a directory tree of .docx files a bit like you could with the linux 'grep' or 'sed' commands. Currently supported are: * cat - output text content of docx file to console * grep - search for a regex in the document text * replace/replace-link search and replace text or hyperlinks inside the word .docx files Note: the tool is written in Rust and the releases provide platform-specific executables. If you need a different platform ping the David B or contribute a PR.

Other
synox

RSS Feed generator Github Workflow

Preview

This Github Workflow updates the RSS feed XML every time a new page is published. Workflow:

Scripts:

Code snippet
ramboz

Creating Icon Sprite

Preview

A mechanism to inline SVG icons directly in the document so that the icons can directly be styled from the CSS (size, color, etc.)

Other
vtsaplin

AEM Expressions

Preview

AEM Expressions allow users to transform AEM documents into templates by adding simple expressions with parameters. These expressions then become HTML elements that display dynamically fetched content. It is also possible to use expressions as decorators to style and augment content around the insertion point. This turns expressions into reusable fragments that can be placed inside top level AEM blocks.

Code snippet
sdmcraft

External Images

Preview

This code snippet demonstrates a mechanism for using images on an AEM AEM web page that are fetched from an external system (outside of AEM AEM)

Other
synox

Recursively replaces outdated links in Word documents with new links based on an Excel sheet with the mapping, usually the redirects.xlsx.

Other
sdmcraft

Visual Comparison Tool for webpages

Preview

This is a visual comparison tool for comparing webpages. Oftentimes while working on styling changes for a site, we want to assess the impact of that change throughout the site. Doing this manually for all the pages is a tedious process. With this tool, this task is automated to a considerable extent. Once the branch reference and the list of URLs is provided to it for visually testing, it goes through all the URLs on the "main" and "test" branches and loads them in a Playwright based headless browser, takes screenshots and records the differences. The tool informs the user about the differences and provides location of the screenshots where the differences can be reviewed.

Other
amol-anand

Log Viewer

Preview

Easy way to view logs for your AEM Edge Delivery project

Sidekick plugin
usman-khalid

Accessibility Mode

Preview

This plugin adds a button in the sidekick to enable "Accessibility Mode" on a given Franklin page, which audits the page from a content perspective and reports on things like missing alt text on images, ease of readability and other accessibility items.

It is also extendable to create custom checks, which can be used to promote correct block usage and adhering to style guidelines, for example. There is an example of this in the repo which checks for too many instances of a block on a page and reports on it.

It can be used by content authors to view the page and address any content or accessibility related issues as a preflight check before publishing.

Sidekick plugin
shsteimer

References Check

Finds the references used by a page (forms, fragments, links, etc.) and gives authors one-click access to view and edit them. Can also check for incoming references.

recommendation-more-help
10a6ce9d-c5c5-48d9-8ce1-9797d2f0f3ec