fix: differentiate Block and Link Custom Attributes

Author: Arukuen

src/block-components/block-link/index.js

@@ -8,6 +8,7 @@ import { Edit } from './edit'
  * External dependencies
  */
 import { Link } from '~stackable/components'
+import { CustomAttributes } from '../custom-attributes'
 
 export const BlockLink = () => {
 	return null
@@ -21,15 +22,16 @@ BlockLink.Content = props => {
 	if ( ! attributes.blockLinkUrl ) {
 		return null
 	}
+	const customAttributes = CustomAttributes.getCustomAttributes( attributes, 'blockLinkCustomAttributes' )
 
 	return (
 		<Link.Content
+			{ ...customAttributes }
 			className="stk-block-link stk--transparent-overlay"
 			href={ href || attributes.blockLinkUrl }
 			target={ attributes.blockLinkNewTab ? '_blank' : '' }
 			rel={ attributes.blockLinkRel || undefined }
 			title={ attributes.blockLinkTitle || undefined }
-			aria-label={ attributes.blockLinkAriaLabel || undefined }
 			aria-hidden={ isHidden ? 'true' : undefined }
 			tabindex={ isHidden ? '-1' : undefined }
 		/>

src/block-components/custom-attributes/attributes.js

@@ -1,12 +1,18 @@
-export const addAttributes = attrObject => {
+export const addAttributes = ( attrObject, options = {} ) => {
+	const {
+		attrNameTemplate = '%s',
+		versionAdded = '3.0.0',
+	} = options
+
 	attrObject.add( {
 		attributes: {
 			customAttributes: {
 				type: 'array',
 				default: [],
 			},
 		},
-		versionAdded: '3.0.0',
+		attrNameTemplate,
+		versionAdded,
 		versionDeprecated: '',
 	} )
 }

src/block-components/custom-attributes/edit.js

@@ -17,10 +17,31 @@ import { useBlockAttributesContext, useBlockSetAttributesContext } from '~stacka
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n'
+import { ExternalLink } from '@wordpress/components'
 import { INVALID_HTML_ATTRIBUTES } from '.'
 
-export const Edit = () => {
-	const customAttributes = useBlockAttributesContext( attributes => attributes.customAttributes )
+const CustomAttributesHelp = ( { hasLink } ) => {
+	return <p className="components-base-control__help">
+		{ hasLink
+			? __( 'You can type in custom HTML attributes for this block or its link in the fields above. Examples:', i18n )
+			: __( 'You can type in custom HTML attributes for this block in the field above. Example:', i18n ) }
+		<br />
+		<code>data-id=&quot;my-title&quot;</code>
+		{ hasLink && <>
+			<br />
+			<code>aria-label=&quot;Open product details&quot;</code>
+		</> }
+	</p>
+}
+
+export const Edit = props => {
+	const {
+		customAttributes,
+		linkCustomAttributes,
+	} = useBlockAttributesContext( attributes => ( {
+		customAttributes: attributes.customAttributes,
+		linkCustomAttributes: props.linkAttributeName ? attributes[ props.linkAttributeName ] : undefined,
+	} ) )
 	const setAttributes = useBlockSetAttributesContext()
 
 	return (
@@ -30,12 +51,30 @@ export const Edit = () => {
 				id="custom-attributes"
 			>
 				<CustomAttributesControl
-					label={ __( 'Custom Attributes', i18n ) }
+					label={ props.linkAttributeName ? __( 'Block Custom Attributes', i18n ) : __( 'Custom Attributes', i18n ) }
 					value={ customAttributes }
 					invalidHtmlAttributes={ INVALID_HTML_ATTRIBUTES }
 					onChange={ customAttributes => setAttributes( { customAttributes } ) }
 				/>
+				{ props.linkAttributeName && <CustomAttributesControl
+					label={ __( 'Link Custom Attributes', i18n ) }
+					value={ linkCustomAttributes }
+					invalidHtmlAttributes={ INVALID_HTML_ATTRIBUTES }
+					onChange={ linkCustomAttributes => setAttributes( { [ props.linkAttributeName ]: linkCustomAttributes } ) }
+				/>
+				}
+				<CustomAttributesHelp hasLink={ !! props.linkAttributeName } />
+				<ExternalLink
+					href="https://docs.wpstackable.com/article/461-how-to-use-custom-attributes?utm_source=inspector&utm_campaign=learnmore&utm_medium=gutenberg"
+					target="_docs"
+				>
+					{ __( 'Learn more about Custom Attributes', i18n ) }
+				</ExternalLink>
 			</PanelAdvancedSettings>
 		</InspectorAdvancedControls>
 	)
 }
+
+Edit.defaultProps = {
+	linkAttributeName: '',
+}

src/block-components/custom-attributes/index.js

@@ -26,12 +26,13 @@ CustomAttributes.addAttributes = addAttributes
 
 // CustomAttributes.Style = Style
 
-CustomAttributes.getCustomAttributes = attributes => {
-	if ( ! Array.isArray( attributes.customAttributes ) || attributes.customAttributes.length === 0 ) {
+CustomAttributes.getCustomAttributes = ( attributes, attributeName = 'customAttributes' ) => {
+	if ( ! Array.isArray( attributes[ attributeName ] ) || attributes[ attributeName ].length === 0 ) {
 		return {}
 	}
 
-	const customAttributes = Object.fromEntries( attributes.customAttributes )
+	const customAttributes = Object.fromEntries( attributes[ attributeName ] )
+	const invalidBlockAttributes = [ ...INVALID_BLOCK_ATTRIBUTES, attributeName ]
 	Object.keys( customAttributes ).forEach( key => {
 		// Unescape the value, since we're storing them as escaped strings.
 		let value = unescape( customAttributes[ key ] )
@@ -44,7 +45,7 @@ CustomAttributes.getCustomAttributes = attributes => {
 				dynamicAttributeMatch.forEach( _match => {
 					const match = _match.substr( 1, _match.length - 2 )
 					if (
-						! INVALID_BLOCK_ATTRIBUTES.includes( match ) &&
+						! invalidBlockAttributes.includes( match ) &&
 						attributes.hasOwnProperty( match ) &&
 						! isUndefined( attributes[ match ] )
 					) {

src/block-components/custom-attributes/readme.md

@@ -1,19 +1,28 @@
 # Custom Attributes Block Component
 
-Gives the ability to add your own custom attributes which will be placed on the block.
+Gives the ability to add custom attributes to a block or its generated link.
 
 ## Usage
 
-The custom attribute implementation is already handled by the Block Div Block Component
+The block custom attribute implementation is already handled by the Block Div Block Component.
+For a link, render the attributes with `CustomAttributes.getCustomAttributes( attributes, 'linkCustomAttributes' )` or its block-link equivalent.
 
 ### Adding inspector controls in `edit.js`
 
 ```
 <CustomAttributes.InspectorControls />
 ```
 
+For a block with a configurable link, pass the link attribute name to add a second field below the block attributes.
+
+```
+<CustomAttributes.InspectorControls linkAttributeName="linkCustomAttributes" />
+```
+
 ### Adding attributes in `schema.js`
 
 ```
 CustomAttributes.addAttributes( attrObject )
 ```
+
+Link attributes are registered through `Link.addAttributes` or `BlockLink.addAttributes`.

src/block-components/helpers/link/attributes.js

@@ -1,3 +1,5 @@
+import { addAttributes as addCustomAttributes } from '../../custom-attributes/attributes'
+
 export const linkAttributes = ( selector = 'a' ) => {
 	return {
 		hasLink: {
@@ -51,18 +53,8 @@ export const addLinkAttributes = ( attrObject, attrNameTemplate = '%s', selector
 		versionDeprecated: '',
 	} )
 
-	attrObject.add( {
-		attributes: {
-			ariaLabel: {
-				type: 'string',
-				source: 'attribute',
-				selector,
-				attribute: 'aria-label',
-				default: '',
-			},
-		},
+	addCustomAttributes( attrObject, {
 		attrNameTemplate,
 		versionAdded: '3.20.1',
-		versionDeprecated: '',
 	} )
 }

src/block-components/helpers/link/edit.js

@@ -29,7 +29,6 @@ export const LinkControls = props => {
 	const hasLightboxAttr = useAttributeValue( 'hasLightbox', props.attrNameTemplate )
 	const rel = useAttributeValue( 'rel', props.attrNameTemplate )
 	const title = useAttributeValue( 'title', props.attrNameTemplate )
-	const ariaLabel = useAttributeValue( 'ariaLabel', props.attrNameTemplate )
 	const hasTitleAttr = useAttributeValue( 'hasTitle', props.attrNameTemplate )
 
 	const showGoogleMapHint = hasLightboxAttr &&
@@ -77,14 +76,6 @@ export const LinkControls = props => {
 				value={ rel }
 				onChange={ updateAttributeHandler( 'rel' ) }
 			/>
-			<AdvancedTextControl
-				label={ __( 'Link accessibility label', i18n ) }
-				help={ __( 'Describe the purpose of the link for screen reader users.', i18n ) }
-				value={ ariaLabel }
-				onChange={ updateAttributeHandler( 'ariaLabel' ) }
-				isDynamic={ true }
-				isFormatType={ false }
-			/>
 			{ ( hasTitle || hasTitleAttr ) && (
 				<AdvancedTextControl
 					label={ __( 'Link Title', i18n ) }

src/block-components/link/index.js

@@ -3,6 +3,7 @@
  */
 import { addAttributes } from './attributes'
 import { Edit } from './edit'
+import { CustomAttributes } from '../custom-attributes'
 
 /*+
  * External dependencies
@@ -42,20 +43,21 @@ Link.Content = props => {
 		linkProps = {},
 		attributes,
 	} = props
+	const customAttributes = CustomAttributes.getCustomAttributes( attributes, 'linkCustomAttributes' )
 
 	if ( ! attributes.linkHasLink ) {
 		return props.children
 	}
 
 	return (
 		<LinkComponent.Content
+			{ ...customAttributes }
 			{ ...linkProps }
 			className={ props.className }
 			href={ attributes.linkUrl || undefined }
 			target={ attributes.linkNewTab ? '_blank' : undefined }
 			rel={ attributes.linkRel || undefined }
 			title={ attributes.linkTitle || undefined }
-			aria-label={ attributes.linkAriaLabel || undefined }
 		>
 			{ props.children }
 		</LinkComponent.Content>

src/block/call-to-action/edit.js

@@ -137,7 +137,7 @@ const InspectorControls = memo( () => {
 			<Transform.InspectorControls />
 			<Separator.InspectorControls />
 			<EffectsAnimations.InspectorControls />
-			<CustomAttributes.InspectorControls />
+			<CustomAttributes.InspectorControls linkAttributeName="blockLinkCustomAttributes" />
 			<CustomCSS.InspectorControls mainBlockClass="stk-block-call-to-action" />
 			<Responsive.InspectorControls />
 			<ConditionalDisplay.InspectorControls />

src/block/card/edit.js

@@ -191,7 +191,7 @@ const InspectorControls = memo( props => {
 			<Advanced.InspectorControls />
 			<Transform.InspectorControls />
 			<EffectsAnimations.InspectorControls />
-			<CustomAttributes.InspectorControls />
+			<CustomAttributes.InspectorControls linkAttributeName="blockLinkCustomAttributes" />
 			<CustomCSS.InspectorControls mainBlockClass="stk-block-card" />
 			<Responsive.InspectorControls />
 			<ConditionalDisplay.InspectorControls />