カスタムサムネイル仮実装

src/post-featured-image/blocks/group/block.json

@@ -0,0 +1,51 @@
+{
+	"apiVersion": 3,
+	"name": "mone/satori-group",
+	"category": "mone-block-cat",
+	"title": "Group",
+	"textdomain": "mone",
+	"ancestor": [ "mone/satori-wrapper" ],
+	"attributes": {
+		"display": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"moneSatori": {
+			"background": {
+				"backgroundImage": true,
+				"__experimentalDefaultControls": {
+					"backgroundImage": true
+				}
+			},
+			"blockGap": true,
+			"color": {
+				"gradients": true,
+				"__experimentalDefaultControls": {
+					"background": true,
+					"text": true
+				}
+			},
+			"layout": true,
+			"spacing": {
+				"padding": true
+			},
+			"__experimentalBorder": {
+				"color": true,
+				"radius": true,
+				"width": true,
+				"__experimentalDefaultControls": {
+					"color": true,
+					"radius": true,
+					"width": true
+				}
+			}
+		},
+		"inserter": false,
+		"customClassName": false,
+		"className": false,
+		"renaming": false,
+		"html": false
+	},
+	"editorScript": "file:./index.js"
+}

src/post-featured-image/blocks/group/edit.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	InnerBlocks,
+	InspectorControls,
+} from '@wordpress/block-editor';
+
+export const Group = ( props ) => {
+	const { style, children } = props;
+
+	return (
+		<>
+			<div style={ style }>{ children }</div>
+		</>
+	);
+};
+
+export default function Edit() {
+	const blockProps = useBlockProps( {
+		style: {
+			display: 'flex',
+		},
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		renderAppender: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	return (
+		<>
+			<InspectorControls></InspectorControls>
+			<div { ...innerBlocksProps }>{ innerBlocksProps.children }</div>
+		</>
+	);
+}

src/post-featured-image/blocks/group/index.js

@@ -0,0 +1,22 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { group as icon } from '@wordpress/icons';
+
+/**
+ * block type
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+registerBlockType( name, {
+	icon,
+	edit,
+	save,
+} );

src/post-featured-image/blocks/group/save.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export default function save() {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}

src/post-featured-image/blocks/post-author-icon/block.json

@@ -0,0 +1,37 @@
+{
+	"apiVersion": 3,
+	"name": "mone/satori-post-author-icon",
+	"category": "mone-block-cat",
+	"title": "Post Author Icon",
+	"textdomain": "mone",
+	"ancestor": [ "mone/satori-wrapper" ],
+	"attributes": {
+		"width": {
+			"type": "string"
+		},
+		"height": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"moneSatori": {
+			"__experimentalBorder": {
+				"color": true,
+				"radius": true,
+				"width": true,
+				"__experimentalDefaultControls": {
+					"color": true,
+					"radius": true,
+					"width": true
+				}
+			}
+		},
+		"inserter": false,
+		"customClassName": false,
+		"className": false,
+		"multiple": false,
+		"renaming": false,
+		"html": false
+	},
+	"editorScript": "file:./index.js"
+}

src/post-featured-image/blocks/post-author-icon/edit.js

@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import {
+	__experimentalUnitControl as UnitControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+export const PostAuthorIcon = ( props ) => {
+	const { authorIconUrl, style, attributes } = props;
+	// console.log("attributes",attributes);
+
+	return (
+		<>
+			{ authorIconUrl !== false ? (
+				<div
+					style={ {
+						...style,
+						...( attributes?.width && {
+							width: attributes?.width,
+						} ),
+						...( attributes?.height && {
+							height: attributes?.height,
+						} ),
+					} }
+				>
+					{ /* eslint-disable-next-line jsx-a11y/alt-text */ }
+					<img
+						style={ {
+							height: '100%',
+							maxWidth: '100%',
+							objectFit: 'cover',
+							...( attributes?.moneStyle?.border?.width && {
+								borderWidth:
+									attributes?.moneStyle?.border?.width,
+							} ),
+							...( attributes?.moneStyle?.border?.color && {
+								borderColor: attributes?.moneStyle.border.color,
+							} ),
+							...( attributes?.moneStyle?.borderRadius && {
+								borderRadius:
+									attributes?.moneStyle.borderRadius,
+							} ),
+						} }
+						src={ authorIconUrl }
+					/>
+				</div>
+			) : (
+				<div
+					style={ {
+						display: 'flex',
+					} }
+				>
+					{ __( 'Icon not found', 'mone' ) }
+				</div>
+			) }
+		</>
+	);
+};
+
+export default function Edit( props ) {
+	const {
+		attributes: { height, width },
+		setAttributes,
+	} = props;
+	const blockProps = useBlockProps( {
+		style: {
+			display: 'flex',
+		},
+	} );
+
+	const units = useCustomUnits( {
+		availableUnits: [ '%', 'px', 'em', 'rem' ],
+	} );
+
+	const onDimensionChange = ( dimension, nextValue ) => {
+		const parsedValue = parseFloat( nextValue );
+		if ( isNaN( parsedValue ) && nextValue ) {
+			return;
+		}
+		setAttributes( {
+			[ dimension ]: parsedValue < 0 ? '0' : nextValue,
+		} );
+	};
+
+	return (
+		<>
+			<InspectorControls group="dimensions">
+				<ToolsPanelItem
+					hasValue={ () => !! height }
+					label={ __( 'Height' ) }
+					onDeselect={ () => setAttributes( { height: undefined } ) }
+					resetAllFilter={ () => ( {
+						height: undefined,
+					} ) }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						label={ __( 'Height' ) }
+						labelPosition="top"
+						value={ height || '' }
+						min={ 0 }
+						onChange={ ( nextHeight ) =>
+							onDimensionChange( 'height', nextHeight )
+						}
+						units={ units }
+					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => !! width }
+					label={ __( 'Width' ) }
+					onDeselect={ () => setAttributes( { width: undefined } ) }
+					resetAllFilter={ () => ( {
+						width: undefined,
+					} ) }
+					isShownByDefault={ true }
+				>
+					<UnitControl
+						label={ __( 'Width' ) }
+						labelPosition="top"
+						value={ width || '' }
+						min={ 0 }
+						onChange={ ( nextWidth ) =>
+							onDimensionChange( 'width', nextWidth )
+						}
+						units={ units }
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
+			<div { ...blockProps }>{ __( 'Icon', 'mone' ) }</div>
+		</>
+	);
+}

src/post-featured-image/blocks/post-author-icon/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { commentAuthorAvatar as icon } from '@wordpress/icons';
+
+/**
+ * block type
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+registerBlockType( name, {
+	icon,
+	edit,
+} );

src/post-featured-image/blocks/post-author-name/block.json

@@ -0,0 +1,37 @@
+{
+	"apiVersion": 3,
+	"name": "mone/satori-post-author-name",
+	"category": "mone-block-cat",
+	"title": "Author Name",
+	"textdomain": "mone",
+	"ancestor": [ "mone/satori-wrapper" ],
+	"attributes": {},
+	"supports": {
+		"moneSatori": {
+			"color": {
+				"gradients": true,
+				"__experimentalDefaultControls": {
+					"background": true,
+					"text": true
+				}
+			},
+			"__experimentalBorder": {
+				"color": true,
+				"radius": true,
+				"width": true,
+				"__experimentalDefaultControls": {
+					"color": true,
+					"radius": true,
+					"width": true
+				}
+			}
+		},
+		"inserter": false,
+		"customClassName": false,
+		"className": false,
+		"multiple": false,
+		"renaming": false,
+		"html": false
+	},
+	"editorScript": "file:./index.js"
+}