feat: added innerblock for download button

WordPress · Jan 6, 2025 · f62da11 · f62da11
1 parent a76edf4
commit f62da11
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 93 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -273,7 +273,7 @@ Add a link to a downloadable file. ([Source](https://github.com/WordPress/gutenb
 -	**Name:** core/file
 -	**Category:** media
 -	**Supports:** align, anchor, color (background, gradients, link, ~~text~~), interactivity, spacing (margin, padding)
--	**Attributes:** blob, displayPreview, downloadButtonText, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
+-	**Attributes:** blob, displayPreview, fileId, fileName, href, id, previewHeight, showDownloadButton, textLinkHref, textLinkTarget
 
 ## Footnotes
 

diff --git a/packages/block-library/src/file/block.json b/packages/block-library/src/file/block.json
@@ -48,12 +48,6 @@
 			"type": "boolean",
 			"default": true
 		},
-		"downloadButtonText": {
-			"type": "rich-text",
-			"source": "rich-text",
-			"selector": "a[download]",
-			"role": "content"
-		},
 		"displayPreview": {
 			"type": "boolean"
 		},

diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -21,11 +21,11 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
-	__experimentalGetElementClassName,
+	InnerBlocks,
 } from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -69,7 +69,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		textLinkHref,
 		textLinkTarget,
 		showDownloadButton,
-		downloadButtonText,
 		displayPreview,
 		previewHeight,
 	} = attributes;
@@ -85,27 +84,14 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	);
 
 	const { createErrorNotice } = useDispatch( noticesStore );
-	const { toggleSelection, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
+	const { toggleSelection } = useDispatch( blockEditorStore );
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
 		onChange: onSelectFile,
 		onError: onUploadError,
 	} );
 
-	// Note: Handle setting a default value for `downloadButtonText` via HTML API
-	// when it supports replacing text content for HTML tags.
-	useEffect( () => {
-		if ( RichText.isEmpty( downloadButtonText ) ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( {
-				downloadButtonText: _x( 'Download', 'button label' ),
-			} );
-		}
-		// This effect should only run on mount.
-	}, [] );
-
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
 			// Reset attributes.
@@ -302,29 +288,34 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 						href={ textLinkHref }
 					/>
 					{ showDownloadButton && (
-						<div className="wp-block-file__button-richtext-wrapper">
-							{ /* Using RichText here instead of PlainText so that it can be styled like a button. */ }
-							<RichText
-								identifier="downloadButtonText"
-								tagName="div" // Must be block-level or else cursor disappears.
-								aria-label={ __( 'Download button text' ) }
-								className={ clsx(
-									'wp-block-file__button',
-									__experimentalGetElementClassName(
-										'button'
-									)
-								) }
-								value={ downloadButtonText }
-								withoutInteractiveFormatting
-								placeholder={ __( 'Add text…' ) }
-								onChange={ ( text ) =>
-									setAttributes( {
-										downloadButtonText:
-											removeAnchorTag( text ),
-									} )
-								}
-							/>
-						</div>
+						<InnerBlocks
+							allowedBlocks={ [ 'core/buttons' ] }
+							template={ [
+								[
+									'core/buttons',
+									{},
+									[
+										[
+											'core/button',
+											{
+												text: __( 'Download' ),
+												lock: {
+													remove: true,
+													move: true,
+												},
+												url: href || temporaryURL,
+												download: true,
+												ariaLabel: __(
+													'Download button text'
+												),
+											},
+										],
+									],
+								],
+							] }
+							templateLock="all"
+							renderAppender={ false }
+						/>
 					) }
 				</div>
 			</div>

diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss
@@ -33,7 +33,15 @@
 	}
 
 	.wp-block-file__content-wrapper {
-		flex-grow: 1;
+		display: flex;
+		align-items: center;
+		gap: 1em;
+		flex-wrap: wrap;
+		width: 100%;
+
+		.block-editor-inner-blocks {
+			flex: 1;
+		}
 	}
 
 	a {
@@ -43,9 +51,4 @@
 			display: inline-block;
 		}
 	}
-
-	.wp-block-file__button-richtext-wrapper {
-		display: inline-block;
-		margin-left: 0.75em;
-	}
 }
diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js
@@ -1,16 +1,7 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useBlockProps,
-	__experimentalGetElementClassName,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const {
@@ -20,7 +11,6 @@ export default function save( { attributes } ) {
 		textLinkHref,
 		textLinkTarget,
 		showDownloadButton,
-		downloadButtonText,
 		displayPreview,
 		previewHeight,
 	} = attributes;
@@ -67,17 +57,9 @@ export default function save( { attributes } ) {
 					</a>
 				) }
 				{ showDownloadButton && (
-					<a
-						href={ href }
-						className={ clsx(
-							'wp-block-file__button',
-							__experimentalGetElementClassName( 'button' )
-						) }
-						download
-						aria-describedby={ describedById }
-					>
-						<RichText.Content value={ downloadButtonText } />
-					</a>
+					<div className="wp-block-file__button_wrapper">
+						<InnerBlocks.Content />
+					</div>
 				) }
 			</div>
 		)

diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
@@ -1,6 +1,10 @@
 .wp-block-file {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 1em;
 
 	&:not(.wp-element-button) {
 		font-size: 0.8em;
@@ -18,6 +22,10 @@
 	* + .wp-block-file__button {
 		margin-left: 0.75em;
 	}
+
+	.wp-block-file__button_wrapper {
+		flex: 1;
+	}
 }
 
 // Lowest specificity to avoid overriding layout styles.
@@ -30,20 +38,20 @@
 }
 
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
-:where(.wp-block-file__button) {
-	border-radius: 2em;
-	padding: 0.5em 1em;
-	display: inline-block;
-
-	&:is(a) {
-		&:hover,
-		&:visited,
-		&:focus,
-		&:active {
-			box-shadow: none;
-			color: $white;
-			opacity: 0.85;
-			text-decoration: none;
-		}
-	}
-}
+// :where(.wp-block-file__button) {
+// 	border-radius: 2em;
+// 	padding: 0.5em 1em;
+// 	display: inline-block;
+
+// 	&:is(a) {
+// 		&:hover,
+// 		&:visited,
+// 		&:focus,
+// 		&:active {
+// 			box-shadow: none;
+// 			color: $white;
+// 			opacity: 0.85;
+// 			text-decoration: none;
+// 		}
+// 	}
+// }