From d808d726f4bb33dfc2efdd8a4f25ec01868fdc2b Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <nhcarrigan@gmail.com>
Date: Sat, 14 May 2022 00:17:20 -0700
Subject: [PATCH] fix: add scrollable anchor to grid project block (#45954)

---
 .../Introduction/components/block.tsx         | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/client/src/templates/Introduction/components/block.tsx b/client/src/templates/Introduction/components/block.tsx
index 6715ddb0ff4..f6f6397989c 100644
--- a/client/src/templates/Introduction/components/block.tsx
+++ b/client/src/templates/Introduction/components/block.tsx
@@ -305,32 +305,36 @@ export class Block extends Component<BlockProps> {
     );
 
     const GridProjectBlock = (
-      <div className='block block-grid grid-project-block'>
-        <Link
-          className='block-header'
-          onClick={() => {
-            this.handleBlockClick();
-          }}
-          to={challengesWithCompleted[0].fields.slug}
-        >
-          <div className='tags-wrapper'>
-            <span className='cert-tag'>{t('misc.certification-project')}</span>
-            {!isAuditedCert(curriculumLocale, superBlock) && (
-              <Link
-                className='cert-tag'
-                to={t('links:help-translate-link-url')}
-              >
-                {t('misc.translation-pending')}
-              </Link>
-            )}
-          </div>
-          <div className='title-wrapper map-title'>
-            {this.renderCheckMark(isBlockCompleted)}
-            <h3 className='block-grid-title'>{blockTitle}</h3>
-          </div>
-          {this.renderBlockIntros(blockIntroArr)}
-        </Link>
-      </div>
+      <ScrollableAnchor id={blockDashedName}>
+        <div className='block block-grid grid-project-block'>
+          <Link
+            className='block-header'
+            onClick={() => {
+              this.handleBlockClick();
+            }}
+            to={challengesWithCompleted[0].fields.slug}
+          >
+            <div className='tags-wrapper'>
+              <span className='cert-tag'>
+                {t('misc.certification-project')}
+              </span>
+              {!isAuditedCert(curriculumLocale, superBlock) && (
+                <Link
+                  className='cert-tag'
+                  to={t('links:help-translate-link-url')}
+                >
+                  {t('misc.translation-pending')}
+                </Link>
+              )}
+            </div>
+            <div className='title-wrapper map-title'>
+              {this.renderCheckMark(isBlockCompleted)}
+              <h3 className='block-grid-title'>{blockTitle}</h3>
+            </div>
+            {this.renderBlockIntros(blockIntroArr)}
+          </Link>
+        </div>
+      </ScrollableAnchor>
     );
 
     const blockrenderer = () => {