diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index 37e8376f22ff09..667fd74b208f29 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 14b0f11334a091..91f1e4170b33dd 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, ENTER } from '@wordpress/keycodes';
import { useDispatch } from '@wordpress/data';
import {
+ BlockControls,
InspectorControls,
URLPopover,
URLInput,
+ useBlockEditingMode,
useBlockProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useState, useRef } from '@wordpress/element';
import {
Button,
+ Dropdown,
PanelBody,
PanelRow,
TextControl,
+ ToolbarButton,
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
} from '@wordpress/components';
import { useMergeRefs } from '@wordpress/compose';
@@ -130,6 +134,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 );
@@ -154,6 +159,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.
+
+ (
+
+ { __( 'Text' ) }
+
+ ) }
+ renderContent={ () => (
+
+ setAttributes( { label: value } )
+ }
+ placeholder={ socialLinkName }
+ />
+ ) }
+ />
+
+ ) }
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index 2e93c9447cca8d..d61cf7c1a7cf56 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -38,3 +38,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;
+}