From 398497e7a7152cbb2ce37ff6f9ccad3c23ac8f1b Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Tue, 19 Sep 2023 12:53:10 +0300
Subject: [PATCH 1/3] fix: inherit text color during typiing anim

---
 src/animation/frontend/typing/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/animation/frontend/typing/index.js b/src/animation/frontend/typing/index.js
index b250f1225..443dd453c 100644
--- a/src/animation/frontend/typing/index.js
+++ b/src/animation/frontend/typing/index.js
@@ -67,6 +67,7 @@ const initTyping = ( elem ) => {
 	const typingPlaceholder = document.createElement( 'span' );
 	typingPlaceholder.classList.add( 'o-anim-typing-caret' );
 	typingPlaceholder.style.whiteSpace = 'pre-wrap';
+	typingPlaceholder.style.color = 'inherit';
 
 	const fillPlaceholder = document.createElement( 'span' );
 	fillPlaceholder.style.whiteSpace = 'pre-wrap';
@@ -112,7 +113,7 @@ domReady( () => {
 			color: #2E3D48;
 			animation: 1s blink step-end infinite;
 		}
-	
+
 		@keyframes blink {
 			from, to {
 			  color: transparent;

From 7dc8400ccbd916efa23f0fec70cbd82fa59b8b6d Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Tue, 19 Sep 2023 14:22:11 +0300
Subject: [PATCH 2/3] chore: add e2e for animation

---
 src/blocks/test/e2e/blocks/animations.spec.js | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/blocks/test/e2e/blocks/animations.spec.js

diff --git a/src/blocks/test/e2e/blocks/animations.spec.js b/src/blocks/test/e2e/blocks/animations.spec.js
new file mode 100644
index 000000000..69d570616
--- /dev/null
+++ b/src/blocks/test/e2e/blocks/animations.spec.js
@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { test, expect } from '@wordpress/e2e-test-utils-playwright';
+
+test.describe( 'Animations', () => {
+	test.beforeEach( async({ admin }) => {
+		await admin.createNewPost();
+	});
+
+	test( 'can add a typing animation"', async({ editor, page }) => {
+		await editor.insertBlock({
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Magna mollis sed ipsum convallis tellus donec. Maximus ligula nostra fusce inceptos in fermentum phasellus. Ante sollicitudin euismod ultrices nullam etiam eu. Himenaeos si ridiculus suscipit velit donec dui tristique. Habitant auctor ridiculus a consectetuer nisi volutpat magnis sed enim lacus. Quisque habitant litora sodales turpis montes.'
+			}
+		});
+
+		const box = await page.getByLabel( 'Paragraph block' ).boundingBox();
+
+		// Select a text inside the paragraph block.
+		await page.mouse.move( box.x + 10, box.y + 10 );
+		await page.mouse.down();
+		await page.mouse.move( box.x + box.width - 50, box.y + box.height - 100 );
+		await page.mouse.up();
+
+		await page.getByLabel( 'More' ).click();
+
+		await page.getByRole( 'menuitem', { name: 'Typing Animation' }).click();
+
+		expect( page.getByLabel( 'Paragraph block' ).locator( 'o-anim-typing' ).first() ).toBeTruthy();
+		expect( page.getByLabel( 'Paragraph block' ).locator( '.o-typing-delay-500ms' ).first() ).toBeTruthy();
+	});
+});

From 41d661501e1e9dd658dc54f7181a025c05ab4ce1 Mon Sep 17 00:00:00 2001
From: "Soare Robert Daniel (Mac 2023)" <soare.robert.daniel@protonmail.com>
Date: Mon, 25 Sep 2023 13:24:32 +0300
Subject: [PATCH 3/3] fix: inherit parent color for typing caret

---
 src/animation/frontend/typing/index.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/animation/frontend/typing/index.js b/src/animation/frontend/typing/index.js
index 443dd453c..cd4fae4fd 100644
--- a/src/animation/frontend/typing/index.js
+++ b/src/animation/frontend/typing/index.js
@@ -67,7 +67,6 @@ const initTyping = ( elem ) => {
 	const typingPlaceholder = document.createElement( 'span' );
 	typingPlaceholder.classList.add( 'o-anim-typing-caret' );
 	typingPlaceholder.style.whiteSpace = 'pre-wrap';
-	typingPlaceholder.style.color = 'inherit';
 
 	const fillPlaceholder = document.createElement( 'span' );
 	fillPlaceholder.style.whiteSpace = 'pre-wrap';
@@ -110,7 +109,6 @@ domReady( () => {
 		.o-anim-typing-caret::after {
 			font-weight: 100;
 			content: '|';
-			color: #2E3D48;
 			animation: 1s blink step-end infinite;
 		}
 
@@ -119,7 +117,7 @@ domReady( () => {
 			  color: transparent;
 		   }
 			50% {
-			  color: black;
+			  color: inherit;
 		   }
 		}
 	`;