@wordpress/block-library 6.1.0 → 7.0.0

package/src/read-more/edit.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+export default function ReadMore( {
+	attributes: { content, linkTarget },
+	setAttributes,
+	insertBlocksAfter,
+} ) {
+	const blockProps = useBlockProps();
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<RichText
+				tagName="a"
+				aria-label={ __( '"Read more" link text' ) }
+				placeholder={ __( 'Read more' ) }
+				value={ content }
+				onChange={ ( newValue ) =>
+					setAttributes( { content: newValue } )
+				}
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
+				withoutInteractiveFormatting={ true }
+				{ ...blockProps }
+			/>
+		</>
+	);
+}

package/src/read-more/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { link as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};

package/src/read-more/index.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Server-side rendering of the `core/read-more` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/read-more` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string  Returns the post link.
+ */
+function render_block_core_read_more( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$post_ID            = $block->context['postId'];
+	$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
+	$more_text          = ! empty( $attributes['content'] ) ? wp_kses_post( $attributes['content'] ) : __( 'Read more' );
+	return sprintf(
+		'<a %1s href="%2s" target="%3s">%4s</a>',
+		$wrapper_attributes,
+		get_the_permalink( $post_ID ),
+		esc_attr( $attributes['linkTarget'] ),
+		$more_text
+	);
+}
+
+/**
+ * Registers the `core/read-more` block on the server.
+ */
+function register_block_core_read_more() {
+	register_block_type_from_metadata(
+		__DIR__ . '/read-more',
+		array(
+			'render_callback' => 'render_block_core_read_more',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_read_more' );

package/src/read-more/style.scss

@@ -0,0 +1,12 @@
+.wp-block-read-more {
+	display: block;
+	width: fit-content;
+	&:not([style*="text-decoration"]) {
+		text-decoration: none;
+
+		&:focus,
+		&:active {
+			text-decoration: none;
+		}
+	}
+}

package/src/search/block.json

@@ -44,7 +44,11 @@
 		"align": [ "left", "center", "right" ],
 		"color": {
 			"gradients": true,
-			"__experimentalSkipSerialization": true
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"__experimentalBorder": {
 			"color": true,

package/src/search/edit.js

@@ -392,7 +392,8 @@ export default function SearchEdit( {
 			borderWidth: isButtonPositionInside ? borderWidth : undefined,
 		};
 
-		const isNonZeroBorderRadius = parseInt( borderRadius, 10 ) !== 0;
+		const isNonZeroBorderRadius =
+			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
 
 		if ( isButtonPositionInside && isNonZeroBorderRadius ) {
 			// We have button inside wrapper and a border radius value to apply.

package/src/search/index.php

@@ -42,16 +42,18 @@ function render_block_core_search( $attributes ) {
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 
+	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
+
 	$label_markup = sprintf(
 		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
 		esc_attr( $input_id ),
-		empty( $attributes['label'] ) ? __( 'Search' ) : esc_html( $attributes['label'] )
+		$label_inner_html
 	);
 	if ( $show_label && ! empty( $attributes['label'] ) ) {
 		$label_markup = sprintf(
 			'<label for="%1$s" class="wp-block-search__label">%2$s</label>',
 			$input_id,
-			esc_html( $attributes['label'] )
+			$label_inner_html
 		);
 	}
 
@@ -76,7 +78,7 @@ function render_block_core_search( $attributes ) {
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
-				$button_internal_markup = esc_html( $attributes['buttonText'] );
+				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
 			$button_classes        .= ' has-icon';

package/src/separator/style.scss

@@ -3,11 +3,6 @@
 	border-bottom: 1px solid currentColor;
 	// Default, thin style, is stored in theme.scss so it can be opted out of
 
-	// Wide style
-	&.is-style-wide {
-		border-bottom-width: 1px;
-	}
-
 	// Dots style
 	&.is-style-dots {
 		// Override any background themes often set on the hr tag for this style.

package/src/site-logo/edit.js

@@ -396,11 +396,7 @@ export default function LogoEdit( {
 			siteLogoId: _siteLogoId,
 			canUserEdit: _canUserEdit,
 			url: siteData?.url,
-			mediaItemData: mediaItem && {
-				id: mediaItem.id,
-				url: mediaItem.source_url,
-				alt: mediaItem.alt_text,
-			},
+			mediaItemData: mediaItem,
 			isRequestingMediaItem: _isRequestingMediaItem,
 			siteIconId: _siteIconId,
 		};
@@ -427,9 +423,9 @@ export default function LogoEdit( {
 
 	let alt = null;
 	if ( mediaItemData ) {
-		alt = mediaItemData.alt;
-		if ( logoUrl !== mediaItemData.url ) {
-			setLogoUrl( mediaItemData.url );
+		alt = mediaItemData.alt_text;
+		if ( logoUrl !== mediaItemData.source_url ) {
+			setLogoUrl( mediaItemData.source_url );
 		}
 	}
 

package/src/site-tagline/block.json

@@ -16,7 +16,11 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {
-			"gradients": true
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"margin": true,

package/src/site-tagline/edit.js

@@ -15,8 +15,13 @@ import {
 	RichText,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
-export default function SiteTaglineEdit( { attributes, setAttributes } ) {
+export default function SiteTaglineEdit( {
+	attributes,
+	setAttributes,
+	insertBlocksAfter,
+} ) {
 	const { textAlign } = attributes;
 	const [ siteTagline, setSiteTagline ] = useEntityProp(
 		'root',
@@ -46,6 +51,10 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) {
 			placeholder={ __( 'Write site tagline…' ) }
 			tagName="p"
 			value={ siteTagline }
+			disableLineBreaks
+			__unstableOnSplitAtEnd={ () =>
+				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+			}
 			{ ...blockProps }
 		/>
 	) : (

package/src/site-tagline/index.php

@@ -23,7 +23,7 @@ function render_block_core_site_tagline( $attributes ) {
 	return sprintf(
 		'<p %1$s>%2$s</p>',
 		$wrapper_attributes,
-		esc_html( $site_tagline )
+		$site_tagline
 	);
 }
 

package/src/site-title/block.json

@@ -31,7 +31,12 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
 		},
 		"spacing": {
 			"padding": true,

package/src/site-title/index.php

@@ -35,7 +35,6 @@ function render_block_core_site_title( $attributes ) {
 		);
 		if ( '_blank' === $attributes['linkTarget'] ) {
 			$link_attrs[] = 'target="_blank"';
-			$link_attrs[] = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
 		}
 		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), esc_html( $site_title ) );
 	}
@@ -45,7 +44,8 @@ function render_block_core_site_title( $attributes ) {
 		'<%1$s %2$s>%3$s</%1$s>',
 		$tag_name,
 		$wrapper_attributes,
-		$site_title
+		// already pre-escaped if it is a link.
+		$attributes['isLink'] ? $site_title : esc_html( $site_title )
 	);
 }
 

package/src/social-link/block.json

@@ -20,6 +20,7 @@
 	},
 	"usesContext": [
 		"openInNewTab",
+		"showLabels",
 		"iconColorValue",
 		"iconBackgroundColorValue"
 	],

package/src/social-link/edit.js

@@ -70,7 +70,7 @@ const SocialLinkEdit = ( {
 	setAttributes,
 } ) => {
 	const { url, service, label } = attributes;
-	const { iconColorValue, iconBackgroundColorValue } = context;
+	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
@@ -79,6 +79,7 @@ const SocialLinkEdit = ( {
 	const ref = useRef();
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
+	const socialLinkLabel = label ?? socialLinkName;
 	const blockProps = useBlockProps( {
 		className: classes,
 		style: {
@@ -113,8 +114,19 @@ const SocialLinkEdit = ( {
 				</PanelBody>
 			</InspectorControls>
 			<li { ...blockProps }>
-				<Button ref={ ref } onClick={ () => setPopover( true ) }>
+				<Button
+					className="wp-block-social-link-anchor"
+					ref={ ref }
+					onClick={ () => setPopover( true ) }
+				>
 					<IconComponent />
+					<span
+						className={ classNames( 'wp-block-social-link-label', {
+							'screen-reader-text': ! showLabels,
+						} ) }
+					>
+						{ socialLinkLabel }
+					</span>
 					{ isSelected && showURLPopover && (
 						<SocialLinkURLPopover
 							url={ url }