@wordpress/block-library 8.29.0 → 8.30.0

package/src/block/edit.js

@@ -42,6 +42,25 @@ const { PARTIAL_SYNCING_SUPPORTED_BLOCKS } = unlock( patternsPrivateApis );
 
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
+function getLegacyIdMap( blocks, content, nameCount = {} ) {
+	let idToClientIdMap = {};
+	for ( const block of blocks ) {
+		if ( block?.innerBlocks?.length ) {
+			idToClientIdMap = {
+				...idToClientIdMap,
+				...getLegacyIdMap( block.innerBlocks, content, nameCount ),
+			};
+		}
+
+		const id = block.attributes.metadata?.id;
+		const clientId = block.clientId;
+		if ( id && content?.[ id ] ) {
+			idToClientIdMap[ clientId ] = id;
+		}
+	}
+	return idToClientIdMap;
+}
+
 const useInferredLayout = ( blocks, parentLayout ) => {
 	const initialInferredAlignmentRef = useRef();
 
@@ -101,25 +120,31 @@ function getOverridableAttributes( block ) {
 function applyInitialContentValuesToInnerBlocks(
 	blocks,
 	content = {},
-	defaultValues
+	defaultValues,
+	legacyIdMap
 ) {
 	return blocks.map( ( block ) => {
 		const innerBlocks = applyInitialContentValuesToInnerBlocks(
 			block.innerBlocks,
 			content,
-			defaultValues
+			defaultValues,
+			legacyIdMap
 		);
-		const blockId = block.attributes.metadata?.id;
-		if ( ! hasOverridableAttributes( block ) || ! blockId )
+		const metadataName =
+			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
+
+		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
 			return { ...block, innerBlocks };
+		}
+
 		const attributes = getOverridableAttributes( block );
 		const newAttributes = { ...block.attributes };
 		for ( const attributeKey of attributes ) {
-			defaultValues[ blockId ] ??= {};
-			defaultValues[ blockId ][ attributeKey ] =
+			defaultValues[ metadataName ] ??= {};
+			defaultValues[ metadataName ][ attributeKey ] =
 				block.attributes[ attributeKey ];
 
-			const contentValues = content[ blockId ]?.values;
+			const contentValues = content[ metadataName ];
 			if ( contentValues?.[ attributeKey ] !== undefined ) {
 				newAttributes[ attributeKey ] = contentValues[ attributeKey ];
 			}
@@ -142,29 +167,40 @@ function isAttributeEqual( attribute1, attribute2 ) {
 	return attribute1 === attribute2;
 }
 
-function getContentValuesFromInnerBlocks( blocks, defaultValues ) {
+function getContentValuesFromInnerBlocks( blocks, defaultValues, legacyIdMap ) {
 	/** @type {Record<string, { values: Record<string, unknown>}>} */
 	const content = {};
 	for ( const block of blocks ) {
 		if ( block.name === patternBlockName ) continue;
-		Object.assign(
-			content,
-			getContentValuesFromInnerBlocks( block.innerBlocks, defaultValues )
-		);
-		const blockId = block.attributes.metadata?.id;
-		if ( ! hasOverridableAttributes( block ) || ! blockId ) continue;
+		if ( block.innerBlocks.length ) {
+			Object.assign(
+				content,
+				getContentValuesFromInnerBlocks(
+					block.innerBlocks,
+					defaultValues,
+					legacyIdMap
+				)
+			);
+		}
+		const metadataName =
+			legacyIdMap?.[ block.clientId ] ?? block.attributes.metadata?.name;
+		if ( ! metadataName || ! hasOverridableAttributes( block ) ) {
+			continue;
+		}
+
 		const attributes = getOverridableAttributes( block );
+
 		for ( const attributeKey of attributes ) {
 			if (
 				! isAttributeEqual(
 					block.attributes[ attributeKey ],
-					defaultValues[ blockId ][ attributeKey ]
+					defaultValues?.[ metadataName ]?.[ attributeKey ]
 				)
 			) {
-				content[ blockId ] ??= { values: {}, blockName: block.name };
+				content[ metadataName ] ??= {};
 				// TODO: We need a way to represent `undefined` in the serialized overrides.
 				// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
-				content[ blockId ].values[ attributeKey ] =
+				content[ metadataName ][ attributeKey ] =
 					block.attributes[ attributeKey ] === undefined
 						? // TODO: We use an empty string to represent undefined for now until
 						  // we support a richer format for overrides and the block binding API.
@@ -278,8 +314,15 @@ export default function ReusableBlockEdit( {
 		[ editedRecord.blocks, editedRecord.content ]
 	);
 
+	const legacyIdMap = useRef( {} );
+
 	// Apply the initial overrides from the pattern block to the inner blocks.
 	useEffect( () => {
+		// Build a map of clientIds to the old nano id system to provide back compat.
+		legacyIdMap.current = getLegacyIdMap(
+			initialBlocks,
+			initialContent.current
+		);
 		defaultContent.current = {};
 		const originalEditingMode = getBlockEditingMode( patternClientId );
 		// Replace the contents of the blocks with the overrides.
@@ -291,7 +334,8 @@ export default function ReusableBlockEdit( {
 					applyInitialContentValuesToInnerBlocks(
 						initialBlocks,
 						initialContent.current,
-						defaultContent.current
+						defaultContent.current,
+						legacyIdMap.current
 					)
 				);
 			} );
@@ -343,7 +387,8 @@ export default function ReusableBlockEdit( {
 					setAttributes( {
 						content: getContentValuesFromInnerBlocks(
 							blocks,
-							defaultContent.current
+							defaultContent.current,
+							legacyIdMap.current
 						),
 					} );
 				} );

package/src/block/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/block` block on server.
  *
+ * @global WP_Embed $wp_embed
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Rendered HTML of the referenced block.
@@ -46,26 +48,35 @@ function render_block_core_block( $attributes ) {
 	$content = $wp_embed->run_shortcode( $reusable_block->post_content );
 	$content = $wp_embed->autoembed( $content );
 
-	// Back compat, the content attribute was previously named overrides and
-	// had a slightly different format. For blocks that have not been migrated,
-	// also convert the format here so that the provided `pattern/overrides`
-	// context is correct.
-	if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
-		$migrated_content = array();
-		foreach ( $attributes['overrides'] as $id => $values ) {
-			$migrated_content[ $id ] = array(
-				'values' => $values,
-			);
+	// Back compat.
+	// For blocks that have not been migrated in the editor, add some back compat
+	// so that front-end rendering continues to work.
+
+	// This matches the `v2` deprecation. Removes the inner `values` property
+	// from every item.
+	if ( isset( $attributes['content'] ) ) {
+		foreach ( $attributes['content'] as &$content_data ) {
+			if ( isset( $content_data['values'] ) ) {
+				$is_assoc_array = is_array( $content_data['values'] ) && ! wp_is_numeric_array( $content_data['values'] );
+
+				if ( $is_assoc_array ) {
+					$content_data = $content_data['values'];
+				}
+			}
 		}
-		$attributes['content'] = $migrated_content;
 	}
-	$has_pattern_overrides = isset( $attributes['content'] );
+
+	// This matches the `v1` deprecation. Rename `overrides` to `content`.
+	if ( isset( $attributes['overrides'] ) && ! isset( $attributes['content'] ) ) {
+		$attributes['content'] = $attributes['overrides'];
+	}
 
 	/**
 	 * We set the `pattern/overrides` context through the `render_block_context`
 	 * filter so that it is available when a pattern's inner blocks are
 	 * rendering via do_blocks given it only receives the inner content.
 	 */
+	$has_pattern_overrides = isset( $attributes['content'] );
 	if ( $has_pattern_overrides ) {
 		$filter_block_context = static function ( $context ) use ( $attributes ) {
 			$context['pattern/overrides'] = $attributes['content'];

package/src/button/edit.js

@@ -45,6 +45,7 @@ import {
 	createBlock,
 	cloneBlock,
 	getDefaultBlockName,
+	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -123,7 +124,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 	}
 
 	return (
-		<PanelBody title={ __( 'Width settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<ButtonGroup aria-label={ __( 'Button width' ) }>
 				{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
 					return (
@@ -239,7 +240,7 @@ function ButtonEdit( props ) {
 			}
 
 			const blockBindingsSource = unlock(
-				select( blockEditorStore )
+				select( blocksStore )
 			).getBlockBindingsSource( metadata?.bindings?.url?.source );
 
 			return {
@@ -328,7 +329,7 @@ function ButtonEdit( props ) {
 						title={ __( 'Unlink' ) }
 						shortcut={ displayShortcut.primaryShift( 'k' ) }
 						onClick={ unlink }
-						isActive={ true }
+						isActive
 					/>
 				) }
 			</BlockControls>

package/src/buttons/edit.native.js

@@ -106,7 +106,7 @@ export default function ButtonsEdit( {
 	const renderFooterAppender = useRef( () => (
 		<View style={ styles.appenderContainer }>
 			<InnerBlocks.ButtonBlockAppender
-				isFloating={ true }
+				isFloating
 				onAddBlock={ onAddNextButton }
 			/>
 		</View>

package/src/buttons/transforms.js

@@ -4,6 +4,11 @@
 import { createBlock } from '@wordpress/blocks';
 import { __unstableCreateElement as createElement } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
+
 const transforms = {
 	from: [
 		{
@@ -33,10 +38,8 @@ const transforms = {
 					{},
 					// Loop the selected buttons.
 					buttons.map( ( attributes ) => {
-						const element = createElement(
-							document,
-							attributes.content
-						);
+						const { content, metadata } = attributes;
+						const element = createElement( document, content );
 						// Remove any HTML tags.
 						const text = element.innerText || '';
 						// Get first url.
@@ -46,6 +49,13 @@ const transforms = {
 						return createBlock( 'core/button', {
 							text,
 							url,
+							metadata: getTransformedMetadata(
+								metadata,
+								'core/button',
+								( { content: contentBinding } ) => ( {
+									text: contentBinding,
+								} )
+							),
 						} );
 					} )
 				),

package/src/calendar/index.php

@@ -8,6 +8,9 @@
 /**
  * Renders the `core/calendar` block on server.
  *
+ * @global int $monthnum.
+ * @global int $year.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the block content.
@@ -117,6 +120,8 @@ function block_core_calendar_has_published_posts() {
  * Queries the database for any published post and saves
  * a flag whether any published post exists or not.
  *
+ * @global wpdb $wpdb WordPress database abstraction object.
+ *
  * @return bool Has any published posts or not.
  */
 function block_core_calendar_update_has_published_posts() {

package/src/code/transforms.js

@@ -4,6 +4,11 @@
 import { createBlock } from '@wordpress/blocks';
 import { create, toHTMLString } from '@wordpress/rich-text';
 
+/**
+ * Internal dependencies
+ */
+import { getTransformedMetadata } from '../utils/get-transformed-metadata';
+
 const transforms = {
 	from: [
 		{
@@ -14,17 +19,21 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/code', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/code', {
+					content,
+					metadata: getTransformedMetadata( metadata, 'core/code' ),
+				} ),
 		},
 		{
 			type: 'block',
 			blocks: [ 'core/html' ],
-			transform: ( { content: text } ) => {
+			transform: ( { content: text, metadata } ) => {
 				return createBlock( 'core/code', {
 					// The HTML is plain text (with plain line breaks), so
 					// convert it to rich text.
 					content: toHTMLString( { value: create( { text } ) } ),
+					metadata: getTransformedMetadata( metadata, 'core/code' ),
 				} );
 			},
 		},
@@ -51,8 +60,14 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
-			transform: ( { content } ) =>
-				createBlock( 'core/paragraph', { content } ),
+			transform: ( { content, metadata } ) =>
+				createBlock( 'core/paragraph', {
+					content,
+					metadata: getTransformedMetadata(
+						metadata,
+						'core/paragraph'
+					),
+				} ),
 		},
 	],
 };

package/src/columns/edit.js

@@ -139,18 +139,19 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 			// If adding a new column, assign width to the new column equal to
 			// as if it were `1 / columns` of the total available space.
 			const newColumnWidth = toWidthPrecision( 100 / newColumns );
+			const newlyAddedColumns = newColumns - previousColumns;
 
 			// Redistribute in consideration of pending block insertion as
 			// constraining the available working width.
 			const widths = getRedistributedColumnWidths(
 				innerBlocks,
-				100 - newColumnWidth
+				100 - newColumnWidth * newlyAddedColumns
 			);
 
 			innerBlocks = [
 				...getMappedColumnWidths( innerBlocks, widths ),
 				...Array.from( {
-					length: newColumns - previousColumns,
+					length: newlyAddedColumns,
 				} ).map( () => {
 					return createBlock( 'core/column', {
 						width: `${ newColumnWidth }%`,

package/src/comment-author-avatar/edit.js

@@ -48,7 +48,7 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Avatar Settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				<RangeControl
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize

package/src/comments/index.php

@@ -16,6 +16,8 @@
  * the block is in legacy mode. If not, the HTML generated in the editor is
  * returned instead.
  *
+ * @global WP_Post  $post     Global post object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.

package/src/cover/edit/block-controls.js

@@ -8,6 +8,7 @@ import {
 	MediaReplaceFlow,
 	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
 	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -15,6 +16,9 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { ALLOWED_MEDIA_TYPES } from '../shared';
+import { unlock } from '../../lock-unlock';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 export default function CoverBlockControls( {
 	attributes,
@@ -30,7 +34,10 @@ export default function CoverBlockControls( {
 	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
 	const [ prevMinHeightUnit, setPrevMinHeightUnit ] =
 		useState( minHeightUnit );
-	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
+	const isMinFullHeight =
+		minHeightUnit === 'vh' &&
+		minHeight === 100 &&
+		! attributes?.style?.dimensions?.aspectRatio;
 	const toggleMinFullHeight = () => {
 		if ( isMinFullHeight ) {
 			// If there aren't previous values, take the default ones.
@@ -51,10 +58,17 @@ export default function CoverBlockControls( {
 		setPrevMinHeightValue( minHeight );
 		setPrevMinHeightUnit( minHeightUnit );
 
-		// Set full height.
+		// Set full height, and clear any aspect ratio value.
 		return setAttributes( {
 			minHeight: 100,
 			minHeightUnit: 'vh',
+			style: cleanEmptyObject( {
+				...attributes?.style,
+				dimensions: {
+					...attributes?.style?.dimensions,
+					aspectRatio: undefined, // Reset aspect ratio when minHeight is set.
+				},
+			} ),
 		} );
 	};
 

package/src/cover/edit/index.js

@@ -464,7 +464,7 @@ function CoverEdit( {
 					>
 						<div className="wp-block-cover__placeholder-background-options">
 							<ColorPalette
-								disableCustomColors={ true }
+								disableCustomColors
 								value={ overlayColor.color }
 								onChange={ onSetOverlayColor }
 								clearable={ false }
@@ -525,7 +525,7 @@ function CoverEdit( {
 				{ ! url && useFeaturedImage && (
 					<Placeholder
 						className="wp-block-cover__image--placeholder-image"
-						withIllustration={ true }
+						withIllustration
 					/>
 				) }
 

package/src/cover/edit/inspector-controls.js

@@ -304,7 +304,7 @@ export default function CoverInspectorControls( {
 						minHeight: undefined,
 						minHeightUnit: undefined,
 					} ) }
-					isShownByDefault={ true }
+					isShownByDefault
 					panelId={ clientId }
 				>
 					<CoverHeightInput

package/src/cover/edit/resizable-cover-popover.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
@@ -40,10 +40,6 @@ export default function ResizableCoverPopover( {
 	...props
 } ) {
 	const [ isResizing, setIsResizing ] = useState( false );
-	const dimensions = useMemo(
-		() => ( { height, minHeight, width } ),
-		[ minHeight, height, width ]
-	);
 
 	const resizableBoxProps = {
 		className: classnames( className, { 'is-resizing': isResizing } ),
@@ -75,7 +71,6 @@ export default function ResizableCoverPopover( {
 	return (
 		<ResizableBoxPopover
 			className="block-library-cover__resizable-box-popover"
-			__unstableRefreshSize={ dimensions }
 			resizableBoxProps={ resizableBoxProps }
 			{ ...props }
 		/>

package/src/cover/edit.native.js

@@ -538,7 +538,7 @@ const Cover = ( {
 						<BottomSheetConsumer>
 							{ ( { shouldEnableBottomSheetScroll } ) => (
 								<ColorPalette
-									enableCustomColor={ true }
+									enableCustomColor
 									customColorIndicatorStyles={
 										styles.paletteColorIndicator
 									}

package/src/cover/style.scss

@@ -8,9 +8,10 @@
 	align-items: center;
 	padding: 1em;
 	// Prevent the `wp-block-cover__background` span from overflowing the container when border-radius is applied.
+	// `overflow: hidden` is provided as a fallback for browsers that don't support `overflow: clip`.
+	overflow: hidden;
 	// Use clip instead of overflow: hidden so that sticky position works on child elements.
-	// Use overflow-x instead of overflow so that aspect-ratio allows content to expand the area of the cover block.
-	overflow-x: clip;
+	overflow: clip;
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.

package/src/file/deprecated.js

@@ -131,7 +131,7 @@ const v3 = {
 								'wp-block-file__button',
 								__experimentalGetElementClassName( 'button' )
 							) }
-							download={ true }
+							download
 							aria-describedby={ describedById }
 						>
 							<RichText.Content value={ downloadButtonText } />
@@ -259,7 +259,7 @@ const v2 = {
 						<a
 							href={ href }
 							className="wp-block-file__button"
-							download={ true }
+							download
 							aria-describedby={ describedById }
 						>
 							<RichText.Content value={ downloadButtonText } />
@@ -372,7 +372,7 @@ const v1 = {
 						<a
 							href={ href }
 							className="wp-block-file__button"
-							download={ true }
+							download
 						>
 							<RichText.Content value={ downloadButtonText } />
 						</a>

package/src/file/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import {
 	__unstableGetAnimateClassName as getAnimateClassName,
 	ResizableBox,
@@ -36,6 +36,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import FileBlockInspector from './inspector';
 import { browserSupportsPdfs } from './utils';
 import removeAnchorTag from '../utils/remove-anchor-tag';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 
 export const MIN_PREVIEW_HEIGHT = 200;
 export const MAX_PREVIEW_HEIGHT = 2000;
@@ -72,7 +73,6 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		displayPreview,
 		previewHeight,
 	} = attributes;
-	const { getSettings } = useSelect( blockEditorStore );
 	const { media } = useSelect(
 		( select ) => ( {
 			media:
@@ -86,20 +86,13 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { toggleSelection } = useDispatch( blockEditorStore );
 
-	useEffect( () => {
-		// Upload a file drag-and-dropped into the editor.
-		if ( isBlobURL( href ) ) {
-			const file = getBlobByURL( href );
-
-			getSettings().mediaUpload( {
-				filesList: [ file ],
-				onFileChange: ( [ newMedia ] ) => onSelectFile( newMedia ),
-				onError: onUploadError,
-			} );
-
-			revokeBlobURL( href );
-		}
+	useUploadMediaFromBlobURL( {
+		url: href,
+		onChange: onSelectFile,
+		onError: onUploadError,
+	} );
 
+	useEffect( () => {
 		if ( RichText.isEmpty( downloadButtonText ) ) {
 			setAttributes( {
 				downloadButtonText: _x( 'Download', 'button label' ),

package/src/file/edit.native.js

@@ -282,7 +282,7 @@ export class FileEdit extends Component {
 						value={ textLinkHref }
 						onChange={ this.onChangeLinkDestinationOption }
 						options={ linkDestinationOptions }
-						hideCancelButton={ true }
+						hideCancelButton
 					/>
 					<ToggleControl
 						icon={ external }
@@ -469,7 +469,7 @@ export class FileEdit extends Component {
 										tagName="p"
 										underlineColorAndroid="transparent"
 										value={ fileName }
-										deleteEnter={ true }
+										deleteEnter
 										textAlign={ this.getTextAlignmentForAlignment(
 											align
 										) }
@@ -505,7 +505,7 @@ export class FileEdit extends Component {
 												textAlign="center"
 												minWidth={ minWidth }
 												maxWidth={ this.state.maxWidth }
-												deleteEnter={ true }
+												deleteEnter
 												style={ styles.buttonText }
 												value={ downloadButtonText }
 												placeholder={ placeholderText }
@@ -565,7 +565,7 @@ export class FileEdit extends Component {
 		return (
 			<MediaUpload
 				allowedTypes={ [ MEDIA_TYPE_ANY ] }
-				isReplacingMedia={ true }
+				isReplacingMedia
 				onSelect={ this.onSelectFile }
 				render={ ( { open, getMediaOptions } ) => {
 					return this.getFileComponent( open, getMediaOptions );

package/src/file/save.js

@@ -73,7 +73,7 @@ export default function save( { attributes } ) {
 							'wp-block-file__button',
 							__experimentalGetElementClassName( 'button' )
 						) }
-						download={ true }
+						download
 						aria-describedby={ describedById }
 					>
 						<RichText.Content value={ downloadButtonText } />

package/src/footnotes/index.php

@@ -105,7 +105,7 @@ function register_block_core_footnotes_post_meta() {
 		}
 	}
 }
-/**
+/*
  * Most post types are registered at priority 10, so use priority 20 here in
  * order to catch them.
 */