Like block: Add Reblog setting (#34514)

* Initial commit

* Populate the toggle with fetched `disabled_reblogs` value

* Add site type to data shared in block editor

* Display the Reblog setting for Simple sites only

* Update block description based on site type

* Negate Reblog setting (as the setting is `disabled_reblogs`)

* Remove unnecessary comment

* Negate `reblogSetting` output of `useFetchReblogSetting`

projects/plugins/jetpack/changelog/add-like-block-reblog-setting

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Like block (beta): Add Reblog setting

projects/plugins/jetpack/extensions/blocks/like/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 3,
 	"name": "jetpack/like",
 	"title": "Like",
-	"description": "Let readers show their appreciation for your content by liking it.",
+	"description": "Give your readers the ability to show appreciation for your posts.",
 	"keywords": [ "like", "thumbs up", "button" ],
 	"version": "1.0.0",
 	"textdomain": "jetpack",

projects/plugins/jetpack/extensions/blocks/like/edit.js

@@ -1,33 +1,47 @@
-import { getBlockIconComponent } from '@automattic/jetpack-shared-extension-utils';
-import { BlockIcon, useBlockProps } from '@wordpress/block-editor';
-//import { Placeholder, withNotices } from '@wordpress/components';
-import { Placeholder } from '@wordpress/components';
-//import { useState } from '@wordpress/element';
+import { getBlockIconComponent, isSimpleSite } from '@automattic/jetpack-shared-extension-utils';
+import { BlockIcon, useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { Placeholder, ToggleControl, PanelBody } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import metadata from './block.json';
 import './editor.scss';
+import useFetchReblogSetting from './use-fetch-reblog-setting';
 
 const icon = getBlockIconComponent( metadata );
 
-//function LikeEdit( { attributes, className, noticeOperations, noticeUI, setAttributes } ) {
 function LikeEdit( { noticeUI } ) {
-	/**
-	 * Write the block editor UI.
-	 *
-	 * @returns {object} The UI displayed when user edits this block.
-	 */
-	//const [ notice, setNotice ] = useState();
+	const blockProps = useBlockProps();
+	const blogId = window?.Jetpack_LikeBlock?.blog_id;
 
-	/* Call this function when you want to show an error in the placeholder. */
-	/* const setErrorNotice = () => {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( __( 'Put error message here.', 'jetpack' ) );
-	}; */
+	const { fetchReblogSetting, reblogSetting } = useFetchReblogSetting( blogId );
 
-	const blockProps = useBlockProps();
+	const setReblogSetting = newValue => {
+		// eslint-disable-next-line no-console
+		console.log( newValue );
+	};
+
+	useEffect( () => {
+		if ( ! isSimpleSite() ) {
+			return;
+		}
+		fetchReblogSetting();
+	}, [ fetchReblogSetting ] );
 
 	return (
 		<div { ...blockProps }>
+			{ isSimpleSite() && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings', 'jetpack' ) }>
+						<ToggleControl
+							label="Show reblog button"
+							checked={ reblogSetting }
+							onChange={ newValue => {
+								setReblogSetting( newValue );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
 			<Placeholder
 				label={ __( 'Like', 'jetpack' ) }
 				instructions={ __( 'Instructions go here.', 'jetpack' ) }

projects/plugins/jetpack/extensions/blocks/like/like.php

@@ -18,11 +18,14 @@
  * registration if we need to.
  */
 function register_block() {
+	$is_wpcom = defined( 'IS_WPCOM' ) && IS_WPCOM;
+
 	Blocks::jetpack_register_block(
 		__DIR__,
 		array(
 			'api_version'     => 3,
 			'render_callback' => __NAMESPACE__ . '\render_block',
+			'description'     => $is_wpcom ? __( 'Give your readers the ability to show appreciation for your posts and easily share them with others.', 'jetpack' ) : __( 'Give your readers the ability to show appreciation for your posts.', 'jetpack' ),
 		)
 	);
 }
@@ -101,3 +104,29 @@ function render_block( $attr, $content, $block ) {
 		$html
 	);
 }
+
+/**
+ * Add the initial state for the Like block.
+ */
+function add_like_block_data() {
+	if ( ! is_admin() ) {
+		return;
+	}
+
+	if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
+		$blog_id = get_current_blog_id();
+	} else {
+		$blog_id = \Jetpack_Options::get_option( 'id' );
+	}
+
+	$like_block_data = array(
+		'blog_id' => $blog_id,
+	);
+
+	wp_add_inline_script(
+		'jetpack-blocks-editor',
+		'var Jetpack_LikeBlock = ' . wp_json_encode( $like_block_data, JSON_HEX_TAG | JSON_HEX_AMP ) . ';',
+		'before'
+	);
+}
+add_action( 'enqueue_block_assets', __NAMESPACE__ . '\add_like_block_data' );

projects/plugins/jetpack/extensions/blocks/like/use-fetch-reblog-setting.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import { useState, useCallback } from '@wordpress/element';
+
+export default function useFetchReblogSetting( blogId ) {
+	const [ isLoading, setIsLoading ] = useState( false );
+	const [ reblogSetting, setReblogSetting ] = useState( null );
+	const [ error, setError ] = useState( null );
+
+	const fetchReblogSetting = useCallback( async () => {
+		const path = `https://public-api.wordpress.com/rest/v1.3/sites/${ blogId }/settings/`;
+
+		setIsLoading( true );
+		await apiFetch( { url: path, method: 'GET' } )
+			.then( response => {
+				setReblogSetting( ! response?.settings?.disabled_reblogs );
+				setError( null );
+			} )
+			.catch( err => {
+				setError( err );
+			} )
+			.finally( () => {
+				setIsLoading( false );
+			} );
+	}, [ blogId ] );
+
+	return {
+		isLoading,
+		reblogSetting,
+		error,
+		fetchReblogSetting,
+	};
+}