@wordpress/block-library 7.0.2 → 7.1.0

package/src/navigation-link/hooks.js

@@ -35,7 +35,7 @@ export function enhanceNavigationLinkVariations( settings, name ) {
 	}
 
 	// Fallback handling may be deleted after supported WP ranges understand the `variations`
-	// property when passed to register_block_type in index.php
+	// property when passed to register_block_type in index.php.
 	if ( ! settings.variations ) {
 		return {
 			...settings,
@@ -43,7 +43,7 @@ export function enhanceNavigationLinkVariations( settings, name ) {
 		};
 	}
 
-	// Otherwise decorate server passed variations with an icon and isActive function
+	// Otherwise decorate server passed variations with an icon and isActive function.
 	if ( settings.variations ) {
 		const isActive = ( blockAttributes, variationAttributes ) => {
 			return blockAttributes.type === variationAttributes.type;

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

@@ -5,8 +5,8 @@ import { updateNavigationLinkBlockAttributes } from '../edit';
 
 describe( 'edit', () => {
 	describe( 'updateNavigationLinkBlockAttributes', () => {
-		// data shapes are linked to fetchLinkSuggestions from
-		// core-data/src/fetch/__experimental-fetch-link-suggestions.js
+		// Data shapes are linked to fetchLinkSuggestions from
+		// core-data/src/fetch/__experimental-fetch-link-suggestions.js.
 		it( 'can update a post link', () => {
 			const setAttributes = jest.fn();
 			const linkSuggestion = {
@@ -193,7 +193,7 @@ describe( 'edit', () => {
 				setAttributes
 			);
 			// post_format returns a slug ID value from the Search API
-			// we do not persist this ID since we expect this value to be a post or term ID
+			// we do not persist this ID since we expect this value to be a post or term ID.
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				kind: 'taxonomy',
 				opensInNewTab: false,
@@ -443,7 +443,7 @@ describe( 'edit', () => {
 					type: 'post',
 					url: 'https://wordpress.local/menu-test/',
 				} );
-				//click on the existing link control, and toggle opens new tab
+				// Click on the existing link control, and toggle opens new tab.
 				updateNavigationLinkBlockAttributes(
 					{
 						url: 'https://wordpress.local/menu-test/',
@@ -488,7 +488,7 @@ describe( 'edit', () => {
 					type: 'post',
 					url: 'https://wordpress.local/menu-test/',
 				} );
-				//click on the existing link control, and toggle opens new tab
+				// Click on the existing link control, and toggle opens new tab.
 				updateNavigationLinkBlockAttributes(
 					{
 						url: 'https://wordpress.local/foo/',

package/src/navigation-submenu/edit.js

@@ -388,7 +388,7 @@ export default function NavigationSubmenuEdit( {
 		}
 	}, [] );
 
-	// Store the colors from context as attributes for rendering
+	// Store the colors from context as attributes for rendering.
 	useEffect( () => {
 		// This side-effect should not create an undo level as those should
 		// only be created via user interactions. Mark this change as
@@ -500,7 +500,7 @@ export default function NavigationSubmenuEdit( {
 		onKeyDown,
 	} );
 
-	// Always use overlay colors for submenus
+	// Always use overlay colors for submenus.
 	const innerBlocksColors = getColors( context, true );
 
 	if ( isAtMaxNesting ) {

package/src/page-list/convert-to-links-modal.js

@@ -3,8 +3,8 @@
  */
 import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { store as coreDataStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
 import { createBlock as create } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
@@ -24,7 +24,7 @@ export const convertSelectedBlockToNavigationLinks = ( {
 	const linkMap = {};
 	const navigationLinks = [];
 	pages.forEach( ( { id, title, link: url, type, parent } ) => {
-		// See if a placeholder exists. This is created if children appear before parents in list
+		// See if a placeholder exists. This is created if children appear before parents in list.
 		const innerBlocks = linkMap[ id ]?.innerBlocks ?? [];
 		linkMap[ id ] = createBlock(
 			'core/navigation-link',
@@ -42,7 +42,7 @@ export const convertSelectedBlockToNavigationLinks = ( {
 			navigationLinks.push( linkMap[ id ] );
 		} else {
 			if ( ! linkMap[ parent ] ) {
-				// Use a placeholder if the child appears before parent in list
+				// Use a placeholder if the child appears before parent in list.
 				linkMap[ parent ] = { innerBlocks: [] };
 			}
 			const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
@@ -74,34 +74,20 @@ export const convertSelectedBlockToNavigationLinks = ( {
 };
 
 export default function ConvertToLinksModal( { onClose, clientId } ) {
-	const { pages, pagesFinished } = useSelect(
-		( select ) => {
-			const { getEntityRecords, hasFinishedResolution } = select(
-				coreDataStore
-			);
-			const query = [
-				'postType',
-				'page',
-				{
-					per_page: MAX_PAGE_COUNT,
-					_fields: PAGE_FIELDS,
-					// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
-					// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
-					// sort.
-					orderby: 'menu_order',
-					order: 'asc',
-				},
-			];
-			return {
-				pages: getEntityRecords( ...query ),
-				pagesFinished: hasFinishedResolution(
-					'getEntityRecords',
-					query
-				),
-			};
-		},
-		[ clientId ]
+	const { records: pages, hasResolved: pagesFinished } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			per_page: MAX_PAGE_COUNT,
+			_fields: PAGE_FIELDS,
+			// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby
+			// values is resolved, update 'orderby' to [ 'menu_order', 'post_title' ] to provide a consistent
+			// sort.
+			orderby: 'menu_order',
+			order: 'asc',
+		}
 	);
+
 	const { replaceBlock } = useDispatch( blockEditorStore );
 
 	return (

package/src/page-list/edit.js

@@ -16,7 +16,10 @@ import { ToolbarButton, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	__experimentalUseEntityRecords as useEntityRecords,
+} from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -113,28 +116,16 @@ function useFrontPageId() {
 }
 
 function usePageData() {
-	const { pages, hasResolvedPages } = useSelect( ( select ) => {
-		const { getEntityRecords, hasFinishedResolution } = select( coreStore );
-
-		return {
-			pages: getEntityRecords( 'postType', 'page', {
-				orderby: 'menu_order',
-				order: 'asc',
-				_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
-				per_page: -1,
-			} ),
-			hasResolvedPages: hasFinishedResolution( 'getEntityRecords', [
-				'postType',
-				'page',
-				{
-					orderby: 'menu_order',
-					order: 'asc',
-					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
-					per_page: -1,
-				},
-			] ),
-		};
-	}, [] );
+	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
+		'postType',
+		'page',
+		{
+			orderby: 'menu_order',
+			order: 'asc',
+			_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+			per_page: -1,
+		}
+	);
 
 	return useMemo( () => {
 		// TODO: Once the REST API supports passing multiple values to

package/src/post-author-name/edit.js

@@ -50,6 +50,7 @@ function PostAuthorNameEdit( {
 		<a
 			href="#author-pseudo-link"
 			onClick={ ( event ) => event.preventDefault() }
+			className="wp-block-post-author-name__link"
 		>
 			{ displayName }
 		</a>

package/src/post-author-name/index.php

@@ -27,7 +27,7 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $author_name );
+		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $author_name );
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );

package/src/post-comments-form/edit.js

@@ -13,7 +13,7 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useEntityProp } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 export default function PostCommentsFormEdit( {
 	attributes,
@@ -55,8 +55,12 @@ export default function PostCommentsFormEdit( {
 
 				{ 'open' !== commentStatus && (
 					<Warning>
-						{ __(
-							'Post Comments Form block: comments to this post are not allowed.'
+						{ sprintf(
+							/* translators: 1: Post type (i.e. "post", "page") */
+							__(
+								'Post Comments Form block: comments to this %s are not allowed.'
+							),
+							postType
 						) }
 					</Warning>
 				) }

package/src/post-excerpt/edit.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { useMemo, RawHTML } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import {
 	AlignmentToolbar,
 	BlockControls,
@@ -16,7 +16,7 @@ import {
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
+import { PanelBody, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -83,12 +83,12 @@ export default function PostExcerptEditor( {
 			withoutInteractiveFormatting={ true }
 		/>
 	);
+	const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', {
+		'is-inline': ! showMoreOnNewLine,
+	} );
 	const excerptContent = isEditable ? (
 		<RichText
-			className={
-				! showMoreOnNewLine &&
-				'wp-block-post-excerpt__excerpt is-inline'
-			}
+			className={ excerptClassName }
 			aria-label={ __( 'Post excerpt text' ) }
 			value={
 				rawExcerpt ||
@@ -99,12 +99,9 @@ export default function PostExcerptEditor( {
 			tagName="p"
 		/>
 	) : (
-		( renderedExcerpt && (
-			<Disabled>
-				<RawHTML key="html">{ renderedExcerpt }</RawHTML>
-			</Disabled>
-		) ) ||
-		__( 'No post excerpt found' )
+		<p className={ excerptClassName }>
+			{ strippedRenderedExcerpt || __( 'No post excerpt found' ) }
+		</p>
 	);
 	return (
 		<>

package/src/post-terms/edit.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -88,7 +89,7 @@ export default function PostTermsEdit( {
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
 							>
-								{ postTerm.name }
+								{ unescape( postTerm.name ) }
 							</a>
 						) )
 						.reduce( ( prev, curr ) => (

package/src/query-title/edit.js

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-// import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,

package/src/search/edit.js

@@ -32,6 +32,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -257,6 +258,11 @@ export default function SearchEdit( {
 						type="button"
 						className={ buttonClasses }
 						style={ buttonStyles }
+						aria-label={
+							buttonText
+								? stripHTML( buttonText )
+								: __( 'Search' )
+						}
 					>
 						<Icon icon={ search } />
 					</button>

package/src/search/edit.native.js

@@ -307,7 +307,7 @@ export default function SearchEdit( {
 					className="wp-block-search__input"
 					style={ inputStyle }
 					numberOfLines={ 1 }
-					ellipsizeMode="tail" // currently only works on ios
+					ellipsizeMode="tail" // Currently only works on ios.
 					label={ null }
 					value={ placeholder }
 					placeholder={

package/src/search/index.php

@@ -82,8 +82,9 @@ function render_block_core_search( $attributes ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
-			$aria_label             = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['label'] ) ) );
-			$button_classes        .= ' has-icon';
+			$aria_label      = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['buttonText'] ) ) );
+			$button_classes .= ' has-icon';
+
 			$button_internal_markup =
 				'<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
 					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>

package/src/search/test/edit.native.js

@@ -12,7 +12,6 @@ import { Icon } from '@wordpress/components';
  * Internal dependencies
  */
 import SearchEdit from '../edit.native.js';
-
 // react-native-aztec shouldn't be mocked because these tests are based on
 // snapshot testing where we want to keep the original component.
 jest.unmock( '@wordpress/react-native-aztec' );

package/src/separator/save.js

@@ -11,11 +11,11 @@ import { getColorClassName, useBlockProps } from '@wordpress/block-editor';
 export default function separatorSave( { attributes } ) {
 	const { color, customColor } = attributes;
 
-	// the hr support changing color using border-color, since border-color
-	// is not yet supported in the color palette, we use background-color
+	// The hr support changing color using border-color, since border-color
+	// is not yet supported in the color palette, we use background-color.
 	const backgroundClass = getColorClassName( 'background-color', color );
-	// the dots styles uses text for the dots, to change those dots color is
-	// using color, not backgroundColor
+	// The dots styles uses text for the dots, to change those dots color is
+	// using color, not backgroundColor.
 	const colorClass = getColorClassName( 'color', color );
 
 	const className = classnames( {

package/src/separator/separator-settings.native.js

@@ -1,3 +1,3 @@
-// Mobile has no separator settings at this time, so render nothing
+// Mobile has no separator settings at this time, so render nothing.
 const SeparatorSettings = () => null;
 export default SeparatorSettings;

package/src/site-logo/edit.js

@@ -451,7 +451,7 @@ export default function LogoEdit( {
 		}
 
 		if ( ! media.id && media.url ) {
-			// This is a temporary blob image
+			// This is a temporary blob image.
 			setLogo( undefined );
 			setLogoUrl( media.url );
 			return;

package/src/social-link/edit.native.js

@@ -26,6 +26,14 @@ import { withSelect } from '@wordpress/data';
 import { getIconBySite, getNameBySite } from './social-list';
 import styles from './editor.scss';
 
+const DEFAULT_ACTIVE_ICON_STYLES = {
+	backgroundColor: '#f0f0f0',
+	color: '#444',
+};
+const DEFAULT_INACTIVE_ICON_STYLES = {
+	backgroundColor: '#0000003f',
+	color: '#fff',
+};
 const ANIMATION_DELAY = 300;
 const ANIMATION_DURATION = 400;
 
@@ -54,21 +62,22 @@ const SocialLinkEdit = ( {
 	const { url, service = name } = attributes;
 	const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
 	const [ hasUrl, setHasUrl ] = useState( !! url );
-
 	const activeIcon =
-		styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ];
-
-	const inactiveIcon = usePreferredColorSchemeStyle(
-		styles.inactiveIcon,
-		styles.inactiveIconDark
-	);
+		styles[ `wp-social-link-${ service }` ] ||
+		styles[ `wp-social-link` ] ||
+		DEFAULT_ACTIVE_ICON_STYLES;
+	const inactiveIcon =
+		usePreferredColorSchemeStyle(
+			styles.inactiveIcon,
+			styles.inactiveIconDark
+		) || DEFAULT_INACTIVE_ICON_STYLES;
 
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
 	const IconComponent = getIconBySite( service )();
 	const socialLinkName = getNameBySite( service );
 
-	// When new social icon is added link sheet is opened automatically
+	// When new social icon is added link sheet is opened automatically.
 	useEffect( () => {
 		if ( isSelected && ! url ) {
 			setIsLinkSheetVisible( true );

package/src/social-link/test/index.native.js

@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, initializeEditor, waitFor, within } from 'test/helpers';
+/**
+ * WordPress dependencies
+ */
+import { registerCoreBlocks } from '@wordpress/block-library';
+import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
+
+const unregisterBlocks = () => {
+	const blocks = getBlockTypes();
+
+	blocks.forEach( ( { name } ) => unregisterBlockType( name ) );
+};
+
+describe( '<SocialLinkEdit/>', () => {
+	beforeAll( () => {
+		registerCoreBlocks();
+	} );
+
+	afterAll( () => {
+		unregisterBlocks();
+	} );
+
+	/**
+	 * GIVEN an EDITOR is displayed;
+	 * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER;
+	 */
+	it( 'should display WORDPRESS, FACEBOOK, TWITTER, INSTAGRAM by default.', async () => {
+		// Arrange
+		const subject = await initializeEditor( {} );
+
+		// Act
+		fireEvent.press(
+			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+		);
+		fireEvent.changeText(
+			await waitFor( () =>
+				subject.getByPlaceholderText( 'Search blocks' )
+			),
+			'social icons'
+		);
+		fireEvent.press(
+			await waitFor( () =>
+				subject.getByA11yLabel( 'Social Icons block' )
+			)
+		);
+		fireEvent(
+			await waitFor( () =>
+				within(
+					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+				).getByTestId( 'block-list-wrapper' )
+			),
+			'layout',
+			{ nativeEvent: { layout: { width: 100 } } }
+		);
+
+		// Assert
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /WordPress social icon/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /Facebook social icon/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /Twitter social icon/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yLabel( /Instagram social icon/ )
+			)
+		).toBeDefined();
+	} );
+
+	/**
+	 * GIVEN an EDITOR is displayed;
+	 * WHEN a SOCIAL ICONS BLOCK is selected from the BLOCK INSERTER;
+	 */
+	it( `should display WORDPRESS with a URL set by default
+	     AND should display FACEBOOK, TWITTER, INSTAGRAM with NO URL set by default.`, async () => {
+		// Arrange
+		const subject = await initializeEditor( {} );
+
+		// Act
+		fireEvent.press(
+			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+		);
+		fireEvent.changeText(
+			await waitFor( () =>
+				subject.getByPlaceholderText( 'Search blocks' )
+			),
+			'social icons'
+		);
+		fireEvent.press(
+			await waitFor( () =>
+				subject.getByA11yLabel( 'Social Icons block' )
+			)
+		);
+		fireEvent(
+			await waitFor( () =>
+				within(
+					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+				).getByTestId( 'block-list-wrapper' )
+			),
+			'layout',
+			{ nativeEvent: { layout: { width: 100 } } }
+		);
+
+		// Assert
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /WordPress has URL set/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /Facebook has no URL set/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /Twitter has no URL set/ )
+			)
+		).toBeDefined();
+		expect(
+			await waitFor( () =>
+				subject.getByA11yHint( /Instagram has no URL set/ )
+			)
+		).toBeDefined();
+	} );
+} );

package/src/spacer/controls.js

@@ -37,7 +37,7 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 			'vw',
 			'vh',
 		],
-		defaultValues: { px: '100', em: '10', rem: '10', vw: '10', vh: '25' },
+		defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 },
 	} );
 
 	const handleOnChange = ( unprocessedValue ) => {

package/src/spacer/controls.native.js

@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
  */
 import styles from './style.scss';
 
-const DEFAULT_VALUES = { px: '100', em: '10', rem: '10', vw: '10', vh: '25' };
+const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };
 
 function Controls( { attributes, context, setAttributes } ) {
 	const { orientation } = context;

package/src/table/edit.js

@@ -241,7 +241,7 @@ function TableEdit( {
 				rowIndex: newRowIndex,
 			} )
 		);
-		// Select the first cell of the new row
+		// Select the first cell of the new row.
 		setSelectedCell( {
 			sectionName,
 			rowIndex: newRowIndex,
@@ -296,7 +296,7 @@ function TableEdit( {
 				columnIndex: newColumnIndex,
 			} )
 		);
-		// Select the first cell of the new column
+		// Select the first cell of the new column.
 		setSelectedCell( {
 			rowIndex: 0,
 			columnIndex: newColumnIndex,

package/src/tag-cloud/style.scss

@@ -19,12 +19,17 @@
 		text-decoration: none;
 	}
 
-	&.is-style-outline a {
-		border: 1px solid currentColor;
-		font-size: unset !important; // !important Needed to override the inline styles.
-		margin-bottom: 1ch;
-		margin-right: 1ch;
-		padding: 1ch 2ch;
-		text-decoration: none !important; // !important needed to override generic post content link decoration.
+	&.is-style-outline {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1ch;
+
+		a {
+			border: 1px solid currentColor;
+			font-size: unset !important; // !important Needed to override the inline styles.
+			margin-right: 0;
+			padding: 1ch 2ch;
+			text-decoration: none !important; // !important needed to override generic post content link decoration.
+		}
 	}
 }