From fce3ac95ed5e967bccf44f55f772927d86f55eb7 Mon Sep 17 00:00:00 2001
From: Andrii Lysenko <lysenkoa.work@gmail.com>
Date: Thu, 14 Dec 2023 09:29:27 -0800
Subject: [PATCH 1/6] Sharing Buttons: improve event listener perfrormance

---
 .../blocks/sharing-button/sharing-button.php  |  5 +-
 .../extensions/blocks/sharing-buttons/save.js |  3 +-
 .../extensions/blocks/sharing-buttons/view.js | 69 ++++++++++---------
 3 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
index e10d96d2c109a..ecb32dfa75b3c 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
@@ -44,7 +44,7 @@ function render_block( $attr, $content, $block ) {
 
 	$style_type  = $block->context['styleType'];
 	$style       = 'style-' . $style_type;
-	$data_shared = 'sharing-' . $attr['service'] . '-' . $post_id . $attr['service'];
+	$data_shared = 'sharing-' . $attr['service'] . '-' . $post_id;
 	$query       = 'share=' . $attr['service'] . '&nb=1';
 
 	$services   = get_services();
@@ -65,7 +65,8 @@ function render_block( $attr, $content, $block ) {
 	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 
 	$component  = '<li class="jetpack-sharing-button__list-item">';
-	$component .= '<a rel="nofollow noopener noreferrer" class="' . $sharing_link_class . '" href="' . $link_url . '" target="_blank" data-shared="' . $data_shared . '" aria-label="' . $link_aria_label . '" primary>';
+	$component .= '<a rel="nofollow noopener noreferrer" class="' . $sharing_link_class . '" href="' . $link_url . '" target="_blank" ';
+	$component .= 'data-service="' . $attr['service'] . '" data-shared="' . $data_shared . '" aria-label="' . $link_aria_label . '" primary>';
 	$component .= $icon;
 	$component .= '<span class="jetpack-sharing-button__service-label" aria-hidden="true">' . $title . '</span>';
 	$component .= '</a>';
diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
index cf4a6979b550e..a797e3391d42d 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
@@ -2,8 +2,9 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save() {
 	const className = 'jetpack-sharing-buttons__services-list';
+	const id = 'serivces-list';
 	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return <ul { ...innerBlocksProps } />;
+	return <ul { ...innerBlocksProps } id={ id } />;
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js
index e5ff89260974b..f179e4c581a0a 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js
@@ -1,38 +1,43 @@
 import './style.scss';
 
-const services = window?.jetpack_sharing_buttons_services || [];
-let windowOpen;
+let sharingWindowOpen;
 
 ( function () {
-	services.forEach( service => {
-		document.querySelectorAll( `a.share-${ service }` ).forEach( link => {
-			link.addEventListener( 'click', event => {
-				if ( service === 'mail' ) {
-					return;
-				}
-				event.preventDefault();
-				event.stopPropagation();
-
-				if ( service === 'print' ) {
-					window.print();
-					return;
-				}
-
-				const el = event.target.closest( `a.share-${ service }` );
-				if ( ! el ) {
-					return;
-				}
-
-				if ( windowOpen !== undefined ) {
-					windowOpen.close();
-				}
-
-				const options = 'menubar=1,resizable=1,width=600,height=400';
-				windowOpen = window.open( el.getAttribute( 'href' ), `wpcom${ service }`, options );
-				if ( windowOpen ) {
-					windowOpen.focus();
-				}
-			} );
-		} );
+	const servicesContainer = document.getElementById( 'serivces-list' );
+	if ( ! servicesContainer ) {
+		return;
+	}
+	servicesContainer.addEventListener( 'click', event => {
+		const link = event.target.closest( 'a' );
+		const service = link?.dataset?.service;
+
+		if ( ! link || ! link.classList.contains( `share-${ service }` ) ) {
+			return;
+		}
+
+		if ( service === 'mail' ) {
+			return;
+		}
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if ( service === 'print' ) {
+			window.print();
+			return;
+		}
+		if ( sharingWindowOpen ) {
+			sharingWindowOpen.close();
+		}
+
+		sharingWindowOpen = window.open(
+			link.getAttribute( 'href' ),
+			`wpcom${ service }`,
+			'menubar=1,resizable=1,width=600,height=400'
+		);
+
+		if ( sharingWindowOpen ) {
+			sharingWindowOpen.focus();
+		}
 	} );
 } )();

From 51e50dd9fe3c6ba9a9757a76c6b05b3e5acd77dd Mon Sep 17 00:00:00 2001
From: Andrii Lysenko <lysenkoa.work@gmail.com>
Date: Thu, 14 Dec 2023 09:31:45 -0800
Subject: [PATCH 2/6] add changelog

---
 .../changelog/improve-sharing-buttons-events-performance     | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 projects/plugins/jetpack/changelog/improve-sharing-buttons-events-performance

diff --git a/projects/plugins/jetpack/changelog/improve-sharing-buttons-events-performance b/projects/plugins/jetpack/changelog/improve-sharing-buttons-events-performance
new file mode 100644
index 0000000000000..71b76e0863706
--- /dev/null
+++ b/projects/plugins/jetpack/changelog/improve-sharing-buttons-events-performance
@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: This feature is not awailable for users yet and should not affect visual representation. It's only inner performance improvements.
+
+

From eb41255de30d7a007f30f36e1247804c9ea0f2ce Mon Sep 17 00:00:00 2001
From: Andrii Lysenko <lysenkoa.work@gmail.com>
Date: Thu, 14 Dec 2023 10:12:37 -0800
Subject: [PATCH 3/6] improve element id namings

---
 .../plugins/jetpack/extensions/blocks/sharing-buttons/save.js   | 2 +-
 .../plugins/jetpack/extensions/blocks/sharing-buttons/view.js   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
index a797e3391d42d..97a358e3e539c 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
@@ -2,7 +2,7 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save() {
 	const className = 'jetpack-sharing-buttons__services-list';
-	const id = 'serivces-list';
+	const id = 'jetpack-sharing-serivces-list';
 	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js
index f179e4c581a0a..5f480c6cde7e0 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/view.js
@@ -3,7 +3,7 @@ import './style.scss';
 let sharingWindowOpen;
 
 ( function () {
-	const servicesContainer = document.getElementById( 'serivces-list' );
+	const servicesContainer = document.getElementById( 'jetpack-sharing-serivces-list' );
 	if ( ! servicesContainer ) {
 		return;
 	}

From 970a545a79d47916d3d83cc2d808947c6385103d Mon Sep 17 00:00:00 2001
From: Andrii Lysenko <lysenkoa.work@gmail.com>
Date: Fri, 15 Dec 2023 08:01:52 -0800
Subject: [PATCH 4/6] esc attributes

---
 .../blocks/sharing-button/sharing-button.php   | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
index ecb32dfa75b3c..aa3de296d81eb 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
@@ -42,19 +42,19 @@ function render_block( $attr, $content, $block ) {
 	$post_id = $block->context['postId'];
 	$title   = $attr['label'] ?? $attr['service'];
 
-	$style_type  = $block->context['styleType'];
-	$style       = 'style-' . $style_type;
+	$style_type = $block->context['styleType'];
+	$style      = 'style-' . $style_type;
+	$query      = 'share=' . $attr['service'] . '&nb=1';
+
 	$data_shared = 'sharing-' . $attr['service'] . '-' . $post_id;
-	$query       = 'share=' . $attr['service'] . '&nb=1';
 
 	$services   = get_services();
 	$service    = new $services[ $attr['service'] ]( $attr['service'], array() );
 	$link_props = $service->get_link( $post, $query, $data_shared );
-	$link_url   = $link_props['url'];
-
-	$icon = get_social_logo( $attr['service'] );
 
-	$sharing_link_class = 'jetpack-sharing-button__button ' . $style . ' share-' . $attr['service'];
+	$link_url           = esc_html( $link_props['url'] );
+	$icon               = get_social_logo( $attr['service'] );
+	$sharing_link_class = esc_html( 'jetpack-sharing-button__button ' . $style . ' share-' . $attr['service'] );
 
 	$link_aria_label = sprintf(
 		/* translators: %s refers to a string representation of sharing service, e.g. Facebook  */
@@ -66,9 +66,9 @@ function render_block( $attr, $content, $block ) {
 
 	$component  = '<li class="jetpack-sharing-button__list-item">';
 	$component .= '<a rel="nofollow noopener noreferrer" class="' . $sharing_link_class . '" href="' . $link_url . '" target="_blank" ';
-	$component .= 'data-service="' . $attr['service'] . '" data-shared="' . $data_shared . '" aria-label="' . $link_aria_label . '" primary>';
+	$component .= 'data-service="' . esc_html( $attr['service'] ) . '" data-shared="' . esc_html( $data_shared ) . '" aria-label="' . $link_aria_label . '" primary>';
 	$component .= $icon;
-	$component .= '<span class="jetpack-sharing-button__service-label" aria-hidden="true">' . $title . '</span>';
+	$component .= '<span class="jetpack-sharing-button__service-label" aria-hidden="true">' . esc_html( $title ) . '</span>';
 	$component .= '</a>';
 	$component .= '</li>';
 

From d8a510553332359318d2feb522ad7a53b944a1f8 Mon Sep 17 00:00:00 2001
From: Andrii Lysenko <lysenkoa.work@gmail.com>
Date: Fri, 15 Dec 2023 11:07:45 -0800
Subject: [PATCH 5/6] add esc_attr

---
 .../extensions/blocks/sharing-button/sharing-button.php   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
index aa3de296d81eb..f0afd28666d07 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
@@ -52,9 +52,9 @@ function render_block( $attr, $content, $block ) {
 	$service    = new $services[ $attr['service'] ]( $attr['service'], array() );
 	$link_props = $service->get_link( $post, $query, $data_shared );
 
-	$link_url           = esc_html( $link_props['url'] );
+	$link_url           = $link_props['url'];
 	$icon               = get_social_logo( $attr['service'] );
-	$sharing_link_class = esc_html( 'jetpack-sharing-button__button ' . $style . ' share-' . $attr['service'] );
+	$sharing_link_class = 'jetpack-sharing-button__button ' . $style . ' share-' . $attr['service'];
 
 	$link_aria_label = sprintf(
 		/* translators: %s refers to a string representation of sharing service, e.g. Facebook  */
@@ -65,8 +65,8 @@ function render_block( $attr, $content, $block ) {
 	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 
 	$component  = '<li class="jetpack-sharing-button__list-item">';
-	$component .= '<a rel="nofollow noopener noreferrer" class="' . $sharing_link_class . '" href="' . $link_url . '" target="_blank" ';
-	$component .= 'data-service="' . esc_html( $attr['service'] ) . '" data-shared="' . esc_html( $data_shared ) . '" aria-label="' . $link_aria_label . '" primary>';
+	$component .= '<a rel="nofollow noopener noreferrer" class="' . $sharing_link_class . '" href="' . esc_attr( $link_url ) . '" target="_blank" ';
+	$component .= 'data-service="' . esc_attr( $attr['service'] ) . '" data-shared="' . esc_attr( $data_shared ) . '" aria-label="' . esc_attr( $link_aria_label ) . '" primary>';
 	$component .= $icon;
 	$component .= '<span class="jetpack-sharing-button__service-label" aria-hidden="true">' . esc_html( $title ) . '</span>';
 	$component .= '</a>';

From 4f1f1291cef210f4bbed036e345f1be166d214c7 Mon Sep 17 00:00:00 2001
From: Andrii Lysenko <lysenkoa.work@gmail.com>
Date: Fri, 15 Dec 2023 11:11:19 -0800
Subject: [PATCH 6/6] add missing esc attr.

---
 .../jetpack/extensions/blocks/sharing-button/sharing-button.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
index f0afd28666d07..0896990ed8773 100644
--- a/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
+++ b/projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php
@@ -65,7 +65,7 @@ function render_block( $attr, $content, $block ) {
 	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 
 	$component  = '<li class="jetpack-sharing-button__list-item">';
-	$component .= '<a rel="nofollow noopener noreferrer" class="' . $sharing_link_class . '" href="' . esc_attr( $link_url ) . '" target="_blank" ';
+	$component .= '<a rel="nofollow noopener noreferrer" class="' . esc_attr( $sharing_link_class ) . '" href="' . esc_attr( $link_url ) . '" target="_blank" ';
 	$component .= 'data-service="' . esc_attr( $attr['service'] ) . '" data-shared="' . esc_attr( $data_shared ) . '" aria-label="' . esc_attr( $link_aria_label ) . '" primary>';
 	$component .= $icon;
 	$component .= '<span class="jetpack-sharing-button__service-label" aria-hidden="true">' . esc_html( $title ) . '</span>';