From 444f4c6cb8253d3bd9d572d4532f43315906fb63 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 16 Aug 2022 12:27:55 +0530
Subject: [PATCH 1/2] Add ripple span

---
 .../blocks/common-posts-list/components/card-actions.js         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-actions.js b/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-actions.js
index b7c25c7f8..d0208c20f 100644
--- a/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-actions.js
+++ b/plugin/assets/src/block-editor/blocks/common-posts-list/components/card-actions.js
@@ -29,6 +29,7 @@ const CardActions = ( { displayPostAuthor, displayCommentsCount, post } ) => (
 		<div className="mdc-card__action-buttons">
 			{ displayPostAuthor && (
 				<button className="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author">
+					<span className="mdc-button__ripple"></span>
 					<i
 						className="material-icons mdc-button__icon"
 						aria-hidden="true"
@@ -43,6 +44,7 @@ const CardActions = ( { displayPostAuthor, displayCommentsCount, post } ) => (
 			{ displayCommentsCount && (
 				<>
 					<button className="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count">
+						<span className="mdc-button__ripple"></span>
 						<i
 							className="material-icons mdc-button__icon"
 							aria-hidden="true"

From e3d40c5dbda66711b8ccb70010fd8f9cf6be62c2 Mon Sep 17 00:00:00 2001
From: Utkarsh Patel <itismeutkarsh@gmail.com>
Date: Tue, 16 Aug 2022 12:29:54 +0530
Subject: [PATCH 2/2] Update snap

---
 .../edit-with-select.test.js.snap             |  24 ++++
 .../__snapshots__/edit.test.js.snap           |  24 ++++
 .../__snapshots__/card-actions.test.js.snap   |  48 ++++++++
 .../horizontal-card-layout.test.js.snap       |  48 ++++++++
 .../__snapshots__/posts-list.test.js.snap     |  36 ++++++
 .../__snapshots__/single-post.test.js.snap    |  18 +++
 .../vertical-card-layout.test.js.snap         | 108 ++++++++++++++++++
 .../__snapshots__/edit.test.js.snap           |  12 ++
 .../__snapshots__/edit.test.js.snap           |  12 ++
 9 files changed, 330 insertions(+)

diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
index d1b0e827a..8b4d73e63 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit-with-select.test.js.snap
@@ -79,6 +79,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -133,6 +136,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -202,6 +208,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -256,6 +265,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -408,6 +420,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -472,6 +487,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -543,6 +561,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -607,6 +628,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
index d1b0e827a..8b4d73e63 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/__snapshots__/edit.test.js.snap
@@ -79,6 +79,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -133,6 +136,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -202,6 +208,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -256,6 +265,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -408,6 +420,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -472,6 +487,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -543,6 +561,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -607,6 +628,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-actions.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-actions.test.js.snap
index 2195e630f..670159b74 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-actions.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/card-actions.test.js.snap
@@ -14,6 +14,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -40,6 +43,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
@@ -123,6 +129,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -149,6 +158,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
@@ -232,6 +244,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -247,6 +262,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -273,6 +291,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
@@ -288,6 +309,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
@@ -371,6 +395,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -386,6 +413,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -412,6 +442,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
@@ -427,6 +460,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
@@ -510,6 +546,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -525,6 +564,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -551,6 +593,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
@@ -566,6 +611,9 @@ Object {
         <button
           class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
         >
+          <span
+            class="mdc-button__ripple"
+          />
           <i
             aria-hidden="true"
             class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
index 337190596..fb7109535 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/horizontal-card-layout.test.js.snap
@@ -46,6 +46,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -61,6 +64,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -120,6 +126,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -135,6 +144,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -251,6 +263,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -266,6 +281,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -325,6 +343,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -340,6 +361,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -452,6 +476,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -467,6 +494,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -522,6 +552,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -537,6 +570,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -899,6 +935,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -914,6 +953,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -969,6 +1011,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -984,6 +1029,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
index a6102e82e..b46b369e9 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/posts-list.test.js.snap
@@ -62,6 +62,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -129,6 +132,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -207,6 +213,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -274,6 +283,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -402,6 +414,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -462,6 +477,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -533,6 +551,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -593,6 +614,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -727,6 +751,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -797,6 +824,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -874,6 +904,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
@@ -944,6 +977,9 @@ Object {
                 <button
                   class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                 >
+                  <span
+                    class="mdc-button__ripple"
+                  />
                   <i
                     aria-hidden="true"
                     class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
index f6c394d0c..ebcab37dc 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/single-post.test.js.snap
@@ -53,6 +53,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -119,6 +122,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -235,6 +241,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -294,6 +303,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -417,6 +429,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -483,6 +498,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
index fa8a1c9f7..9acc24bf6 100644
--- a/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/common-posts-list/components/__snapshots__/vertical-card-layout.test.js.snap
@@ -53,6 +53,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -68,6 +71,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -134,6 +140,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -149,6 +158,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -272,6 +284,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -287,6 +302,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -353,6 +371,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -368,6 +389,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -487,6 +511,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -502,6 +529,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -564,6 +594,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -579,6 +612,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -707,6 +743,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -722,6 +761,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -793,6 +835,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -808,6 +853,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -931,6 +979,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -946,6 +997,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -1012,6 +1066,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -1027,6 +1084,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -1143,6 +1203,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -1158,6 +1221,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -1217,6 +1283,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -1232,6 +1301,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -1476,6 +1548,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -1491,6 +1566,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -1557,6 +1635,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -1572,6 +1653,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -1691,6 +1775,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -1706,6 +1793,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -1768,6 +1858,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -1783,6 +1876,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -2180,6 +2276,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -2195,6 +2294,9 @@ Object {
             <button
               class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
             >
+              <span
+                class="mdc-button__ripple"
+              />
               <i
                 aria-hidden="true"
                 class="material-icons mdc-button__icon"
@@ -2257,6 +2359,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__post-author"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
@@ -2272,6 +2377,9 @@ Object {
           <button
             class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
           >
+            <span
+              class="mdc-button__ripple"
+            />
             <i
               aria-hidden="true"
               class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
index ce5e11d36..77befa4f5 100644
--- a/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/hand-picked-posts/__snapshots__/edit.test.js.snap
@@ -3495,6 +3495,9 @@ Object {
                     <button
                       class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                     >
+                      <span
+                        class="mdc-button__ripple"
+                      />
                       <i
                         aria-hidden="true"
                         class="material-icons mdc-button__icon"
@@ -3559,6 +3562,9 @@ Object {
                     <button
                       class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                     >
+                      <span
+                        class="mdc-button__ripple"
+                      />
                       <i
                         aria-hidden="true"
                         class="material-icons mdc-button__icon"
@@ -4658,6 +4664,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -4722,6 +4731,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
diff --git a/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
index 02078093b..5e1b8ba9e 100644
--- a/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/recent-posts/__snapshots__/edit.test.js.snap
@@ -1088,6 +1088,9 @@ Object {
                     <button
                       class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                     >
+                      <span
+                        class="mdc-button__ripple"
+                      />
                       <i
                         aria-hidden="true"
                         class="material-icons mdc-button__icon"
@@ -1152,6 +1155,9 @@ Object {
                     <button
                       class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                     >
+                      <span
+                        class="mdc-button__ripple"
+                      />
                       <i
                         aria-hidden="true"
                         class="material-icons mdc-button__icon"
@@ -2230,6 +2236,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"
@@ -2294,6 +2303,9 @@ Object {
                   <button
                     class="mdc-button mdc-card__action mdc-card__action--button mdc-button__comment-count"
                   >
+                    <span
+                      class="mdc-button__ripple"
+                    />
                     <i
                       aria-hidden="true"
                       class="material-icons mdc-button__icon"