@wordpress/block-library 9.17.0 → 9.19.0

package/src/navigation/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const focusableSelectors = [
 	'a[href]',
@@ -106,7 +111,7 @@ const { state, actions } = store(
 					actions.openMenu( 'click' );
 				}
 			},
-			handleMenuKeydown( event ) {
+			handleMenuKeydown: withSyncEvent( ( event ) => {
 				const { type, firstFocusableElement, lastFocusableElement } =
 					getContext();
 				if ( state.menuOpenedBy.click ) {
@@ -137,7 +142,7 @@ const { state, actions } = store(
 						}
 					}
 				}
-			},
+			} ),
 			handleMenuFocusout( event ) {
 				const { modal, type } = getContext();
 				// If focus is outside modal, and in the document, close menu

package/src/navigation-link/edit.js

@@ -201,6 +201,7 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 						);
 					} }
 					autoComplete="off"
+					type="url"
 				/>
 			</ToolsPanelItem>
 

package/src/navigation-link/editor.scss

@@ -82,30 +82,9 @@
 	// Draw a wavy underline.
 	.wp-block-navigation-link__placeholder-text {
 		span {
-			$blur: 10%;
-			$width: 6%;
-			$stop1: 30%;
-			$stop2: 64%;
-
-			--wp-underline-color: var(--wp-admin-theme-color);
-
-			background-image:
-				linear-gradient(45deg, transparent ($stop1 - $blur), var(--wp-underline-color) $stop1, var(--wp-underline-color) ($stop1 + $width), transparent ($stop1 + $width + $blur)),
-				linear-gradient(135deg, transparent ($stop2 - $blur), var(--wp-underline-color) $stop2, var(--wp-underline-color) ($stop2 + $width), transparent ($stop2 + $width + $blur));
-			background-position: 0 100%;
-			background-size: 6px 3px;
-			background-repeat: repeat-x;
-
-			// Since applied to a span, it doesn't change the footprint of the item,
-			// but it does vertically shift the underline to better align.
-			padding-bottom: 0.1em;
-		}
-
-		&.is-invalid,
-		&.is-draft {
-			span {
-				--wp-underline-color: var(--wp--preset--color--vivid-red);
-			}
+			text-decoration: wavy underline;
+			text-decoration-skip-ink: none;
+			text-underline-offset: 0.25rem;
 		}
 	}
 

package/src/navigation-submenu/edit.js

@@ -431,6 +431,7 @@ export default function NavigationSubmenuEdit( {
 							} }
 							label={ __( 'Link' ) }
 							autoComplete="off"
+							type="url"
 						/>
 					</ToolsPanelItem>
 

package/src/post-comments-count/block.json

@@ -39,8 +39,15 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}
-	}
+	},
+	"style": "wp-block-post-comments-count"
 }

package/src/post-comments-count/style.scss

@@ -0,0 +1,4 @@
+.wp-block-post-comments-count {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/post-content/index.php

@@ -46,33 +46,10 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 		$content .= wp_link_pages( array( 'echo' => 0 ) );
 	}
 
-	$ignored_hooked_blocks = get_post_meta( $post_id, '_wp_ignored_hooked_blocks', true );
-	if ( ! empty( $ignored_hooked_blocks ) ) {
-		$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
-		$attributes['metadata'] = array(
-			'ignoredHookedBlocks' => $ignored_hooked_blocks,
-		);
-	}
-
-	// Wrap in Post Content block so the Block Hooks algorithm can insert blocks
-	// that are hooked as first or last child of `core/post-content`.
-	$content = get_comment_delimited_block_content(
-		'core/post-content',
-		$attributes,
-		$content
-	);
-
-	// We need to remove the `core/post-content` block wrapper after the Block Hooks algorithm,
-	// but before `do_blocks` runs, as it would otherwise attempt to render the same block again --
-	// thus recursing infinitely.
-	add_filter( 'the_content', 'remove_serialized_parent_block', 8 );
-
 	/** This filter is documented in wp-includes/post-template.php */
 	$content = apply_filters( 'the_content', str_replace( ']]>', ']]>', $content ) );
 	unset( $seen_ids[ $post_id ] );
 
-	remove_filter( 'the_content', 'remove_serialized_parent_block', 8 );
-
 	if ( empty( $content ) ) {
 		return '';
 	}

package/src/post-featured-image/dimension-controls.js

@@ -10,19 +10,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import {
-	useSettings,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../lock-unlock';
-
-const { ResolutionTool } = unlock( blockEditorPrivateApis );
+import { useSettings } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -45,7 +33,6 @@ const SCALE_OPTIONS = (
 );
 
 const DEFAULT_SCALE = 'cover';
-const DEFAULT_SIZE = 'full';
 
 const scaleHelp = {
 	cover: __(
@@ -61,9 +48,8 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { aspectRatio, width, height, scale, sizeSlug },
+	attributes: { aspectRatio, width, height, scale },
 	setAttributes,
-	media,
 } ) => {
 	const [ availableUnits, defaultRatios, themeRatios, showDefaultRatios ] =
 		useSettings(
@@ -75,18 +61,6 @@ const DimensionControls = ( {
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
-	const imageSizes = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().imageSizes,
-		[]
-	);
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => {
-			return media?.media_details?.sizes?.[ slug ]?.source_url;
-		} )
-		.map( ( { name, slug } ) => ( {
-			value: slug,
-			label: name,
-		} ) );
 
 	const onDimensionChange = ( dimension, nextValue ) => {
 		const parsedValue = parseFloat( nextValue );
@@ -230,21 +204,6 @@ const DimensionControls = ( {
 					</ToggleGroupControl>
 				</ToolsPanelItem>
 			) }
-			{ !! imageSizeOptions.length && (
-				<ResolutionTool
-					panelId={ clientId }
-					value={ sizeSlug }
-					defaultValue={ DEFAULT_SIZE }
-					options={ imageSizeOptions }
-					onChange={ ( nextSizeSlug ) =>
-						setAttributes( { sizeSlug: nextSizeSlug } )
-					}
-					isShownByDefault={ false }
-					resetAllFilter={ () => ( {
-						sizeSlug: DEFAULT_SIZE,
-					} ) }
-				/>
-			) }
 		</>
 	);
 };

package/src/post-featured-image/edit.js

@@ -27,6 +27,8 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useMemo, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -40,12 +42,37 @@ import DimensionControls from './dimension-controls';
 import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
+const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+
+function FeaturedImageResolutionTool( { image, value, onChange } ) {
+	const { imageSizes } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			imageSizes: getSettings().imageSizes,
+		};
+	}, [] );
+
+	if ( ! imageSizes?.length ) {
+		return null;
+	}
+
+	const imageSizeOptions = imageSizes
+		.filter(
+			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
+		)
+		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
-function getMediaSourceUrlBySizeSlug( media, slug ) {
 	return (
-		media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
+		<ResolutionTool
+			value={ value }
+			defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
+			options={ imageSizeOptions }
+			onChange={ onChange }
+		/>
 	);
 }
 
@@ -125,7 +152,9 @@ export default function PostFeaturedImageEdit( {
 		[ featuredImage, postTypeSlug, postId ]
 	);
 
-	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
+	const mediaUrl =
+		media?.media_details?.sizes?.[ sizeSlug ]?.source_url ||
+		media?.source_url;
 
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
@@ -291,6 +320,13 @@ export default function PostFeaturedImageEdit( {
 							/>
 						</ToolsPanelItem>
 					) }
+					<FeaturedImageResolutionTool
+						image={ media }
+						value={ sizeSlug }
+						onChange={ ( nextSizeSlug ) =>
+							setAttributes( { sizeSlug: nextSizeSlug } )
+						}
+					/>
 				</ToolsPanel>
 			</InspectorControls>
 		</>

package/src/post-navigation-link/edit.js

@@ -198,7 +198,7 @@ export default function PostNavigationLinkEdit( {
 					aria-label={ ariaLabel }
 					placeholder={ placeholder }
 					value={ label }
-					allowedFormats={ [ 'core/bold', 'core/italic' ] }
+					withoutInteractiveFormatting
 					onChange={ ( newLabel ) =>
 						setAttributes( { label: newLabel } )
 					}

package/src/post-template/edit.js

@@ -177,18 +177,27 @@ export default function PostTemplateEdit( {
 				query.format = format;
 			}
 
-			// If sticky is not set, it will return all posts in the results.
-			// If sticky is set to `only`, it will limit the results to sticky posts only.
-			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
-			if ( sticky ) {
+			/*
+			 * Handle cases where sticky is set to `exclude` or `only`.
+			 * Which works as a `post__in/post__not_in` query for sticky posts.
+			 */
+			if ( sticky && sticky !== 'ignore' ) {
 				query.sticky = sticky === 'only';
 			}
+
+			if ( sticky === 'ignore' ) {
+				// Remove any leftover sticky query parameter.
+				delete query.sticky;
+				query.ignore_sticky = true;
+			}
+
 			// If `inherit` is truthy, adjust conditionally the query to create a better preview.
+			let currentPostType = postType;
 			if ( inherit ) {
 				// Change the post-type if needed.
 				if ( templateSlug?.startsWith( 'archive-' ) ) {
 					query.postType = templateSlug.replace( 'archive-', '' );
-					postType = query.postType;
+					currentPostType = query.postType;
 				} else if ( templateCategory ) {
 					query.categories = templateCategory[ 0 ]?.id;
 				} else if ( templateTag ) {
@@ -205,7 +214,7 @@ export default function PostTemplateEdit( {
 			}
 			// When we preview Query Loop blocks we should prefer the current
 			// block's postType, which is passed through block context.
-			const usedPostType = previewPostType || postType;
+			const usedPostType = previewPostType || currentPostType;
 			return {
 				posts: getEntityRecords( 'postType', usedPostType, {
 					...query,

package/src/pullquote/style.scss

@@ -46,6 +46,10 @@
 .wp-block-pullquote.has-text-align-right blockquote {
 	text-align: right;
 }
+// Ensure that we are reasonably specific to override theme defaults.
+.wp-block-pullquote.has-text-align-center blockquote {
+	text-align: center;
+}
 
 // .is-style-solid-color is deprecated.
 // This selector has not been scoped with `:root :where`, as global styles

package/src/query/edit/inspector-controls/sticky-control.js

@@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n';
 
 const stickyOptions = [
 	{ label: __( 'Include' ), value: '' },
+	{ label: __( 'Ignore' ), value: 'ignore' },
 	{ label: __( 'Exclude' ), value: 'exclude' },
 	{ label: __( 'Only' ), value: 'only' },
 ];

package/src/query/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const isValidLink = ( ref ) =>
 	ref &&
@@ -22,7 +27,7 @@ store(
 	'core/query',
 	{
 		actions: {
-			*navigate( event ) {
+			navigate: withSyncEvent( function* ( event ) {
 				const ctx = getContext();
 				const { ref } = getElement();
 				const queryRef = ref.closest(
@@ -42,7 +47,7 @@ store(
 					const firstAnchor = `.wp-block-post-template a[href]`;
 					queryRef.querySelector( firstAnchor )?.focus();
 				}
-			},
+			} ),
 			*prefetch() {
 				const { ref } = getElement();
 				if ( isValidLink( ref ) ) {

package/src/query-total/index.php

@@ -10,6 +10,8 @@
  *
  * @since 6.8.0
  *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.

package/src/rss/block.json

@@ -47,6 +47,20 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": false,
+				"margin": false
+			}
+		},
 		"color": {
 			"background": true,
 			"text": true,

package/src/rss/edit.js

@@ -119,6 +119,19 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		},
 	];
 
+	/*
+	 * This function merges the existing attributes with additional style properties.
+	 * The `border` and `spacing` properties are set to `undefined` to ensure that
+	 * these styles are reset and not applied on the server side.
+	 */
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			border: undefined,
+			spacing: undefined,
+		},
+	};
 	return (
 		<>
 			<BlockControls>
@@ -190,7 +203,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<Disabled>
 					<ServerSideRender
 						block="core/rss"
-						attributes={ attributes }
+						attributes={ serverSideAttributes }
 					/>
 				</Disabled>
 			</div>

package/src/rss/editor.scss

@@ -5,3 +5,10 @@
 .wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
 	flex: 1 1 auto;
 }
+// Reset all styles when skipping block supports while server-side rendering.
+// This prevents issues such as duplicate padding, borders etc.
+.wp-block-rss .wp-block-rss {
+	all: inherit;
+	margin: 0;
+	padding: 0;
+}

package/src/rss/style.scss

@@ -1,11 +1,4 @@
 ul.wp-block-rss { // The ul is needed for specificity to override the reset styles in the editor.
-	list-style: none;
-	padding: 0;
-
-	// This needs extra specificity due to the reset mixin on the parent: https://github.com/WordPress/gutenberg/blob/a250e9e5fe00dd5195624f96a3d924e7078951c3/packages/edit-post/src/style.scss#L54
-	&.wp-block-rss {
-		box-sizing: border-box;
-	}
 
 	&.alignleft {
 		/*rtl:ignore*/
@@ -19,7 +12,6 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl
 		display: flex;
 		flex-wrap: wrap;
 		padding: 0;
-		list-style: none;
 
 		li {
 			margin: 0 1em 1em 0;
@@ -41,3 +33,9 @@ ul.wp-block-rss { // The ul is needed for specificity to override the reset styl
 	display: block;
 	font-size: 0.8125em;
 }
+.wp-block-rss {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+	list-style: none;
+	padding: 0;
+}

package/src/search/view.js

@@ -1,7 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext, getElement } from '@wordpress/interactivity';
+import {
+	store,
+	getContext,
+	getElement,
+	withSyncEvent,
+} from '@wordpress/interactivity';
 
 const { actions } = store(
 	'core/search',
@@ -31,7 +36,7 @@ const { actions } = store(
 			},
 		},
 		actions: {
-			openSearchInput( event ) {
+			openSearchInput: withSyncEvent( ( event ) => {
 				const ctx = getContext();
 				const { ref } = getElement();
 				if ( ! ctx.isSearchInputVisible ) {
@@ -39,7 +44,7 @@ const { actions } = store(
 					ctx.isSearchInputVisible = true;
 					ref.parentElement.querySelector( 'input' ).focus();
 				}
-			},
+			} ),
 			closeSearchInput() {
 				const ctx = getContext();
 				ctx.isSearchInputVisible = false;

package/src/site-logo/edit.js

@@ -499,11 +499,6 @@ export default function LogoEdit( {
 	};
 
 	const onFilesDrop = ( filesList ) => {
-		if ( filesList?.length > 1 ) {
-			onUploadError( __( 'Only one image can be used as a site logo.' ) );
-			return;
-		}
-
 		getSettings().mediaUpload( {
 			allowedTypes: ALLOWED_MEDIA_TYPES,
 			filesList,
@@ -515,6 +510,7 @@ export default function LogoEdit( {
 				onInitialSelectLogo( image );
 			},
 			onError: onUploadError,
+			multiple: false,
 		} );
 	};
 

package/src/social-link/editor.scss

@@ -16,6 +16,7 @@
 	height: auto;
 	font-weight: inherit;
 	font-family: inherit;
+	margin: 0;
 
 	// This rule ensures social link buttons display correctly in template parts.
 	opacity: 1;

package/src/social-link/icons/discord.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+export const DiscordIcon = () => (
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M20.317 4.369A19.88 19.88 0 0 0 15.894 3a14.145 14.145 0 0 0-.719 1.518 19.205 19.205 0 0 0-5.351 0A14.183 14.183 0 0 0 9.104 3 19.896 19.896 0 0 0 4.682 4.369a18.921 18.921 0 0 0-3.012 12.52 19.929 19.929 0 0 0 6.081 3.097c.487-.65.922-1.339 1.3-2.061a12.445 12.445 0 0 1-1.958-.896c.165-.12.326-.246.483-.374a12.445 12.445 0 0 0 8.946 0c.157.128.318.253.483.374-.627.371-1.281.683-1.958.896.379.722.813 1.41 1.3 2.061a19.94 19.94 0 0 0 6.081-3.097 18.921 18.921 0 0 0-3.012-12.52ZM8.12 15.233c-1.202 0-2.184-1.09-2.184-2.431 0-1.34.97-2.431 2.184-2.431 1.213 0 2.202 1.09 2.184 2.431 0 1.341-.97 2.431-2.184 2.431Zm7.757 0c-1.202 0-2.184-1.09-2.184-2.431 0-1.34.97-2.431 2.184-2.431 1.213 0 2.202 1.09 2.184 2.431 0 1.341-.97 2.431-2.184 2.431Z" />
+	</SVG>
+);

package/src/social-link/icons/index.js

@@ -5,6 +5,7 @@ export * from './bluesky';
 export * from './chain';
 export * from './codepen';
 export * from './deviantart';
+export * from './discord';
 export * from './dribbble';
 export * from './dropbox';
 export * from './etsy';

package/src/social-link/index.php

@@ -169,6 +169,10 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 			'name' => 'DeviantArt',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M 18.19 5.636 18.19 2 18.188 2 14.553 2 14.19 2.366 12.474 5.636 11.935 6 5.81 6 5.81 10.994 9.177 10.994 9.477 11.357 5.81 18.363 5.81 22 5.811 22 9.447 22 9.81 21.634 11.526 18.364 12.065 18 18.19 18 18.19 13.006 14.823 13.006 14.523 12.641 18.19 5.636z"></path></svg>',
 		),
+		'discord'       => array(
+			'name' => 'Discord',
+			'icon' => '<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M20.317 4.369A19.88 19.88 0 0 0 15.894 3a14.145 14.145 0 0 0-.719 1.518 19.205 19.205 0 0 0-5.351 0A14.183 14.183 0 0 0 9.104 3 19.896 19.896 0 0 0 4.682 4.369a18.921 18.921 0 0 0-3.012 12.52 19.929 19.929 0 0 0 6.081 3.097c.487-.65.922-1.339 1.3-2.061a12.445 12.445 0 0 1-1.958-.896c.165-.12.326-.246.483-.374a12.445 12.445 0 0 0 8.946 0c.157.128.318.253.483.374-.627.371-1.281.683-1.958.896.379.722.813 1.41 1.3 2.061a19.94 19.94 0 0 0 6.081-3.097 18.921 18.921 0 0 0-3.012-12.52ZM8.12 15.233c-1.202 0-2.184-1.09-2.184-2.431 0-1.34.97-2.431 2.184-2.431 1.213 0 2.202 1.09 2.184 2.431 0 1.341-.97 2.431-2.184 2.431Zm7.757 0c-1.202 0-2.184-1.09-2.184-2.431 0-1.34.97-2.431 2.184-2.431 1.213 0 2.202 1.09 2.184 2.431 0 1.341-.97 2.431-2.184 2.431Z"/></svg>',
+		),
 		'dribbble'      => array(
 			'name' => 'Dribbble',
 			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M12,22C6.486,22,2,17.514,2,12S6.486,2,12,2c5.514,0,10,4.486,10,10S17.514,22,12,22z M20.434,13.369 c-0.292-0.092-2.644-0.794-5.32-0.365c1.117,3.07,1.572,5.57,1.659,6.09C18.689,17.798,20.053,15.745,20.434,13.369z M15.336,19.876c-0.127-0.749-0.623-3.361-1.822-6.477c-0.019,0.006-0.038,0.013-0.056,0.019c-4.818,1.679-6.547,5.02-6.701,5.334 c1.448,1.129,3.268,1.803,5.243,1.803C13.183,20.555,14.311,20.313,15.336,19.876z M5.654,17.724 c0.193-0.331,2.538-4.213,6.943-5.637c0.111-0.036,0.224-0.07,0.337-0.102c-0.214-0.485-0.448-0.971-0.692-1.45 c-4.266,1.277-8.405,1.223-8.778,1.216c-0.003,0.087-0.004,0.174-0.004,0.261C3.458,14.207,4.29,16.21,5.654,17.724z M3.639,10.264 c0.382,0.005,3.901,0.02,7.897-1.041c-1.415-2.516-2.942-4.631-3.167-4.94C5.979,5.41,4.193,7.613,3.639,10.264z M9.998,3.709 c0.236,0.316,1.787,2.429,3.187,5c3.037-1.138,4.323-2.867,4.477-3.085C16.154,4.286,14.17,3.471,12,3.471 C11.311,3.471,10.641,3.554,9.998,3.709z M18.612,6.612C18.432,6.855,17,8.69,13.842,9.979c0.199,0.407,0.389,0.821,0.567,1.237 c0.063,0.148,0.124,0.295,0.184,0.441c2.842-0.357,5.666,0.215,5.948,0.275C20.522,9.916,19.801,8.065,18.612,6.612z"></path></svg>',

package/src/social-link/socials-with-bg.scss

@@ -33,6 +33,11 @@
 	color: #fff;
 }
 
+.wp-social-link-discord {
+	background-color: #5865f2;
+	color: #fff;
+}
+
 .wp-social-link-dribbble {
 	background-color: #e94c89;
 	color: #fff;

package/src/social-link/socials-without-bg.scss

@@ -22,6 +22,10 @@
 	color: #02e49b;
 }
 
+.wp-social-link-discord {
+	color: #5865f2;
+}
+
 .wp-social-link-dribbble {
 	color: #e94c89;
 }

package/src/social-link/variations.js

@@ -9,6 +9,7 @@ import {
 	ChainIcon,
 	CodepenIcon,
 	DeviantArtIcon,
+	DiscordIcon,
 	DribbbleIcon,
 	DropboxIcon,
 	EtsyIcon,
@@ -108,6 +109,12 @@ const variations = [
 		title: 'DeviantArt',
 		icon: DeviantArtIcon,
 	},
+	{
+		name: 'discord',
+		attributes: { service: 'discord' },
+		title: 'Discord',
+		icon: DiscordIcon,
+	},
 	{
 		name: 'dribbble',
 		attributes: { service: 'dribbble' },

package/src/social-links/editor.scss

@@ -89,7 +89,6 @@
 // Unconfigured placeholder links are semitransparent.
 .wp-social-link.wp-social-link__is-incomplete {
 	opacity: 0.5;
-	@include reduce-motion("transition");
 }
 
 .wp-block-social-links .is-selected .wp-social-link__is-incomplete,
@@ -101,6 +100,10 @@
 .wp-block-social-links .block-list-appender {
 	position: static; // display inline.
 
+	.block-editor-inserter {
+		font-size: inherit;
+	}
+
 	.block-editor-button-block-appender {
 		height: 1.5em;
 		width: 1.5em;