Update - post author/excerpt/comment blocks to use lightBlockWrapper. (…

…#24253)

* add lightWrapper to post author block

* remove more unnecessary styles

* post excerpt light wrapper and cleanup

* update post comments for light wrapper and style cleanup

* remove redundant definition

packages/block-library/src/editor.scss

@@ -49,7 +49,6 @@
 @import "./verse/editor.scss";
 @import "./video/editor.scss";
 @import "./widget-area/editor.scss";
-@import "./post-comments/editor.scss";
 
 /**
  * Import styles from internal editor components used by the blocks.

packages/block-library/src/post-author/block.json

@@ -26,6 +26,7 @@
 	],
 	"supports": {
 		"html": false,
+		"lightBlockWrapper": true,
 		"__experimentalFontSize": true,
 		"__experimentalColor": {
 			"gradients": true,

packages/block-library/src/post-author/edit.js

@@ -7,12 +7,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
 import {
 	AlignmentToolbar,
 	BlockControls,
 	InspectorControls,
 	RichText,
+	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -55,14 +55,6 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 		} );
 	}
 
-	const classNames = useMemo( () => {
-		return {
-			block: classnames( 'wp-block-post-author', {
-				[ `has-text-align-${ textAlign }` ]: textAlign,
-			} ),
-		};
-	}, [ textAlign ] );
-
 	return (
 		<>
 			<InspectorControls>
@@ -120,7 +112,11 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 				/>
 			</BlockControls>
 
-			<div className={ classNames.block }>
+			<Block.div
+				className={ classnames( {
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+				} ) }
+			>
 				{ showAvatar && authorDetails && (
 					<div className="wp-block-post-author__avatar">
 						<img
@@ -155,7 +151,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 						</p>
 					) }
 				</div>
-			</div>
+			</Block.div>
 		</>
 	);
 }

packages/block-library/src/post-author/editor.scss

@@ -33,7 +33,3 @@
 		font-size: 0.7em;
 	}
 }
-
-.block-editor-block-list__block[data-type="core/post-author"].has-link-color .wp-block-post-author a {
-	color: var(--wp--style--color--link);
-}

packages/block-library/src/post-author/style.scss

@@ -28,8 +28,3 @@
 		margin: 0;
 	}
 }
-
-.wp-block-post-author.has-link-color a,
-.wp-block-post-author.has-background.has-link-color a {
-	color: var(--wp--style--color--link);
-}

packages/block-library/src/post-comments/block.json

@@ -12,6 +12,7 @@
 	],
 	"supports": {
 		"html": false,
+		"lightBlockWrapper": true,
 		"align": [
 			"wide",
 			"full"

packages/block-library/src/post-comments/edit.js

@@ -11,6 +11,7 @@ import {
 	AlignmentToolbar,
 	BlockControls,
 	Warning,
+	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { RawHTML } from '@wordpress/element';
@@ -66,13 +67,13 @@ export default function PostCommentsEdit( {
 				/>
 			</BlockControls>
 
-			<div
-				className={ classnames( 'wp-block-post-comments', {
+			<Block.div
+				className={ classnames( {
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				} ) }
 			>
 				<PostCommentsDisplay postId={ postId } />
-			</div>
+			</Block.div>
 		</>
 	);
 }

packages/block-library/src/post-excerpt/block.json

@@ -23,6 +23,7 @@
 	],
 	"supports": {
 		"html": false,
+		"lightBlockWrapper": true,
 		"__experimentalFontSize": true,
 		"__experimentalColor": {
 			"gradients": true,

packages/block-library/src/post-excerpt/edit.js

@@ -14,6 +14,7 @@ import {
 	InspectorControls,
 	RichText,
 	Warning,
+	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -56,6 +57,7 @@ function PostExcerptEditor( {
 		postId,
 		postType
 	);
+
 	return (
 		<>
 			<BlockControls>
@@ -90,8 +92,8 @@ function PostExcerptEditor( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<div
-				className={ classnames( 'wp-block-post-excerpt', {
+			<Block.div
+				className={ classnames( {
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				} ) }
 			>
@@ -133,7 +135,7 @@ function PostExcerptEditor( {
 						}
 					/>
 				) }
-			</div>
+			</Block.div>
 		</>
 	);
 }

packages/block-library/src/post-excerpt/editor.scss

@@ -3,7 +3,3 @@
 		display: inline-block;
 	}
 }
-
-.block-editor-block-list__block[data-type="core/post-excerpt"].has-link-color .wp-block-post-excerpt a {
-	color: var(--wp--style--color--link);
-}

packages/block-library/src/style.scss

@@ -34,8 +34,6 @@
 @import "./table/style.scss";
 @import "./text-columns/style.scss";
 @import "./video/style.scss";
-@import "./post-excerpt/style.scss";
-@import "./post-comments/style.scss";
 
 // The following selectors have increased specificity (using the :root prefix)
 // to assure colors take effect over another base class color, mainly to let