Template X

express/blocks/browse-by-category/browse-by-category.css

@@ -4,25 +4,25 @@
   margin: auto;
 }
 
-.browse-by-category {
+main .browse-by-category {
   max-width: max-content;
 }
 
-.browse-by-category .carousel-container .carousel-platform {
+main .browse-by-category .carousel-container .carousel-platform {
   align-items: start;
 }
 
-.browse-by-category.card .carousel-container .carousel-platform {
+main .browse-by-category.card .carousel-container .carousel-platform {
   gap: 14px;
   margin: 6px 0 0 0;
 }
 
-.browse-by-category .carousel-container .button.carousel-arrow {
+main .browse-by-category .carousel-container .button.carousel-arrow {
   position: absolute;
   top: 46px;
 }
 
-.browse-by-category .browse-by-category-heading-section {
+main .browse-by-category .browse-by-category-heading-section {
   display: flex;
   justify-content: space-between;
   flex-direction: column;
@@ -31,25 +31,25 @@
   margin-bottom: 10px;
 }
 
-.browse-by-category .browse-by-category-heading-section .browse-by-category-heading {
+main .browse-by-category .browse-by-category-heading-section .browse-by-category-heading {
   text-align: left;
   font-size: 28px;
   line-height: 30px;
 }
 
-.browse-by-category .browse-by-category-sub-heading {
+main .browse-by-category .browse-by-category-sub-heading {
   text-align: left;
   font-size: 16px;
   line-height: 30px;
   padding-top: 5px;
   padding-left: 2px;
 }
 
-.browse-by-category .browse-by-category-heading-section .browse-by-category-link-wrapper {
+main .browse-by-category .browse-by-category-heading-section .browse-by-category-link-wrapper {
   margin: 8px 0 0;
 }
 
-.browse-by-category .browse-by-category-link {
+main .browse-by-category .browse-by-category-link {
   font-size: 16px;
   line-height: 22px;
   display: flex;
@@ -58,7 +58,7 @@
   width: max-content;
 }
 
-.browse-by-category .browse-by-category-link::after {
+main .browse-by-category .browse-by-category-link::after {
   display: flex;
   width: 6px;
   height: 6px;
@@ -76,7 +76,7 @@
   margin-right: 2.25px;
 }
 
-.browse-by-category:not(.card) .browse-by-category-card {
+main .browse-by-category:not(.card) .browse-by-category-card {
   position: relative;
   display: flex;
   gap: 8px;
@@ -87,27 +87,27 @@
   padding: 10px 8px 0 8px;
 }
 
-.browse-by-category.card .browse-by-category-card {
+main .browse-by-category.card .browse-by-category-card {
   position: relative;
   display: flex;
   flex-direction: column;
 }
 
-.browse-by-category .browse-by-category-card-link {
+main .browse-by-category .browse-by-category-card-link {
   position: absolute;
   height: 100%;
   width: 100%;
 }
 
-.browse-by-category:not(.card) .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img {
+main .browse-by-category:not(.card) .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img {
   transform: scale(1.1) matrix(1, -0.07, 0.05, 1, 0, 0);
 }
 
-.browse-by-category.card .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img {
+main .browse-by-category.card .browse-by-category-card-link:hover ~ .browse-by-category-image-wrapper img {
   transform: scale(1.1) matrix(1, -0.01, 0.01, 1, 0, 0);
 }
 
-.browse-by-category .browse-by-category-image-wrapper {
+main .browse-by-category .browse-by-category-image-wrapper {
   background-color: var(--color-gray-200);
   min-height: 90px;
   width: 148px;
@@ -118,7 +118,7 @@
   pointer-events: none;
 }
 
-.browse-by-category:not(.card) .browse-by-category-image-wrapper img {
+main .browse-by-category:not(.card) .browse-by-category-image-wrapper img {
   display: block;
   object-fit: cover;
   width: 80px;
@@ -130,7 +130,7 @@
   transition: transform 0.2s ease-in-out;
 }
 
-.browse-by-category .browse-by-category-image-wrapper .browse-by-category-image-shadow {
+main .browse-by-category .browse-by-category-image-wrapper .browse-by-category-image-shadow {
   position: absolute;
   width: 76px;
   height: 76px;
@@ -140,7 +140,7 @@
   opacity: 1;
 }
 
-.browse-by-category.card .browse-by-category-image-shadow-wrapper {
+main .browse-by-category.card .browse-by-category-image-shadow-wrapper {
   display: block;
   object-fit: cover;
   transform: matrix(1, -0.07, 0.07, 1, 0, 0);
@@ -150,7 +150,7 @@
   transition: transform 0.2s ease-in-out;
 }
 
-.browse-by-category.card .browse-by-category-image-wrapper {
+main .browse-by-category.card .browse-by-category-image-wrapper {
   background-color: #f8f8f8;
   min-height: 90px;
   height: 116px;
@@ -162,7 +162,7 @@
   pointer-events: none;
 }
 
-.browse-by-category.card .browse-by-category-image-wrapper img {
+main .browse-by-category.card .browse-by-category-image-wrapper img {
   display: block;
   object-fit: contain;
   max-width: 110px;
@@ -174,23 +174,23 @@
   transition: transform 0.2s ease-in-out;
 }
 
-.browse-by-category.card .browse-by-category-image-wrapper .browse-by-category-image-shadow {
+main .browse-by-category.card .browse-by-category-image-wrapper .browse-by-category-image-shadow {
   position: absolute;
   width: 100%;
   height: 100%;
   transform: matrix(0.90, -0.18, 0.20, 0.90, -14, 0);
   background: #d6d6d6e5;
 }
 
-.browse-by-category:not(.card) .browse-by-category-card-title {
+main .browse-by-category:not(.card) .browse-by-category-card-title {
   margin: 0;
   font-size: 18px;
   line-height: 24px;
   font-weight: 700;
   max-width: 148px;
 }
 
-.browse-by-category.card .browse-by-category-card-title {
+main .browse-by-category.card .browse-by-category-card-title {
   margin: 6px 0;
   font-size: 16px;
   line-height: 24px;
@@ -199,7 +199,7 @@
 }
 
 @media (min-width: 900px) {
-  .browse-by-category .browse-by-category-heading-section {
+  main .browse-by-category .browse-by-category-heading-section {
     flex-direction: row;
     padding: 0 0 0 20px;
   }

express/blocks/browse-by-category/browse-by-category.js

@@ -21,8 +21,14 @@ export function decorateHeading(block, payload) {
     viewAllButton.textContent = payload.viewAllLink.text;
     viewAllButtonWrapper.append(viewAllButton);
   }
-
-  heading.textContent = payload.heading;
+  if (payload.heading === 'null'
+    || payload.heading === ''
+    || payload.heading === 'undefined'
+    || payload.heading === null) {
+    heading.textContent = '';
+  } else {
+    heading.textContent = payload?.heading;
+  }
   headingSection.append(heading);
   const headingContainer = createTag('div');
   headingContainer.append(heading);
@@ -45,6 +51,7 @@ export function decorateCategories(block, payload) {
     const categoryAnchor = createTag('a', { class: 'browse-by-category-card-link' });
 
     categoryTitle.textContent = categoryCard.text;
+
     categoryAnchor.title = categoryCard.text;
     categoryAnchor.href = categoryCard.link;
     categoryImageShadowWrapper.append(categoryImageShadow, categoryImage);

express/blocks/long-text/long-text.css

@@ -0,0 +1,81 @@
+/* to remove after wrapper deprecation */
+main .section div.long-text-wrapper {
+    max-width: none;
+    padding: 0;
+}
+
+main .section div.long-text-wrapper.plain {
+    max-width: 1200px;
+}
+
+main .long-text {
+    margin: 0 28px;
+    padding: 28px;
+    background-color: var(--color-gray-100);
+    border-radius: 20px;
+}
+
+main .long-text.plain {
+    margin: unset;
+    background-color: initial;
+    border-radius: unset;
+}
+
+main .long-text * {
+    text-align: left;
+}
+
+main .long-text.center * {
+    text-align: center;
+}
+
+main .long-text h2 {
+    font-size: var(--heading-font-size-l);
+}
+
+main .long-text.plain h1 {
+    font-size: var(--heading-font-size-l);
+    margin-bottom: 40px;
+}
+
+main .long-text.plain h2 {
+    font-size: var(--heading-font-size-m);
+    margin-bottom: 24px;
+}
+
+main .long-text.plain h3 {
+    font-size: var(--heading-font-size-s);
+    margin-bottom: 16px;
+}
+
+main .long-text p {
+    font-size: var(--body-font-size-s);
+}
+
+main .long-text.plain p {
+    margin-top: 0;
+    margin-bottom: 80px;
+    font-size: var(--body-font-size-l);
+}
+
+@media (min-width: 900px) {
+    main .long-text:not(.plain) {
+        margin: 0 60px;
+        padding: 28px;
+    }
+
+    main .long-text.plain h1 {
+        font-size: var(--heading-font-size-xl);
+        margin-bottom: 40px;
+    }
+
+    main .long-text.plain h2 {
+        font-size: var(--heading-font-size-l);
+        margin-bottom: 24px;
+    }
+
+    main .long-text.plain h3 {
+        font-size: var(--heading-font-size-s);
+        margin-bottom: 16px;
+    }
+}

express/blocks/long-text/long-text.js

@@ -0,0 +1,23 @@
+import { addTempWrapperDeprecated } from '../../scripts/utils/decorate.js';
+
+export default function decorate(block) {
+  if (!block.parentElement.classList.contains('long-text-wrapper')) {
+    addTempWrapperDeprecated(block, 'long-text');
+  }
+
+  if (block.classList.contains('plain')) {
+    block.parentElement.classList.add('plain');
+  }
+
+  if (block.textContent.trim() === '') {
+    if (block.parentElement.classList.contains('long-text-wrapper')) {
+      block.parentElement.remove();
+    } else {
+      block.remove();
+    }
+  }
+  if (block.querySelector('p').textContent === 'null'
+  || block.querySelector('p').textContent === null) {
+    block.querySelector('p').remove();
+  }
+}

express/blocks/search-marquee/search-marquee.css

@@ -21,6 +21,11 @@
     flex-direction: column;
     align-items: center;
 }
+.search-marquee .express-logo {
+  width: unset;
+  height: 30px;
+  padding-bottom: 8px;
+}
 
 .search-marquee .express-logo {
     width: unset;
@@ -35,6 +40,8 @@
 .search-marquee > div:first-of-type p {
     font-size: var(--body-font-size-m);
     max-width: 640px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .search-marquee .search-marquee-bg {

express/blocks/search-marquee/search-marquee.js

@@ -2,10 +2,10 @@ import { getLibs } from '../../scripts/utils.js';
 import { decorateButtonsDeprecated, addTempWrapperDeprecated } from '../../scripts/utils/decorate.js';
 import { getIconElementDeprecated } from '../../scripts/utils/icons.js';
 import { buildFreePlanWidget } from '../../scripts/widgets/free-plan.js';
-import { trackSearch, updateImpressionCache } from '../../template-x/template-search-api-v3.js';
 import buildCarousel from '../../scripts/widgets/carousel.js';
 import fetchAllTemplatesMetadata from '../../scripts/utils/all-templates-metadata.js';
 import BlockMediator from '../../scripts/block-mediator.min.js';
+import { trackSearch, updateImpressionCache } from '../../template-x/template-search-api-v3.js';
 
 const imports = await Promise.all([import(`${getLibs()}/features/placeholders.js`), import(`${getLibs()}/utils/utils.js`)]);
 const { replaceKey } = imports[0];
@@ -154,12 +154,16 @@ function initSearchFunction(block) {
       const searchUrlTemplate = `/express/templates/search?tasks=${currentTasks.xCore}&tasksx=${currentTasks.content}&phformat=${format}&topics=${searchInput || "''"}&q=${searchBar.value || "''"}&searchId=${searchId || ''}`;
       targetLocation = `${window.location.origin}${prefix}${searchUrlTemplate}`;
     }
-
     window.location.assign(targetLocation);
   };
 
   const onSearchSubmit = async () => {
+    const { sampleRUM } = await import(`${getLibs()}/utils/samplerum.js`);
     searchBar.disabled = true;
+    sampleRUM('search', {
+      source: block.dataset.blockName,
+      target: searchBar.value,
+    }, 1);
     await redirectSearch();
   };
 
@@ -235,7 +239,6 @@ function initSearchFunction(block) {
 
         suggestionsList.append(li);
       });
-
       const suggestListString = suggestions.map((s) => s.query).join(',');
       updateImpressionCache({
         prefix_query: searchBarVal,
@@ -382,6 +385,8 @@ export default async function decorate(block) {
   if (['on', 'yes'].includes(getMetadata('marquee-inject-logo')?.toLowerCase())) {
     const logo = getIconElementDeprecated('adobe-express-logo');
     logo.classList.add('express-logo');
+    logo.width = 164;
+    logo.height = 38;
     block.prepend(logo);
   }
   await decorateSearchFunctions(block);