Add WhatsApp sharer button

.editorconfig

@@ -4,7 +4,7 @@
 root = true
 
 [*]
-# WordPress Coding Style uses TABs for PHP, JS and CSS files
+# WordPress Coding Style uses TABs for PHP, JS, HTML and CSS files
 # https://developer.wordpress.org/coding-standards/wordpress-coding-standards/
 indent_style = tab
 indent_size = 4

.github/workflows/build-test.yml

@@ -8,7 +8,7 @@ on:
       - main
   pull_request:
     branches:
-      - dev
+      - dev*
       - main
 
 env:

functions/block-patterns/elemente/person-2.html

@@ -15,13 +15,93 @@
 	<p class="person-mail no-link"><a href="mailto:[email protected]">[email protected]</a></p>
 	<!-- /wp:paragraph -->
 
-	<!-- wp:group {"className":"d-flex p-0"} -->
-	<div class="wp-block-group d-flex p-0"><!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
-	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
+    <!-- wp:group {"className":"d-flex p-0"} -->
+    <div class="wp-block-group d-flex p-0"><div class="wp-block-group__inner-container">
+    <!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+    <!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+    <!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-tiktok"} -->
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
-	<!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
-	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
+    <!-- wp:sunflower/meta-data {"icon":"fab fa-mastodon"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+    <!-- wp:sunflower/meta-data {"icon":"fas fa-envelope"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+    <!-- wp:sunflower/meta-data {"icon":"fas fa-globe"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
+    <!-- /wp:sunflower/meta-data --></div></div>
+    <!-- /wp:group --></div></div>
+    <!-- /wp:media-text --></div>
+    <!-- /wp:column -->
+
+    <!-- wp:column -->
+    <div class="wp-block-column"><!-- wp:media-text {"mediaId":152,"mediaLink":"http://localhost/demo/?attachment_id=152","mediaType":"image","className":"person has-shadow"} -->
+    <div class="wp-block-media-text alignwide is-stacked-on-mobile person has-shadow"><figure class="wp-block-media-text__media"><img src="https://sunflower-theme.de/demo/wp-content/uploads/sites/6/2021/01/sunflower-flower-summer-blossom-4298808-1024x682.jpg" alt="Sunflower Flower Summer Blossom  - Bru-nO / Pixabay" class="wp-image-152 size-full"/></figure><div class="wp-block-media-text__content">
+    <!-- wp:paragraph {"placeholder":"Inhalt…","className":"person-name"} -->
+    <p class="person-name">Vorname Nachname</p>
+    <!-- /wp:paragraph -->
+
+    <!-- wp:paragraph {"className":"person-description"} -->
+    <p class="person-description">Kurze Beschreibung, Amt, Mandat und/oder Zitat.</p>
+    <!-- /wp:paragraph -->
+
+    <!-- wp:paragraph {"className":"person-mail no-link"} -->
+    <p class="person-mail no-link"><a href="mailto:[email protected]">[email protected]</a></p>
+    <!-- /wp:paragraph -->
+
+    <!-- wp:group {"className":"d-flex p-0"} -->
+    <div class="wp-block-group d-flex p-0"><div class="wp-block-group__inner-container"><!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+    <!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+    <!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+    <!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
+    <div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
+    <!-- /wp:sunflower/meta-data -->
+
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-tiktok"} -->
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
 	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->

functions/block-patterns/elemente/person-3.html

@@ -28,8 +28,12 @@
 	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i></a></div>
+	<!-- /wp:sunflower/meta-data -->
+
 	<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
-	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
 	<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
@@ -82,8 +86,12 @@
 	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i></a></div>
+	<!-- /wp:sunflower/meta-data -->
+
 	<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
-	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
 	<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
@@ -136,8 +144,12 @@
 	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
+	<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-whatsapp"></i></a></div>
+	<!-- /wp:sunflower/meta-data -->
+
 	<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
-	<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
+	<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
 	<!-- /wp:sunflower/meta-data -->
 
 	<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->

functions/options/class-sunflowersocialmediasettingspage.php

@@ -118,6 +118,15 @@ public function sunflower_social_media_page_init(): void {
 			array( 'sunflower_sharer_facebook', __( 'Facebook', 'sunflower' ) )
 		);
 
+		add_settings_field(
+			'sunflower_sharer_whatsapp',
+			__( 'WhatsApp', 'sunflower' ),
+			$this->sunflower_checkbox_callback( ... ),
+			'sunflower-setting-social-media-options',
+			'sunflower_social_media_sharers',
+			array( 'sunflower_sharer_whatsapp', __( 'WhatsApp', 'sunflower' ) )
+		);
+
 		add_settings_field(
 			'sunflower_sharer_mail',
 			__( 'mail', 'sunflower' ),
@@ -193,6 +202,7 @@ public function social_media_profiles_callback(): void {
 		$default[] = 'fab fa-twitter;Twitter;';
 		$default[] = 'fab fa-bluesky;Bluesky;';
 		$default[] = 'fab fa-facebook-f;Facebook;';
+		$default[] = 'fab fa-whatsapp;WhatsApp;';
 		$default[] = 'fab fa-threads;Threads;';
 		$default[] = 'fab fa-tiktok;TikTok;';
 		$default[] = 'fab fa-linkedin;LinkedIn;';

inc/template-tags.php

@@ -101,42 +101,46 @@ function sunflower_entry_footer( $show_sharers = false ) {
  * Make the Sunflower social sharers.
  */
 function sunflower_the_social_media_sharers() {
-	$twitter  = false;
-	$facebook = false;
-	$mail     = false;
+
+	$sharer = array();
 	if ( sunflower_get_setting( 'sunflower_sharer_twitter' ) || sunflower_get_setting( 'sunflower_sharer_x_twitter' ) ) {
-		$twitter = sprintf(
-			'<a href="https://twitter.com/intent/tweet?text=%s&url=%s&via=%s" target="_blank" title="%s" class="sharer"><i class="fab fa-x-twitter"></i></a>',
+		$sharer[] = sprintf(
+			'<a href="https://twitter.com/intent/tweet?text=%s&url=%s" target="_blank" title="%s" class="sharer"><i class="fab fa-x-twitter"></i></a>',
 			rawurlencode( (string) get_the_title() ),
 			get_permalink(),
-			false,
 			__( 'Share on X (Twitter) ', 'sunflower' )
 		);
 	}
 
 	if ( sunflower_get_setting( 'sunflower_sharer_facebook' ) ) {
-		$facebook = sprintf(
-			"<i class='fab fa-facebook sharer' onclick=\"window.open('https://www.facebook.com/sharer/sharer.php?u=%s', 'sharer', 'width=626,height=436')\" title=\"%s\"></i>",
-			get_permalink(),
+		$sharer[] = sprintf(
+			'<a href="https://www.facebook.com/sharer/sharer.php?u=%s" target="_blank" title="%s" class="sharer"><i class="fab fa-facebook-f"></i></a>',
+			rawurlencode( (string) get_the_title() ),
 			__( 'Share on Facebook ', 'sunflower' )
 		);
 	}
 
+	if ( sunflower_get_setting( 'sunflower_sharer_whatsapp' ) ) {
+		$sharer[] = sprintf(
+			'<a href="https://wa.me/?text=%s" target="_blank" title="%s" class="sharer"><i class="fab fa-whatsapp"></i></a>',
+			rawurlencode( (string) get_the_title() ),
+			__( 'Share on WhatsApp ', 'sunflower' )
+		);
+	}
+
 	if ( sunflower_get_setting( 'sunflower_sharer_mail' ) ) {
-		$mail = sprintf(
+		$sharer[] = sprintf(
 			'<a href="MAILTO:?subject=%s&body=%s" target="_blank" title="%s" class="sharer"><i class="fas fa-envelope"></i></a>',
 			rawurlencode( (string) get_the_title() ),
 			get_permalink(),
 			__( 'send mail ', 'sunflower' )
 		);
 	}
 
-	if ( $twitter || $facebook || $mail ) {
+	if ( count( $sharer ) > 0 ) {
 		printf(
-			'<div class="social-media-sharers mb-5">%s %s %s</div>',
-			wp_kses_post( $twitter ),
-			wp_kses_post( $facebook ),
-			wp_kses_post( $mail )
+			'<div class="social-media-sharers mb-5">%s</div>',
+			wp_kses_post( implode( ' ', $sharer ) )
 		);
 	}
 }

src/meta-data/edit.js

@@ -119,6 +119,10 @@ export default function Edit( { attributes, setAttributes } ) {
 									value: 'fab fa-facebook-f',
 									label: 'Facebook',
 								},
+								{
+									value: 'fab fa-whatsapp',
+									label: 'WhatsApp',
+								},
 								{
 									value: 'fab fa-threads',
 									label: 'Threads',