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 47af181bfe17e8..01901fbbe1e6ad 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.
+
+ (
+
+ { __( '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 bd93ad9f055fcd..09a0688f84428e 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;
+}