temp commit

docs/designers-developers/developers/data/data-core-blocks.md

@@ -59,6 +59,10 @@ _Returns_
 
 -   `Array`: Block Types.
 
+<a name="getBlockTypeWithVariationInfo" href="#getBlockTypeWithVariationInfo">#</a> **getBlockTypeWithVariationInfo**
+
+Undocumented declaration.
+
 <a name="getBlockVariations" href="#getBlockVariations">#</a> **getBlockVariations**
 
 Returns block variations by block name.

packages/block-editor/README.md

@@ -118,6 +118,27 @@ _Parameters_
 
 Undocumented declaration.
 
+<a name="BlockDescription" href="#BlockDescription">#</a> **BlockDescription**
+
+Renders the block's configured description as a string, or empty if the description
+cannot be determined.
+
+_Usage_
+
+```jsx
+<BlockDescription clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+```
+
+_Parameters_
+
+-   _props_ `Object`: 
+-   _props.clientId_ `string`: Client ID of block.
+-   _props.description_ `string`: Description
+
+_Returns_
+
+-   `?string`: Block Description.
+
 <a name="BlockEdit" href="#BlockEdit">#</a> **BlockEdit**
 
 Undocumented declaration.

packages/block-editor/src/components/block-card/index.js

@@ -2,15 +2,21 @@
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import BlockTitle from '../block-title';
+import BlockDescription from '../block-description';
 
-function BlockCard( { blockType: { icon, title, description } } ) {
+// title, icon, description
+function BlockCard( { clientId, blockType } ) {
+	const props = ( clientId && { clientId } ) || blockType;
 	return (
 		<div className="block-editor-block-card">
-			<BlockIcon icon={ icon } showColors />
+			<BlockIcon { ...props } showColors />
 			<div className="block-editor-block-card__content">
-				<h2 className="block-editor-block-card__title">{ title }</h2>
+				<h2 className="block-editor-block-card__title">
+					<BlockTitle { ...props } />
+				</h2>
 				<span className="block-editor-block-card__description">
-					{ description }
+					<BlockDescription { ...props } />
 				</span>
 			</div>
 		</div>

packages/block-editor/src/components/block-description/README.md

@@ -0,0 +1 @@
+// TODO

packages/block-editor/src/components/block-description/index.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __experimentalGetBlockTypeWithVariationInfo as getBlockTypeWithVariationInfo } from '@wordpress/blocks';
+
+/**
+ * Renders the block's configured description as a string, or empty if the description
+ * cannot be determined.
+ *
+ * @example
+ *
+ * ```jsx
+ * <BlockDescription clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
+ * ```
+ * @param {Object} props
+ * @param {string} props.clientId Client ID of block.
+ * @param {string} props.description Description
+ * @return {?string} Block Description.
+ */
+export default function BlockDescription( { clientId, description } ) {
+	const { attributes, name } = useSelect(
+		( select ) => {
+			const { __unstableGetBlockWithoutInnerBlocks } = select(
+				'core/block-editor'
+			);
+			const { name: _name, attributes: _attributes } =
+				__unstableGetBlockWithoutInnerBlocks( clientId ) || {};
+			return {
+				attributes: _attributes,
+				name: _name,
+			};
+		},
+		[ clientId ]
+	);
+	if ( description ) return description; // Prioritize explicitly given description
+	if ( ! name ) {
+		return null;
+	}
+
+	const blockType = getBlockTypeWithVariationInfo( name, attributes );
+	return blockType?.description ?? null;
+}

packages/block-editor/src/components/block-icon/index.js

@@ -6,21 +6,51 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useSelect } from '@wordpress/data';
+import { __experimentalGetBlockTypeWithVariationInfo as getBlockTypeWithVariationInfo } from '@wordpress/blocks';
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
 
-export default function BlockIcon( { icon, showColors = false, className } ) {
+export default function BlockIcon( {
+	clientId,
+	icon,
+	showColors = false,
+	className,
+} ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
-	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const { attributes, name } = useSelect(
+		( select ) => {
+			const { __unstableGetBlockWithoutInnerBlocks } = select(
+				'core/block-editor'
+			);
+			const { name: _name, attributes: _attributes } =
+				__unstableGetBlockWithoutInnerBlocks( clientId ) || {};
+			return {
+				attributes: _attributes,
+				name: _name,
+			};
+		},
+		[ clientId ]
+	);
+
+	// give priority to icon??
+	if ( name && ! icon ) {
+		const blockType = getBlockTypeWithVariationInfo( name, attributes );
+		if ( blockType?.icon ) {
+			icon = blockType.icon;
+		}
+	}
+
+	const renderedIcon = <Icon icon={ icon?.src || icon } />;
 	const style = showColors
 		? {
-				backgroundColor: icon && icon.background,
-				color: icon && icon.foreground,
+				backgroundColor: icon?.background,
+				color: icon?.foreground,
 		  }
 		: {};
 

packages/block-editor/src/components/block-inspector/index.js

@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	getBlockType,
+	__experimentalGetBlockTypeWithVariationInfo as getBlockTypeWithVariationInfo,
 	getUnregisteredTypeHandlerName,
 	hasBlockSupport,
 	store as blocksStore,
@@ -27,6 +28,7 @@ import DefaultStylePicker from '../default-style-picker';
 import BlockVariationTransforms from '../block-variation-transforms';
 const BlockInspector = ( {
 	blockType,
+	// selectedBlockType,
 	count,
 	hasBlockStyles,
 	selectedBlockClientId,
@@ -67,7 +69,7 @@ const BlockInspector = ( {
 
 	return (
 		<div className="block-editor-block-inspector">
-			<BlockCard blockType={ blockType } />
+			<BlockCard clientId={ selectedBlockClientId } />
 			<BlockVariationTransforms blockClientId={ selectedBlockClientId } />
 			{ hasBlockStyles && (
 				<div>
@@ -120,14 +122,22 @@ export default withSelect( ( select ) => {
 	const {
 		getSelectedBlockClientId,
 		getSelectedBlockCount,
+		getSelectedBlock,
 		getBlockName,
-	} = select( 'core/block-editor' );
+	} = select( 'core/block-editor' ); // TODO change string store value
 	const { getBlockStyles } = select( blocksStore );
 	const selectedBlockClientId = getSelectedBlockClientId();
 	const selectedBlockName =
 		selectedBlockClientId && getBlockName( selectedBlockClientId );
 	const blockType =
 		selectedBlockClientId && getBlockType( selectedBlockName );
+	const selectedBlock = getSelectedBlock();
+	const selectedBlockType =
+		selectedBlock &&
+		getBlockTypeWithVariationInfo(
+			selectedBlockName,
+			selectedBlock.attributes
+		);
 	const blockStyles =
 		selectedBlockClientId && getBlockStyles( selectedBlockName );
 	return {
@@ -136,5 +146,6 @@ export default withSelect( ( select ) => {
 		selectedBlockName,
 		selectedBlockClientId,
 		blockType,
+		selectedBlockType,
 	};
 } )( BlockInspector );

packages/block-editor/src/components/block-navigation/block-select-button.js

@@ -8,7 +8,8 @@ import classnames from 'classnames';
  */
 import {
 	__experimentalGetBlockLabel as getBlockLabel,
-	getBlockType,
+	// getBlockType,
+	__experimentalGetBlockTypeWithVariationInfo as getBlockTypeWithVariationInfo,
 } from '@wordpress/blocks';
 import { Button, VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -38,9 +39,11 @@ function BlockNavigationBlockSelectButton(
 	},
 	ref
 ) {
-	const { name, attributes } = block;
+	const { attributes } = block;
+	// const { name, attributes } = block;
 
-	const blockType = getBlockType( name );
+	// const blockType = getBlockType( name );
+	const blockType = getBlockTypeWithVariationInfo( block.name, attributes );
 	const blockDisplayName = getBlockLabel( blockType, attributes );
 	const instanceId = useInstanceId( BlockNavigationBlockSelectButton );
 	const descriptionId = `block-navigation-block-select-button__${ instanceId }`;

packages/block-editor/src/components/block-navigation/block-slot.js

@@ -6,7 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+// import { getBlockType } from '@wordpress/blocks';
+import { __experimentalGetBlockTypeWithVariationInfo as getBlockTypeWithVariationInfo } from '@wordpress/blocks';
 import { Fill, Slot, VisuallyHidden } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import {
@@ -54,8 +55,12 @@ function BlockNavigationBlockSlot( props, ref ) {
 					onFocus,
 				} = props;
 
-				const { name } = block;
-				const blockType = getBlockType( name );
+				// const { name } = block;
+				// const blockType = getBlockType( name );
+				const blockType = getBlockTypeWithVariationInfo(
+					block.name,
+					block.attributes
+				);
 				const descriptionId = `block-navigation-block-slot__${ instanceId }`;
 				const blockPositionDescription = getBlockPositionDescription(
 					position,

packages/block-editor/src/components/block-switcher/index.js

@@ -17,6 +17,7 @@ import {
 } from '@wordpress/components';
 import {
 	getBlockType,
+	__experimentalGetBlockTypeWithVariationInfo as getBlockTypeWithVariationInfo,
 	getPossibleBlockTransformations,
 	switchToBlockType,
 	cloneBlock,
@@ -120,8 +121,12 @@ export class BlockSwitcher extends Component {
 
 		let icon;
 		if ( isSelectionOfSameType ) {
-			const sourceBlockName = hoveredBlock.name;
-			const blockType = getBlockType( sourceBlockName );
+			// const sourceBlockName = hoveredBlock.name;
+			// const blockType = getBlockType( sourceBlockName );
+			const blockType = getBlockTypeWithVariationInfo(
+				hoveredBlock.name,
+				hoveredBlock.attributes
+			);
 			icon = blockType.icon;
 		} else {
 			icon = stack;
@@ -246,6 +251,7 @@ export default compose(
 		const blocks = getBlocksByClientId( clientIds );
 		const firstBlock = blocks && blocks.length === 1 ? blocks[ 0 ] : null;
 		const styles = firstBlock && getBlockStyles( firstBlock.name );
+
 		return {
 			blocks,
 			inserterItems: getInserterItems( rootClientId ),

packages/block-editor/src/components/block-title/index.js

@@ -8,7 +8,7 @@ import { truncate } from 'lodash';
  */
 import { useSelect } from '@wordpress/data';
 import {
-	getBlockType,
+	__experimentalGetBlockTypeWithVariationInfo as getBlockTypeWithVariationInfo,
 	__experimentalGetBlockLabel as getBlockLabel,
 } from '@wordpress/blocks';
 
@@ -30,15 +30,14 @@ import {
 export default function BlockTitle( { clientId } ) {
 	const { attributes, name } = useSelect(
 		( select ) => {
-			if ( ! clientId ) {
-				return {};
-			}
-			const { getBlockName, getBlockAttributes } = select(
+			const { __unstableGetBlockWithoutInnerBlocks } = select(
 				'core/block-editor'
 			);
+			const { name: _name, attributes: _attributes } =
+				__unstableGetBlockWithoutInnerBlocks( clientId ) || {};
 			return {
-				attributes: getBlockAttributes( clientId ),
-				name: getBlockName( clientId ),
+				attributes: _attributes,
+				name: _name,
 			};
 		},
 		[ clientId ]
@@ -48,7 +47,7 @@ export default function BlockTitle( { clientId } ) {
 		return null;
 	}
 
-	const blockType = getBlockType( name );
+	const blockType = getBlockTypeWithVariationInfo( name, attributes );
 	if ( ! blockType ) {
 		return null;
 	}

packages/block-editor/src/components/index.js

@@ -91,6 +91,7 @@ export {
 export { default as BlockSettingsMenu } from './block-settings-menu';
 export { default as BlockSettingsMenuControls } from './block-settings-menu-controls';
 export { default as BlockTitle } from './block-title';
+export { default as BlockDescription } from './block-description';
 export { default as BlockToolbar } from './block-toolbar';
 export {
 	default as CopyHandler,

packages/block-editor/src/store/selectors.js

@@ -1478,7 +1478,7 @@ export const getInserterItems = createSelector(
 				name: blockType.name,
 				initialAttributes: {},
 				title: blockType.title,
-				description: blockType.description,
+				description: 'hello theasd fasdf ', //blockType.description,
 				icon: blockType.icon,
 				category: blockType.category,
 				keywords: blockType.keywords,

packages/block-library/src/embed/index.js

@@ -28,4 +28,8 @@ export const settings = {
 	transforms,
 	variations,
 	deprecated,
+	variationMatcher: ( blockAttributes, variation ) => {
+		const { providerNameSlug } = blockAttributes || {};
+		return variation.name === providerNameSlug;
+	},
 };

packages/block-library/src/social-link/index.js

@@ -23,4 +23,8 @@ export const settings = {
 		'Display an icon linking to a social media profile or website.'
 	),
 	variations,
+	variationMatcher: ( blockAttributes, variation ) => {
+		const { service } = blockAttributes || {};
+		return variation.name === service;
+	},
 };

packages/blocks/src/api/index.js

@@ -43,6 +43,7 @@ export {
 	getGroupingBlockName,
 	getBlockType,
 	getBlockTypes,
+	getBlockTypeWithVariationInfo as __experimentalGetBlockTypeWithVariationInfo,
 	getBlockSupport,
 	hasBlockSupport,
 	getBlockVariations,

packages/blocks/src/api/registration.js

@@ -414,6 +414,14 @@ export function getBlockTypes() {
 	return select( blocksStore ).getBlockTypes();
 }
 
+// TODO jsdoc
+export function getBlockTypeWithVariationInfo( name, attributes ) {
+	return select( blocksStore ).getBlockTypeWithVariationInfo(
+		name,
+		attributes
+	);
+}
+
 /**
  * Returns the block support value for a feature, if defined.
  *