Return early when plaintext is pasted

Handle case of multiline plaintext Remove redundant escaping Handle case of multiline plaintext Remove redundant escaping Remove data-align divs for themes that support layout (WordPress#38613) Change Gallery block code ownership (WordPress#38722) * Remove mkevins from Gallery block codeowners * Add @geriux as codeowner for the gallery block Co-authored-by: Gerardo <gerardo.pacheco@automattic.com> Handle case of multiline plaintext Remove redundant escaping
kirtangajjar · Feb 14, 2022 · 658be99 · 658be99
1 parent 641214d
commit 658be99
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 40 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -14,7 +14,7 @@
 
 # Blocks
 /packages/block-library                         @ajitbohra
-/packages/block-library/src/gallery             @mkevins
+/packages/block-library/src/gallery             @geriux
 /packages/block-library/src/social-links        @mkaz
 /packages/block-library/src/social-link         @mkaz
 /packages/block-library/src/navigation          @tellthemachines

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -53,7 +53,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 
 		$style = '';
 		if ( $content_size || $wide_size ) {
-			$style  = "$selector > * {";
+			$style  = "$selector > :not(.alignleft):not(.alignright) {";
 			$style .= 'max-width: ' . esc_html( $all_max_width_value ) . ';';
 			$style .= 'margin-left: auto !important;';
 			$style .= 'margin-right: auto !important;';
@@ -63,8 +63,8 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			$style .= "$selector .alignfull { max-width: none; }";
 		}
 
-		$style .= "$selector .alignleft { float: left; margin-right: 2em; }";
-		$style .= "$selector .alignright { float: right; margin-left: 2em; }";
+		$style .= "$selector .alignleft { float: left; margin-right: 2em; margin-left: 0; }";
+		$style .= "$selector .alignright { float: right; margin-left: 2em; margin-right: 0; }";
 		if ( $has_block_gap_support ) {
 			$gap_style = $gap_value ? $gap_value : 'var( --wp--style--block-gap )';
 			$style    .= "$selector > * { margin-top: 0; margin-bottom: 0; }";

diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -19,7 +19,12 @@ import {
 	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import { withDispatch, withSelect, useDispatch } from '@wordpress/data';
+import {
+	withDispatch,
+	withSelect,
+	useDispatch,
+	useSelect,
+} from '@wordpress/data';
 import { compose, pure, ifCondition } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
@@ -86,6 +91,10 @@ function BlockListBlock( {
 	onMerge,
 	toggleSelection,
 } ) {
+	const themeSupportsLayout = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return getSettings().supportsLayout;
+	}, [] );
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
@@ -119,10 +128,19 @@ function BlockListBlock( {
 		);
 	}
 
-	const isAligned = wrapperProps && !! wrapperProps[ 'data-align' ];
+	const isAligned =
+		wrapperProps &&
+		!! wrapperProps[ 'data-align' ] &&
+		! themeSupportsLayout;
 
 	// For aligned blocks, provide a wrapper element so the block can be
 	// positioned relative to the block column.
+	// This is only kept for classic themes that don't support layout
+	// Historically we used to rely on extra divs and data-align to
+	// provide the alignments styles in the editor.
+	// Due to the differences between frontend and backend, we migrated
+	// to the layout feature, and we're now aligning the markup of frontend
+	// and backend.
 	if ( isAligned ) {
 		blockEdit = (
 			<div
@@ -164,7 +182,13 @@ function BlockListBlock( {
 
 	const value = {
 		clientId,
-		className,
+		className:
+			wrapperProps?.[ 'data-align' ] && themeSupportsLayout
+				? classnames(
+						className,
+						`align${ wrapperProps[ 'data-align' ] }`
+				  )
+				: className,
 		wrapperProps: omit( wrapperProps, [ 'data-align' ] ),
 		isAligned,
 	};

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -321,7 +321,9 @@
 }
 
 .wp-block[data-align="left"] > *,
-.wp-block[data-align="right"] > * {
+.wp-block[data-align="right"] > *,
+.wp-block.alignleft,
+.wp-block.alignright {
 	// Without z-index, won't be clickable as "above" adjacent content.
 	z-index: z-index("{core/image aligned left or right} .wp-block");
 }

diff --git a/packages/block-editor/src/components/rich-text/use-paste-handler.js b/packages/block-editor/src/components/rich-text/use-paste-handler.js
@@ -241,12 +241,7 @@ export function usePasteHandler( props ) {
 			} );
 
 			if ( typeof content === 'string' ) {
-				let escapedContent = content;
-				// Avoid re-escaping
-				if ( ! hasPastedPlainText ) {
-					escapedContent = escapeHTML( content );
-				}
-				let valueToInsert = create( { html: escapedContent } );
+				let valueToInsert = create( { html: content } );
 
 				// If the content should be multiline, we should process text
 				// separated by a line break as separate lines.

diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
@@ -115,31 +115,33 @@ export default {
 		let output =
 			!! contentSize || !! wideSize
 				? `
-					${ appendSelectors( selector, '> *' ) } {
+					${ appendSelectors( selector, '> :not(.alignleft):not(.alignright)' ) } {
 						max-width: ${ contentSize ?? wideSize };
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
 
-					${ appendSelectors( selector, '> [data-align="wide"]' ) }  {
+					${ appendSelectors( selector, '> .alignwide' ) }  {
 						max-width: ${ wideSize ?? contentSize };
 					}
 
-					${ appendSelectors( selector, '> [data-align="full"]' ) } {
+					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;
 					}
 				`
 				: '';
 
 		output += `
-			${ appendSelectors( selector, '> [data-align="left"]' ) } {
+			${ appendSelectors( selector, '> .alignleft' ) } {
 				float: left;
 				margin-right: 2em;
+				margin-left: 0;
 			}
 
-			${ appendSelectors( selector, '> [data-align="right"]' ) } {
+			${ appendSelectors( selector, '> .alignright' ) } {
 				float: right;
 				margin-left: 2em;
+				margin-right: 0;
 			}
 
 		`;

diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -70,24 +70,6 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-*:not([data-align]) {
-	> .wp-block-image {
-		display: grid;
-		grid-template-columns: [image] minmax(0, max-content) [placeholder] auto;
-		.components-placeholder {
-			grid-column: placeholder;
-		}
-		> div:not(.components-placeholder) {
-			grid-column: image;
-		}
-		> figcaption {
-			grid-column: image;
-			display: table-caption;
-			caption-side: bottom;
-		}
-	}
-}
-
 .wp-block[data-align="left"] > .wp-block-image {
 	margin-right: 1em;
 	margin-left: 0;

diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
@@ -22,6 +22,9 @@
 		width: 100%;
 	}
 
+	&.alignleft,
+	&.alignright,
+	&.aligncenter,
 	.alignleft,
 	.alignright,
 	.aligncenter {

diff --git a/packages/e2e-tests/specs/editor/blocks/image.test.js b/packages/e2e-tests/specs/editor/blocks/image.test.js
@@ -103,9 +103,10 @@ describe( 'Image', () => {
 			`<!-- wp:image {"id":\\d+,"sizeSlug":"full","linkDestination":"none"} -->\\s*<figure class="wp-block-image size-full"><img src="[^"]+\\/${ filename2 }\\.png" alt="" class="wp-image-\\d+"/></figure>\\s*<!-- \\/wp:image -->`
 		);
 		expect( await getEditedPostContent() ).toMatch( regex3 );
-		// For some reason just clicking the block wrapper causes figcaption to get focus
-		// in puppeteer but not in live browser, so clicking on the image wrapper div here instead.
-		await page.click( '.wp-block-image > div' );
+		// Focus outside the block to avoid the image caption being selected
+		// It can happen on CI specially.
+		await page.click( '.wp-block-post-title' );
+		await page.click( '.wp-block-image img' );
 		await page.keyboard.press( 'Backspace' );
 
 		expect( await getEditedPostContent() ).toBe( '' );