From bdd8687f2ecf2f68892bcb9cf0fa6df15a96a982 Mon Sep 17 00:00:00 2001
From: Nick Diego <nickmdiego@gmail.com>
Date: Wed, 30 Oct 2024 15:47:32 -0500
Subject: [PATCH] Add contentOnly editing support.

---
 .../block-library/src/social-link/block.json  |  6 ++-
 .../block-library/src/social-link/edit.js     | 40 +++++++++++++++++++
 .../block-library/src/social-link/editor.scss |  5 +++
 3 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index 37e8376f22ff0..667fd74b208f2 100644
--- a/packages/block-library/src/social-link/block.json
+++ b/packages/block-library/src/social-link/block.json
@@ -9,13 +9,15 @@
 	"textdomain": "default",
 	"attributes": {
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"service": {
 			"type": "string"
 		},
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"rel": {
 			"type": "string"
diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js
index 47af181bfe17e..01901fbbe1e6a 100644
--- a/packages/block-library/src/social-link/edit.js
+++ b/packages/block-library/src/social-link/edit.js
@@ -10,18 +10,22 @@ import { DELETE, BACKSPACE } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 
 import {
+	BlockControls,
 	InspectorControls,
 	URLPopover,
 	URLInput,
+	useBlockEditingMode,
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import {
 	Button,
+	Dropdown,
 	PanelBody,
 	PanelRow,
 	TextControl,
+	ToolbarButton,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -122,6 +126,7 @@ const SocialLinkEdit = ( {
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const isContentOnlyMode = useBlockEditingMode() === 'contentOnly';
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
@@ -141,6 +146,41 @@ const SocialLinkEdit = ( {
 
 	return (
 		<>
+			{ isContentOnlyMode && showLabels && (
+				// Add an extra control to modify the label attribute when content only mode is active.
+				// With content only mode active, the inspector is hidden, so users need another way
+				// to edit this attribute.
+				<BlockControls group="other">
+					<Dropdown
+						popoverProps={ { position: 'bottom right' } }
+						renderToggle={ ( { isOpen, onToggle } ) => (
+							<ToolbarButton
+								onClick={ onToggle }
+								aria-haspopup="true"
+								aria-expanded={ isOpen }
+							>
+								{ __( 'Text' ) }
+							</ToolbarButton>
+						) }
+						renderContent={ () => (
+							<TextControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								className="wp-block-social-link__toolbar_content_text"
+								label={ __( 'Text' ) }
+								help={ __(
+									'Provide a text label or use the default.'
+								) }
+								value={ label }
+								onChange={ ( value ) =>
+									setAttributes( { label: value } )
+								}
+								placeholder={ socialLinkName }
+							/>
+						) }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index bd93ad9f055fc..09a0688f84428 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -39,3 +39,8 @@
 :root :where(.wp-block-social-links.is-style-logos-only .wp-social-link button) {
 	padding: 0;
 }
+
+.wp-block-social-link__toolbar_content_text {
+	// Corresponds to the size of the text control input in the block inspector.
+	width: 250px;
+}