@wordpress/block-editor 13.2.0 → 13.3.0

package/src/store/defaults.js

@@ -33,7 +33,6 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
- * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -168,7 +167,6 @@ export const SETTINGS_DEFAULTS = {
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
-	__unstableGalleryWithImageBlocks: false,
 	__unstableIsPreviewMode: false,
 
 	// These settings will be completely revamped in the future.

package/src/store/defaults.native.js

@@ -10,9 +10,6 @@ const SETTINGS_DEFAULTS = {
 	...SETTINGS,
 	// Don't add the default font sizes for standard themes
 	fontSizes: undefined,
-	// FOR TESTING ONLY - Later, this will come from a REST API
-	// eslint-disable-next-line no-undef
-	__unstableGalleryWithImageBlocks: __DEV__,
 	alignWide: true,
 	supportsLayout: false,
 	__experimentalFeatures: {

package/src/store/private-keys.js

@@ -1,3 +1,4 @@
 export const globalStylesDataKey = Symbol( 'globalStylesDataKey' );
+export const globalStylesLinksDataKey = Symbol( 'globalStylesLinks' );
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );

package/src/style.scss

@@ -42,6 +42,7 @@
 @import "./components/rich-text/style.scss";
 @import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
+@import "./components/tabbed-sidebar/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
@@ -51,7 +52,6 @@
 @import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";
 @import "./hooks/layout.scss";
-@import "./hooks/position.scss";
 @import "./hooks/spacing.scss";
 @import "./hooks/typography.scss";
 

package/src/utils/format-font-style.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Formats font styles to human readable names.
+ *
+ * @param {string} fontStyle font style string
+ * @return {Object} new object with formatted font style
+ */
+export function formatFontStyle( fontStyle ) {
+	if ( ! fontStyle ) {
+		return {};
+	}
+
+	if ( typeof fontStyle === 'object' ) {
+		return fontStyle;
+	}
+
+	let name;
+
+	switch ( fontStyle ) {
+		case 'normal':
+			name = _x( 'Regular', 'font style' );
+			break;
+		case 'italic':
+			name = _x( 'Italic', 'font style' );
+			break;
+		case 'oblique':
+			name = _x( 'Oblique', 'font style' );
+			break;
+
+		default:
+			name = fontStyle;
+			break;
+	}
+
+	return { name, value: fontStyle };
+}

package/src/utils/format-font-weight.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Formats font weights to human readable names.
+ *
+ * @param {string} fontWeight font weight string
+ * @return {Object} new object with formatted font weight
+ */
+export function formatFontWeight( fontWeight ) {
+	if ( ! fontWeight ) {
+		return {};
+	}
+
+	if ( typeof fontWeight === 'object' ) {
+		return fontWeight;
+	}
+
+	let name;
+
+	switch ( fontWeight ) {
+		case 'normal':
+		case '400':
+			name = _x( 'Regular', 'font weight' );
+			break;
+		case 'bold':
+		case '700':
+			name = _x( 'Bold', 'font weight' );
+			break;
+		case '100':
+			name = _x( 'Thin', 'font weight' );
+			break;
+		case '200':
+			name = _x( 'Extra Light', 'font weight' );
+			break;
+		case '300':
+			name = _x( 'Light', 'font weight' );
+			break;
+		case '500':
+			name = _x( 'Medium', 'font weight' );
+			break;
+		case '600':
+			name = _x( 'Semi Bold', 'font weight' );
+			break;
+		case '800':
+			name = _x( 'Extra Bold', 'font weight' );
+			break;
+		case '900':
+			name = _x( 'Black', 'font weight' );
+			break;
+		case '1000':
+			name = _x( 'Extra Black', 'font weight' );
+			break;
+
+		default:
+			name = fontWeight;
+			break;
+	}
+
+	return { name, value: fontWeight };
+}

package/src/utils/get-editor-region.js

@@ -0,0 +1,31 @@
+/**
+ * Gets the editor region for a given editor canvas element or
+ * returns the passed element if no region is found
+ *
+ * @param { Object } editor The editor canvas element.
+ * @return { Object } The editor region or given editor element
+ */
+export default function getEditorRegion( editor ) {
+	if ( ! editor ) {
+		return null;
+	}
+
+	// If there are multiple editors, we need to find the iframe that contains our contentRef to make sure
+	// we're focusing the region that contains this editor.
+	const editorCanvas =
+		Array.from(
+			document.querySelectorAll( 'iframe[name="editor-canvas"]' ).values()
+		).find( ( iframe ) => {
+			// Find the iframe that contains our contentRef
+			const iframeDocument =
+				iframe.contentDocument || iframe.contentWindow.document;
+
+			return iframeDocument === editor.ownerDocument;
+		} ) ?? editor;
+
+	// The region is provivided by the editor, not the block-editor.
+	// We should send focus to the region if one is available to reuse the
+	// same interface for navigating landmarks. If no region is available,
+	// use the canvas instead.
+	return editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas;
+}

package/src/utils/get-font-styles-and-weights.js

@@ -0,0 +1,191 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { formatFontStyle } from './format-font-style';
+import { formatFontWeight } from './format-font-weight';
+
+const FONT_STYLES = [
+	{
+		name: _x( 'Regular', 'font style' ),
+		value: 'normal',
+	},
+	{
+		name: _x( 'Italic', 'font style' ),
+		value: 'italic',
+	},
+];
+
+const FONT_WEIGHTS = [
+	{
+		name: _x( 'Thin', 'font weight' ),
+		value: '100',
+	},
+	{
+		name: _x( 'Extra Light', 'font weight' ),
+		value: '200',
+	},
+	{
+		name: _x( 'Light', 'font weight' ),
+		value: '300',
+	},
+	{
+		name: _x( 'Regular', 'font weight' ),
+		value: '400',
+	},
+	{
+		name: _x( 'Medium', 'font weight' ),
+		value: '500',
+	},
+	{
+		name: _x( 'Semi Bold', 'font weight' ),
+		value: '600',
+	},
+	{
+		name: _x( 'Bold', 'font weight' ),
+		value: '700',
+	},
+	{
+		name: _x( 'Extra Bold', 'font weight' ),
+		value: '800',
+	},
+	{
+		name: _x( 'Black', 'font weight' ),
+		value: '900',
+	},
+	{
+		name: _x( 'Extra Black', 'font weight' ),
+		value: '1000',
+	},
+];
+
+/**
+ * Builds a list of font style and weight options based on font family faces.
+ * Defaults to the standard font styles and weights if no font family faces are provided.
+ *
+ * @param {Array} fontFamilyFaces font family faces array
+ * @return {Object} new object with combined and separated font style and weight properties
+ */
+export function getFontStylesAndWeights( fontFamilyFaces ) {
+	let fontStyles = [];
+	let fontWeights = [];
+	const combinedStyleAndWeightOptions = [];
+	const isSystemFont = ! fontFamilyFaces || fontFamilyFaces?.length === 0;
+	let isVariableFont = false;
+
+	fontFamilyFaces?.forEach( ( face ) => {
+		// Check for variable font by looking for a space in the font weight value. e.g. "100 900"
+		if ( /\s/.test( face.fontWeight.trim() ) ) {
+			isVariableFont = true;
+
+			// Find font weight start and end values.
+			let [ startValue, endValue ] = face.fontWeight.split( ' ' );
+			startValue = parseInt( startValue.slice( 0, 1 ) );
+			if ( endValue === '1000' ) {
+				endValue = 10;
+			} else {
+				endValue = parseInt( endValue.slice( 0, 1 ) );
+			}
+
+			// Create font weight options for available variable weights.
+			for ( let i = startValue; i <= endValue; i++ ) {
+				const fontWeightValue = `${ i.toString() }00`;
+				if (
+					! fontWeights.some(
+						( weight ) => weight.value === fontWeightValue
+					)
+				) {
+					fontWeights.push( formatFontWeight( fontWeightValue ) );
+				}
+			}
+		}
+
+		// Format font style and weight values.
+		const fontWeight = formatFontWeight( face.fontWeight );
+		const fontStyle = formatFontStyle( face.fontStyle );
+
+		// Create font style and font weight lists without duplicates.
+		if ( fontStyle ) {
+			if (
+				! fontStyles.some(
+					( style ) => style.value === fontStyle.value
+				)
+			) {
+				fontStyles.push( fontStyle );
+			}
+		}
+		if ( fontWeight ) {
+			if (
+				! fontWeights.some(
+					( weight ) => weight.value === fontWeight.value
+				)
+			) {
+				if ( ! isVariableFont ) {
+					fontWeights.push( fontWeight );
+				}
+			}
+		}
+	} );
+
+	// If there is no font weight of 600 or above, then include faux bold as an option.
+	if ( ! fontWeights.some( ( weight ) => weight.value >= '600' ) ) {
+		fontWeights.push( {
+			name: _x( 'Bold', 'font weight' ),
+			value: '700',
+		} );
+	}
+
+	// If there is no italic font style, then include faux italic as an option.
+	if ( ! fontStyles.some( ( style ) => style.value === 'italic' ) ) {
+		fontStyles.push( {
+			name: _x( 'Italic', 'font style' ),
+			value: 'italic',
+		} );
+	}
+
+	// Use default font styles and weights for system fonts.
+	if ( isSystemFont ) {
+		fontStyles = FONT_STYLES;
+		fontWeights = FONT_WEIGHTS;
+	}
+
+	// Use default styles and weights if there are no available styles or weights from the provided font faces.
+	fontStyles = fontStyles.length === 0 ? FONT_STYLES : fontStyles;
+	fontWeights = fontWeights.length === 0 ? FONT_WEIGHTS : fontWeights;
+
+	// Generate combined font style and weight options for available fonts.
+	fontStyles.forEach( ( { name: styleName, value: styleValue } ) => {
+		fontWeights.forEach( ( { name: weightName, value: weightValue } ) => {
+			const optionName =
+				styleValue === 'normal'
+					? weightName
+					: sprintf(
+							/* translators: 1: Font weight name. 2: Font style name. */
+							__( '%1$s %2$s' ),
+							weightName,
+							styleName
+					  );
+
+			combinedStyleAndWeightOptions.push( {
+				key: `${ styleValue }-${ weightValue }`,
+				name: optionName,
+				style: {
+					fontStyle: styleValue,
+					fontWeight: weightValue,
+				},
+			} );
+		} );
+	} );
+
+	return {
+		fontStyles,
+		fontWeights,
+		combinedStyleAndWeightOptions,
+		isSystemFont,
+		isVariableFont,
+	};
+}

package/src/utils/pasting.js

@@ -52,21 +52,14 @@ export function getPasteEventData( { clipboardData } ) {
 	let plainText = '';
 	let html = '';
 
-	// IE11 only supports `Text` as an argument for `getData` and will
-	// otherwise throw an invalid argument error, so we try the standard
-	// arguments first, then fallback to `Text` if they fail.
 	try {
 		plainText = clipboardData.getData( 'text/plain' );
 		html = clipboardData.getData( 'text/html' );
-	} catch ( error1 ) {
-		try {
-			html = clipboardData.getData( 'Text' );
-		} catch ( error2 ) {
-			// Some browsers like UC Browser paste plain text by default and
-			// don't support clipboardData at all, so allow default
-			// behaviour.
-			return;
-		}
+	} catch ( error ) {
+		// Some browsers like UC Browser paste plain text by default and
+		// don't support clipboardData at all, so allow default
+		// behaviour.
+		return;
 	}
 
 	// Remove Windows-specific metadata appended within copied HTML text.

package/src/utils/test/format-font-style.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import { formatFontStyle } from '../format-font-style';
+
+describe( 'formatFontStyle', () => {
+	it( 'should return empty object if style is not available', () => {
+		expect( formatFontStyle() ).toEqual( {} );
+	} );
+
+	it( 'should return the same object if style is already an object', () => {
+		const fontStyle = { name: 'Italic', value: 'italic' };
+		expect( formatFontStyle( fontStyle ) ).toEqual( fontStyle );
+	} );
+
+	it( 'should return the formatted font style', () => {
+		expect( formatFontStyle( 'normal' ) ).toEqual( {
+			name: 'Regular',
+			value: 'normal',
+		} );
+		expect( formatFontStyle( 'italic' ) ).toEqual( {
+			name: 'Italic',
+			value: 'italic',
+		} );
+		expect( formatFontStyle( 'oblique' ) ).toEqual( {
+			name: 'Oblique',
+			value: 'oblique',
+		} );
+		expect( formatFontStyle( 'oblique 40deg' ) ).toEqual( {
+			name: 'oblique 40deg',
+			value: 'oblique 40deg',
+		} );
+	} );
+} );

package/src/utils/test/format-font-weight.js

@@ -0,0 +1,66 @@
+/**
+ * Internal dependencies
+ */
+import { formatFontWeight } from '../format-font-weight';
+
+describe( 'formatFontWeight', () => {
+	it( 'should return empty object if weight is not available', () => {
+		expect( formatFontWeight() ).toEqual( {} );
+	} );
+
+	it( 'should return the same object if weight is already an object', () => {
+		const fontWeight = { name: 'Thin', value: '100' };
+		expect( formatFontWeight( fontWeight ) ).toEqual( fontWeight );
+	} );
+
+	it( 'should return the formatted font weight', () => {
+		expect( formatFontWeight( '100' ) ).toEqual( {
+			name: 'Thin',
+			value: '100',
+		} );
+		expect( formatFontWeight( '200' ) ).toEqual( {
+			name: 'Extra Light',
+			value: '200',
+		} );
+		expect( formatFontWeight( '300' ) ).toEqual( {
+			name: 'Light',
+			value: '300',
+		} );
+		expect( formatFontWeight( '400' ) ).toEqual( {
+			name: 'Regular',
+			value: '400',
+		} );
+		expect( formatFontWeight( '500' ) ).toEqual( {
+			name: 'Medium',
+			value: '500',
+		} );
+		expect( formatFontWeight( '600' ) ).toEqual( {
+			name: 'Semi Bold',
+			value: '600',
+		} );
+		expect( formatFontWeight( '700' ) ).toEqual( {
+			name: 'Bold',
+			value: '700',
+		} );
+		expect( formatFontWeight( '800' ) ).toEqual( {
+			name: 'Extra Bold',
+			value: '800',
+		} );
+		expect( formatFontWeight( '900' ) ).toEqual( {
+			name: 'Black',
+			value: '900',
+		} );
+		expect( formatFontWeight( '1000' ) ).toEqual( {
+			name: 'Extra Black',
+			value: '1000',
+		} );
+		expect( formatFontWeight( 'normal' ) ).toEqual( {
+			name: 'Regular',
+			value: 'normal',
+		} );
+		expect( formatFontWeight( 'bold' ) ).toEqual( {
+			name: 'Bold',
+			value: 'bold',
+		} );
+	} );
+} );