A Content Creator’s Guide to Document Authoring with Edge Delivery Services. Part 3

Previously…

In Part 2 of the content creator’s guide we covered hero images, preview and publish, and adding navigation elements to a page.

Continuing the tutorial

Here we will examine autoblocking, a special font, fragments, sections, and other Adobe blocks that come out-of-the-box (don't require a developer).

Blocks and autoblocking

Blocks are used to create different styling on a page.

The simpler a page is, the easier it is to create and edit. With only images and text, Edge Delivery Services will use ‘autoblocking’ to understand how you want those elements to appear, and no developer input is required.

With autoblocking, the first image on the page is the hero, the first H1 heading is the title, and bullets are presented as unordered lists.

Autoblocking treats links surrounded by text as links, but if links are on a line by themselves, they are treated as buttons, like this:

Out of the box you get: cards, columns, fragments, and hero. For more on these and other blocks you can add, provided by Adobe, go to Block Collection (aem.live).

You can control every aspect by creating your blocks, with some dev input.

To get variations on the styling for a block, you can put the block into a table and get your developer to set up different classes in the CSS (style guide).

Courier font

Different text fonts are not available out of the box, except for one: Courier New to show code. With this, the text doesn’t wrap, instead, the line returns are fixed. You can scroll sideways, copy the text, and use it as code.

For example, here is the code for the Return to Top box;

blocks/returntotop/returntotop.js

export default async function decorate(block) {
const returnToTopButton = document.querySelector('.returntotop');
window.addEventListener('scroll', () => {
if (window.scrollY > 100) {
returnToTopButton.style.display = 'block';
} else {
returnToTopButton.style.display = 'none';
}
});

// Scroll to top when the button is clicked
returnToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
});
}

blocks/returntotop/returntotop.css

.returntotop {
position: fixed;
bottom: 20px;
left: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
cursor: pointer;
text-align: center;
border-radius: 5px;
text-decoration: none;
font-size: 14px;
display: none;
}

.returntotop:hover {
background-color: #0056b3;
}

Fragments

You may want to repeat a piece of content across several pages. In that case, it’s helpful to be able to change that content once and have the update appear on all pages rather than having to change each one individually. For this, we have ‘fragments’.

You don’t need a developer to do this. First, create the content in your drive, then copy the path (the folder structure in your drive, eg /fragments/ddt/proposition) and put it in a 2-row table such as this:

The content will appear wherever you put this table on a page. To publish changes, update the fragment and publish it.

Sections

Whereas a fragment repeats text on different pages, it will inherit the style of the page.

A section, however, repeats code. It is often used to give a different styling to part of a page.

Anything within two lines of 3 dashes --- will have a different coding.

For instance, out-of-the-box sections will have different styling, or even metadata. This all needs developer input.

In a nutshell, you can build simple pages and get them published quickly and easily with allabout.network using Adobe’s Edge Delivery Services with no dev input.

However, if you want extra styling, once a developer has built blocks for you (and DDT Ltd can do this), it’s easy to build and manage the pages how you want.

You will also see there is a Block Party - free, open-source blocks provided by the developer community - at Block Party (aem.live).

If you’d like to know more about using Edge Delivery Services, read Tom’s

A Developer’s Guide to Document Authoring with Edge Delivery Services and A Manager’s Guide to Document Authoring with Edge Delivery Services