File Block: Makes the button an element button (#41239)

* Form Block: Makese the button an element button * update fixtures
WordPress · May 24, 2022 · 373d545 · 373d545
1 parent 23e3018
commit 373d545
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 18 deletions.
diff --git a/packages/block-library/src/file/edit.js b/packages/block-library/src/file/edit.js
@@ -22,6 +22,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useCopyToClipboard } from '@wordpress/compose';
@@ -301,7 +302,10 @@ function FileEdit( {
 							<RichText
 								tagName="div" // Must be block-level or else cursor disappears.
 								aria-label={ __( 'Download button text' ) }
-								className={ 'wp-block-file__button' }
+								className={ classnames(
+									'wp-block-file__button',
+									__experimentalElementButtonClassName
+								) }
 								value={ downloadButtonText }
 								withoutInteractiveFormatting
 								placeholder={ __( 'Add text…' ) }

diff --git a/packages/block-library/src/file/save.js b/packages/block-library/src/file/save.js
@@ -1,7 +1,16 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalElementButtonClassName,
+} from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
 
 export default function save( { attributes } ) {
@@ -63,7 +72,10 @@ export default function save( { attributes } ) {
 				{ showDownloadButton && (
 					<a
 						href={ href }
-						className="wp-block-file__button"
+						className={ classnames(
+							'wp-block-file__button',
+							__experimentalElementButtonClassName
+						) }
 						download={ true }
 						aria-describedby={ describedById }
 					>

diff --git a/test/integration/fixtures/blocks/core__file__new-window.html b/test/integration/fixtures/blocks/core__file__new-window.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js","showDownloadButton":true} -->
-<div class="wp-block-file"><a id="wp-block-file--media-_clientId_0" href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" target="_blank" rel="noreferrer noopener">6546</a><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
+<div class="wp-block-file"><a id="wp-block-file--media-_clientId_0" href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" target="_blank" rel="noreferrer noopener">6546</a><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__new-window.parsed.json b/test/integration/fixtures/blocks/core__file__new-window.parsed.json
@@ -6,9 +6,9 @@
 			"showDownloadButton": true
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" target=\"_blank\" rel=\"noreferrer noopener\">6546</a><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n",
+		"innerHTML": "\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" target=\"_blank\" rel=\"noreferrer noopener\">6546</a><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" target=\"_blank\" rel=\"noreferrer noopener\">6546</a><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n"
+			"\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" target=\"_blank\" rel=\"noreferrer noopener\">6546</a><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__file__new-window.serialized.html b/test/integration/fixtures/blocks/core__file__new-window.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js"} -->
-<div class="wp-block-file"><a id="wp-block-file--media-_clientId_0" href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" target="_blank" rel="noreferrer noopener">6546</a><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
+<div class="wp-block-file"><a id="wp-block-file--media-_clientId_0" href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" target="_blank" rel="noreferrer noopener">6546</a><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__new-window__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__file__new-window__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js"} -->
-<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" target="_blank" rel="noreferrer noopener">6546</a><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download>Download</a></div>
+<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" target="_blank" rel="noreferrer noopener">6546</a><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button wp-element-button" download>Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__no-text-link.html b/test/integration/fixtures/blocks/core__file__no-text-link.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js","showDownloadButton":true} -->
-<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download>Download</a></div>
+<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button wp-element-button" download>Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__no-text-link.parsed.json b/test/integration/fixtures/blocks/core__file__no-text-link.parsed.json
@@ -6,9 +6,9 @@
 			"showDownloadButton": true
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<div class=\"wp-block-file\"><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button\" download>Download</a></div>\n",
+		"innerHTML": "\n<div class=\"wp-block-file\"><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button wp-element-button\" download>Download</a></div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-file\"><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button\" download>Download</a></div>\n"
+			"\n<div class=\"wp-block-file\"><a href=\"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js\" class=\"wp-block-file__button wp-element-button\" download>Download</a></div>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__file__no-text-link.serialized.html b/test/integration/fixtures/blocks/core__file__no-text-link.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js"} -->
-<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download>Download</a></div>
+<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button wp-element-button" download>Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__no-text-link__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__file__no-text-link__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8888/wp-content/uploads/2018/05/keycodes.js"} -->
-<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button" download>Download</a></div>
+<div class="wp-block-file"><a href="http://localhost:8888/wp-content/uploads/2018/05/keycodes.js" class="wp-block-file__button wp-element-button" download>Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__pdf-preview.html b/test/integration/fixtures/blocks/core__file__pdf-preview.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf","displayPreview":true,"previewHeight":370} -->
-<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="Embed of yolo."></object><a id="wp-block-file--media-_clientId_0" href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
+<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="Embed of yolo."></object><a id="wp-block-file--media-_clientId_0" href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__pdf-preview.parsed.json b/test/integration/fixtures/blocks/core__file__pdf-preview.parsed.json
@@ -7,9 +7,9 @@
 			"previewHeight": 370
 		},
 		"innerBlocks": [],
-		"innerHTML": "\n<div class=\"wp-block-file\"><object class=\"wp-block-file__embed\" data=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" type=\"application/pdf\" style=\"width:100%;height:370px\" aria-label=\"Embed of yolo.\"></object><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\">yolo</a><a href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n",
+		"innerHTML": "\n<div class=\"wp-block-file\"><object class=\"wp-block-file__embed\" data=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" type=\"application/pdf\" style=\"width:100%;height:370px\" aria-label=\"Embed of yolo.\"></object><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\">yolo</a><a href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n",
 		"innerContent": [
-			"\n<div class=\"wp-block-file\"><object class=\"wp-block-file__embed\" data=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" type=\"application/pdf\" style=\"width:100%;height:370px\" aria-label=\"Embed of yolo.\"></object><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\">yolo</a><a href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n"
+			"\n<div class=\"wp-block-file\"><object class=\"wp-block-file__embed\" data=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" type=\"application/pdf\" style=\"width:100%;height:370px\" aria-label=\"Embed of yolo.\"></object><a id=\"wp-block-file--media-_clientId_0\" href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\">yolo</a><a href=\"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf\" class=\"wp-block-file__button wp-element-button\" download aria-describedby=\"wp-block-file--media-_clientId_0\">Download</a></div>\n"
 		]
 	}
 ]
diff --git a/test/integration/fixtures/blocks/core__file__pdf-preview.serialized.html b/test/integration/fixtures/blocks/core__file__pdf-preview.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf","displayPreview":true,"previewHeight":370} -->
-<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="Embed of yolo."></object><a id="wp-block-file--media-_clientId_0" href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
+<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="Embed of yolo."></object><a id="wp-block-file--media-_clientId_0" href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-_clientId_0">Download</a></div>
 <!-- /wp:file -->
diff --git a/test/integration/fixtures/blocks/core__file__pdf-preview__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__file__pdf-preview__deprecated-1.serialized.html
@@ -1,3 +1,3 @@
 <!-- wp:file {"href":"http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf","displayPreview":true,"previewHeight":370} -->
-<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="Embed of yolo."></object><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button" download>Download</a></div>
+<div class="wp-block-file"><object class="wp-block-file__embed" data="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" type="application/pdf" style="width:100%;height:370px" aria-label="Embed of yolo."></object><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf">yolo</a><a href="http://localhost:8889/wp-content/uploads/2021/04/yolo.pdf" class="wp-block-file__button wp-element-button" download>Download</a></div>
 <!-- /wp:file -->