EDS release March 30th, 2026

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

CHANGELOG.md

@@ -0,0 +1,53 @@
+# EDS Release Notes
+
+Source: [PR #579 — EDS release March 30th, 2026](https://github.com/AdobeDocs/adp-devsite/pull/579) (`stage` → `main`).
+
+## 3/30/26 EDS Release:
+
+- GetCredential Fixes:
+
+  - **Fix:** credential design issue
+
+  - **Fix:** sign-in component problem
+
+  - **Fix:** component loading issue
+
+  - **Fix:** populate `templateData.apis` from the template response before credential creation (template install / license configuration)
+
+    - `fetchTemplateEntitlement()` loads the full template, including APIs with `licenseConfigs`, but that data was not always stored on `templateData`, leaving `templateData.apis` undefined.
+    - The `/install` endpoint could receive an empty `apis` array and fail with errors such as “Service CJA SDK requires selection of a product”.
+    - Ensures `fetchTemplateEntitlement()` runs in the relevant auth flows so API data is available, and maps only the required `licenseConfig` fields (`id`, `productId`, `op`) in the install request payload.
+
+- **Fix:** “On this page” styles
+
+- Data Playground Fixes:
+
+  - **Fix:** code playground metadata and script updates
+
+    - [DEVSITE-2304](https://jira.corp.adobe.com/browse/DEVSITE-2304)
+
+- **Fix:** dropdown width, selector, and description max width
+
+  - [DEVSITE-2295](https://jira.corp.adobe.com/browse/DEVSITE-2295), [DEVSITE-2305](https://jira.corp.adobe.com/browse/DEVSITE-2305)
+
+- **Feat:** enforce Node 24+ via `.npmrc` and the `engines` field
+
+  - [DEVSITE-2296](https://jira.corp.adobe.com/browse/DEVSITE-2296)
+
+- **Fix:** reverse image and text order in columns
+
+  - [DEVSITE-2301](https://jira.corp.adobe.com/browse/DEVSITE-2301), [DEVSITE-2303](https://jira.corp.adobe.com/browse/DEVSITE-2303)
+
+- **Fix:** rename `B_app_PremierePro.svg` to `premierepro.svg`
+
+- Embed and media fixes:
+
+  - **Fix:** embed layout and related design issues
+
+    - [DEVSITE-2276](https://jira.corp.adobe.com/browse/DEVSITE-2276), [DEVSITE-2303](https://jira.corp.adobe.com/browse/DEVSITE-2303)
+
+  - **Fix:** video layout (including extra letterboxing) and shorts vs video behavior
+
+    - [DEVSITE-2276](https://jira.corp.adobe.com/browse/DEVSITE-2276), [DEVSITE-2303](https://jira.corp.adobe.com/browse/DEVSITE-2303)
+
+  - **Fix:** remove stray console logging in embed/video paths

hlx_statics/blocks/columns/columns.css

@@ -28,6 +28,14 @@ main div.columns-wrapper  div.columns > div:nth-child(even) {
     flex-direction: row-reverse;
 }
 
+main div.columns-wrapper  div.columns.isReversed > div:nth-child(odd) {
+    flex-direction: row-reverse;
+}
+
+main div.columns-wrapper  div.columns.isReversed > div:nth-child(even) {
+    flex-direction: row;
+}
+
 main div.columns-wrapper .checkmark ul {
     list-style: none;
     font-size: 16px;

hlx_statics/blocks/columns/columns.js

@@ -33,6 +33,8 @@ function processImages(block) {
 export default async function decorate(block) {
   const container = getBlockSectionContainer(block);
   const variant = block.getAttribute('data-variant')
+  const isReversed = block.getAttribute('data-isreversed') === 'true';
+  isReversed && block.classList.add('isReversed');
   const isDocs = IS_DEV_DOCS;
 
   isDocs && block.classList.add('isDocs')

hlx_statics/blocks/embed/embed.css

@@ -2,6 +2,21 @@ main div.embed-wrapper:has(.embed.background-color-white) {
   background-color: white;
 }
 
+main div.embed-wrapper .ytShort {
+  position: relative;
+  width: 315px;
+  height: 560px;
+  aspect-ratio: 9 / 16;
+  margin: 0 auto;
+}
+
+@media screen and (max-width: 700px) {
+  main div.embed-wrapper .ytShort {
+    width: 100%;
+    max-width: 315px;
+  }
+}
+
 main div.embed-wrapper {
   align-items: center;
   justify-content: center;

hlx_statics/blocks/embed/embed.js

@@ -40,15 +40,15 @@ return embedHTML;
 
 const embedYTShort = (url, loop, controls, vidTitle) => {
   const [, videoCode] = url.pathname.split('/shorts/');
- return  `
- <div style="width: 75vw; height: 40vh; position: relative; padding-bottom: 56.25%;">
+  return `<div class="ytShort">
   <iframe 
-    src="https://www.youtube.com/embed/${videoCode}/?playlist=${videoCode}&loop=${loop}&controls=${controls}"
-    ${vidTitle ? `title=${vidTitle}` : `title="Content from" ${url.hostname}`}
-    frameborder="0"
-    loading="lazy"
+    src="https://www.youtube.com/embed/${videoCode}?rel=0&modestbranding=1&loop=${loop}&controls=${controls}"
+    style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute; border-radius: 10px;"
     allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    allowfullscreen></iframe>
+    allowfullscreen
+    ${vidTitle ? `title="${vidTitle}"` : `title="Content from YouTube"`}
+    loading="lazy">
+  </iframe>
 </div>`;
 };
 
@@ -82,7 +82,7 @@ const embedTikTok = (url, loop, controls, vidTitle) => {
   </div>`;
 }
 
-const embedYoutube = (url, loop, controls, vidTitle) => {
+const embedYoutube = (url, loop, controls, vidTitle, isShort) => {
   let vid;
   const embed = url.pathname;
 
@@ -100,6 +100,19 @@ const embedYoutube = (url, loop, controls, vidTitle) => {
   if (embed.includes('playlist')) {
     return embedYTPlaylist(url, loop, controls, vidTitle);
   }
+  if (isShort && vid) { 
+
+    return `<div class="ytShort">
+      <iframe 
+        src="https://www.youtube.com/embed/${vid}?rel=0&modestbranding=1&loop=${loop}&controls=${controls}"
+        style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute; border-radius: 10px;"
+        allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+        ${vidTitle ? `title="${vidTitle}"` : `title="Content from YouTube"`}
+        loading="lazy">
+      </iframe>
+    </div>`;
+  }
 
   if (vid) {
     return `
@@ -173,7 +186,8 @@ const loadEmbed = (block, link) => {
   let controls = 1;
   const attrs = block?.parentElement?.parentElement?.attributes;
   const vidTitle = attrs?.getNamedItem('data-videotitle')?.value;
-  // changes the values of these attributes based on section metadata
+  const isShort = block.getAttribute('data-short')?.toLowerCase() == 'true';
+  // changes the values of these attributes based on section metadata 
   if (attrs?.getNamedItem('data-loop'))
   {
     loop = (attrs.getNamedItem('data-loop').value.toLowerCase()  === 'true') ? 1: 0;
@@ -184,7 +198,7 @@ const loadEmbed = (block, link) => {
   }
   const url = new URL(link);
   if (config) {
-    block.innerHTML = config.embed(url, loop, controls, vidTitle);
+    block.innerHTML = config.embed(url, loop, controls, vidTitle, isShort);
     block.classList.add('block', 'embed', `embed-${config.match[0]}`);
   } else {
     block.innerHTML = getDefaultEmbed(url);

hlx_statics/blocks/getcredential/getcredential.css

@@ -207,14 +207,12 @@
 }
 
 .credential-form {
-  flex: 1;
-  width: 40%;
+  width: 100%;
   max-width: 600px;
 }
 
 .return-left-content,
 .return-right-content,
-.card-content,
 .project-title-group {
   flex: 1;
 }
@@ -944,6 +942,7 @@
 
 .card-content {
   gap: 0;
+  width: 100%;
   max-width: 560px;
 }