Merge pull request #75 from DLXPlugins/bug/custom-share-text-in-block

Fix Frontend Share Output. Add Custom Click to Share Option to Block.

build/blocks/click-to-share/block.json

@@ -36,6 +36,10 @@
       "type": "number",
       "default": -1
     },
+    "customShareText": {
+      "type": "string",
+      "default": ""
+    },
     "shareText": {
       "type": "string",
       "default": ""

build/has-click-to-share.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'bae7929d76c921f94b26');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '66113141c2fc9635e0a0');

php/Blocks.php

@@ -408,18 +408,33 @@ public function frontend( $attributes, $content ) {
 		if ( 'gradient' === $attributes['backgroundType'] ) {
 			$container_classes[] = 'has-background-gradient';
 		}
+
+		// Get the share text for data attribute and JS sharing.
+		$share_content         = ! empty( $content ) ? $content : $attributes['shareText'];
+		$share_content         = wp_strip_all_tags( $share_content );
+		$share_content_trimmed = preg_replace( '/\n+/', "\n\n", trim( $share_content ) ); // Replace newline chars with single newline.
+
+		// Get the custom share text if available.
+		$custom_share_text = ! empty( $attributes['customShareText'] ) ? $attributes['customShareText'] : '';
+		if ( ! empty( $custom_share_text ) ) {
+			$custom_share_text = wp_strip_all_tags( $custom_share_text );
+			$custom_share_text = preg_replace( '/\n+/', "\n\n", trim( $custom_share_text ) ); // Replace newline chars with single newline.
+
+			// Override trimmed share content.
+			$share_content_trimmed = $custom_share_text;
+		}
 		?>
 		<div class='<?php echo esc_attr( implode( ' ', $container_classes ) ); ?>' id="<?php echo esc_attr( $attributes['uniqueId'] ); ?>">
 			<div class="has-click-to-share-wrapper">
-				<div class="has-click-to-share-text" data-text-full="<?php echo esc_attr( esc_html( wp_strip_all_tags( $attributes['shareText'] ) ) ); ?>">
+				<div class="has-click-to-share-text" data-text-full="<?php echo esc_attr( $share_content_trimmed ); ?>">
 					<?php
 					// Make sure shareText isn't empty. If it is, use InnerBlocks content instead.
 					if ( empty( $content ) && ! empty( $attributes['shareText'] ) ) {
 						echo wp_kses_post( $attributes['shareText'] );
 					} elseif ( ! empty( $content ) ) {
 						echo wp_kses_post( $content );
 					}
-				?>
+					?>
 				</div>
 				<div class='has-click-to-share-cta'>
 					<?php
@@ -683,7 +698,6 @@ public function get_dimensions_shorthand( $top, $right, $bottom, $left, $unit, $
 			$right = ' auto ';
 			$left  = ' auto ';
 		}
-
 
 		$output = $top . $right . $bottom . $left;
 		return trim( $output );

src/blocks/click-to-share/block.json

@@ -36,6 +36,10 @@
 			"type": "number",
 			"default": -1
 		},
+		"customShareText": {
+			"type": "string",
+			"default": ""
+		},
 		"shareText": {
 			"type": "string",
 			"default": ""

src/blocks/click-to-share/edit.js

@@ -31,28 +31,34 @@ const {
 	PanelRow,
 	RangeControl,
 	TextControl,
+	TextareaControl,
 	ButtonGroup,
 	Button,
 	ToggleControl,
+	Toolbar,
+	ToolbarButton,
+	Popover,
 } = wp.components;
 
-const { escapeEditableHTML } = wp.escapeHtml;
-
-const { InspectorControls, RichText, useBlockProps, InnerBlocks, useInnerBlocksProps } = wp.blockEditor;
-
-const { useInstanceId, useSelect } = wp.compose;
+const { useState } = wp.element;
+const { InspectorControls, useBlockProps, BlockControls } = wp.blockEditor;
 
+const { useInstanceId } = wp.compose;
 
 const HAS_Click_To_Share = ( props ) => {
 	const [ deviceType, setDeviceType ] = useDeviceType( 'Desktop' );
 	const generatedUniqueId = useInstanceId( HAS_Click_To_Share, 'has-cts' );
 	const blockProps = useBlockProps( {
 		className: classnames( `highlight-and-share`, `align${ align }` ),
 	} );
+	const [ quoteToolbarPopoverAnchor, setQuoteToolbarPopoverAnchor ] = useState( null );
+	const [ isQuoteToolbarPopoverOpen, setIsQuoteToolbarPopoverOpen ] = useState( false );
+	const quoteToolbarTogglePopover = () => setIsQuoteToolbarPopoverOpen( ! isQuoteToolbarPopoverOpen );
 
 	const { attributes, setAttributes, clientId } = props;
 
 	const {
+		customShareText,
 		shareText,
 		backgroundType,
 		backgroundColor,
@@ -191,6 +197,38 @@ const HAS_Click_To_Share = ( props ) => {
 	);
 	const panelHeaderHeight = panelHeader ? panelHeader.offsetHeight : 0;
 
+	const shareTextToolbar = (
+		<BlockControls>
+			<Toolbar>
+				<ToolbarButton
+					icon="editor-quote"
+					label={ __( 'Customize the Share Quote', 'highlight-and-share' ) }
+					onClick={ quoteToolbarTogglePopover }
+					ref={ setQuoteToolbarPopoverAnchor }
+				/>
+				{ isQuoteToolbarPopoverOpen && (
+					<Popover
+						placement="right-end"
+						anchor={ quoteToolbarPopoverAnchor }
+						noArrow={ false }
+						className="has-custom-share-text-popover"
+					>
+						<TextareaControl
+							className="has-custom-share-textarea"
+							label={ __( 'Custom Share Quote', 'highlight-and-share' ) }
+							help={ __(
+								'Enter a custom quote to share. This will override what is in the share block.',
+								'highlight-and-share'
+							) }
+							value={ customShareText }
+							onChange={ ( value ) => setAttributes( { customShareText: value } ) }
+						/>
+					</Popover>
+				) }
+			</Toolbar>
+		</BlockControls>
+	);
+
 	const inspectorControls = (
 		<InspectorControls>
 			<div
@@ -753,6 +791,7 @@ const HAS_Click_To_Share = ( props ) => {
 
 	const block = (
 		<>
+			{ shareTextToolbar }
 			{ inspectorControls }
 			{ <BlockContent attributes={ attributes } setAttributes={ setAttributes } clientId={ clientId } /> }
 		</>

src/blocks/editor.scss

@@ -597,6 +597,20 @@
 	}
 }
 
+/* Share popover */
+.has-custom-share-text-popover {
+	.components-popover__content {
+		padding: 15px;
+	}
+	.has-custom-share-textarea {
+		textarea {
+			width: 100%;
+			min-width: 250px;
+			max-width: 275px;
+		}
+	}
+}
+
 /* Preset Modal Button */
 .has-preset-modal-apply-button {
 	margin-right: 8px;