diff --git a/src/blocks/block-coauthor-avatar/block.json b/src/blocks/block-coauthor-avatar/block.json index 14ea30f8..df6b33a7 100644 --- a/src/blocks/block-coauthor-avatar/block.json +++ b/src/blocks/block-coauthor-avatar/block.json @@ -30,11 +30,9 @@ } } }, - "usesContext": [ - "co-authors-plus/author" - ], + "usesContext": [ "co-authors-plus/author" ], "attributes": { - "size" : { + "size": { "type": "number", "default": 24 }, diff --git a/src/blocks/block-coauthor-avatar/edit.js b/src/blocks/block-coauthor-avatar/edit.js index 56db0856..46dfee66 100644 --- a/src/blocks/block-coauthor-avatar/edit.js +++ b/src/blocks/block-coauthor-avatar/edit.js @@ -1,6 +1,16 @@ import { __ } from '@wordpress/i18n'; -import { useBlockProps, InspectorControls, __experimentalUseBorderProps as useBorderProps, store as blockEditorStore } from '@wordpress/block-editor'; -import { SelectControl, PanelBody, ToggleControl, TextControl } from '@wordpress/components'; +import { + useBlockProps, + InspectorControls, + __experimentalUseBorderProps as useBorderProps, + store as blockEditorStore, +} from '@wordpress/block-editor'; +import { + SelectControl, + PanelBody, + ToggleControl, + TextControl, +} from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import PlaceholderImage from '../components/placeholder-image'; @@ -14,135 +24,143 @@ import PlaceholderImage from '../components/placeholder-image'; * @return {WPElement} Element to render. */ export default function Edit( { context, attributes, setAttributes } ) { - const { isLink, rel, size, verticalAlign } = attributes; - const authorPlaceholder = useSelect( select => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), []); - const author = context['co-authors-plus/author'] || authorPlaceholder; + const authorPlaceholder = useSelect( + ( select ) => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), + [] + ); + const author = context[ 'co-authors-plus/author' ] || authorPlaceholder; const { avatar_urls } = author; if ( ! avatar_urls || 0 === avatar_urls.length ) { return null; } - const sizes = Object.keys( avatar_urls ).map( (size) => { + const sizes = Object.keys( avatar_urls ).map( ( size ) => { return { value: size, - label: `${ size } x ${ size }` + label: `${ size } x ${ size }`, }; - }); + } ); const borderProps = useBorderProps( attributes ); - const src = avatar_urls[size] ?? ''; - + const src = avatar_urls[ size ] ?? ''; + return ( <> -
- { - '' === src ? - ( +
+ { '' === src ? ( ) : ( - ) - } -
- - - { - setAttributes( { - size: Number( nextSize ) - } ); - } } - /> - setAttributes( { isLink: ! isLink } ) } - checked={ isLink } - /> - { isLink && ( - - setAttributes( { rel: newRel } ) - } + style={ { ...borderProps.style, verticalAlign } } + width={ size } + height={ size } + src={ `${ avatar_urls[ size ] }` } /> ) } - - - { - setAttributes( { - verticalAlign: '' === value ? undefined : value - } ); - } } - help={ __( 'Vertical alignment defaults to bottom in the block layout and middle in the inline layout.', 'co-authors-plus' )} - /> - - +
+ + + { + setAttributes( { + size: Number( nextSize ), + } ); + } } + /> + setAttributes( { isLink: ! isLink } ) } + checked={ isLink } + /> + { isLink && ( + + setAttributes( { rel: newRel } ) + } + /> + ) } + + + { + setAttributes( { + verticalAlign: '' === value ? undefined : value, + } ); + } } + help={ __( + 'Vertical alignment defaults to bottom in the block layout and middle in the inline layout.', + 'co-authors-plus' + ) } + /> + + ); } diff --git a/src/blocks/block-coauthor-avatar/index.js b/src/blocks/block-coauthor-avatar/index.js index afc75931..f58908ed 100644 --- a/src/blocks/block-coauthor-avatar/index.js +++ b/src/blocks/block-coauthor-avatar/index.js @@ -27,5 +27,5 @@ registerBlockType( metadata.name, { * @see ./edit.js */ edit: Edit, - icon + icon, } ); diff --git a/src/blocks/block-coauthor-description/block.json b/src/blocks/block-coauthor-description/block.json index d036f767..5782ce4c 100644 --- a/src/blocks/block-coauthor-description/block.json +++ b/src/blocks/block-coauthor-description/block.json @@ -6,11 +6,7 @@ "title": "Co-Author Biography", "category": "theme", "description": "Displays a co-author's biographical description.", - "keywords": [ - "description", - "bio", - "biography" - ], + "keywords": [ "description", "bio", "biography" ], "supports": { "html": false, "color": { @@ -39,9 +35,7 @@ } } }, - "usesContext": [ - "co-authors-plus/author" - ], + "usesContext": [ "co-authors-plus/author" ], "attributes": { "textAlign": { "type": "string" diff --git a/src/blocks/block-coauthor-description/edit.js b/src/blocks/block-coauthor-description/edit.js index 843310b3..67a02d31 100644 --- a/src/blocks/block-coauthor-description/edit.js +++ b/src/blocks/block-coauthor-description/edit.js @@ -4,7 +4,12 @@ * * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops */ -import { useBlockProps, AlignmentControl, BlockControls, store as blockEditorStore } from '@wordpress/block-editor'; +import { + useBlockProps, + AlignmentControl, + BlockControls, + store as blockEditorStore, +} from '@wordpress/block-editor'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; import classnames from 'classnames'; @@ -19,10 +24,12 @@ import './editor.css'; * @return {WPElement} Element to render. */ export default function Edit( { context, attributes, setAttributes } ) { - const { textAlign } = attributes; - const authorPlaceholder = useSelect( select => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), []); - const author = context['co-authors-plus/author'] || authorPlaceholder; + const authorPlaceholder = useSelect( + ( select ) => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), + [] + ); + const author = context[ 'co-authors-plus/author' ] || authorPlaceholder; const { description } = author; return ( @@ -36,14 +43,12 @@ export default function Edit( { context, attributes, setAttributes } ) { />
diff --git a/src/blocks/block-coauthor-description/index.js b/src/blocks/block-coauthor-description/index.js index 52b858a3..4b4e8463 100644 --- a/src/blocks/block-coauthor-description/index.js +++ b/src/blocks/block-coauthor-description/index.js @@ -21,5 +21,5 @@ registerBlockType( metadata.name, { * @see ./edit.js */ edit: Edit, - icon + icon, } ); diff --git a/src/blocks/block-coauthor-image/block.json b/src/blocks/block-coauthor-image/block.json index b8ed363b..69edc190 100644 --- a/src/blocks/block-coauthor-image/block.json +++ b/src/blocks/block-coauthor-image/block.json @@ -29,9 +29,7 @@ } } }, - "usesContext": [ - "co-authors-plus/author" - ], + "usesContext": [ "co-authors-plus/author" ], "attributes": { "isLink": { "type": "boolean", diff --git a/src/blocks/block-coauthor-image/edit.js b/src/blocks/block-coauthor-image/edit.js index b200aa12..bdc30b6b 100644 --- a/src/blocks/block-coauthor-image/edit.js +++ b/src/blocks/block-coauthor-image/edit.js @@ -9,12 +9,22 @@ import { __experimentalUseBorderProps as useBorderProps, InspectorControls, } from '@wordpress/block-editor'; -import { TextControl, PanelBody, ToggleControl, SelectControl } from '@wordpress/components'; +import { + TextControl, + PanelBody, + ToggleControl, + SelectControl, +} from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import DimensionControls from './dimension-controls'; import PlaceholderImage from '../components/placeholder-image'; -import { getAvailableSizeSlug, getMediaSrc, getMediaDimensions, getPlaceholderImageDimensions } from './utils' +import { + getAvailableSizeSlug, + getMediaSrc, + getMediaDimensions, + getPlaceholderImageDimensions, +} from './utils'; /** * Edit @@ -23,32 +33,62 @@ import { getAvailableSizeSlug, getMediaSrc, getMediaDimensions, getPlaceholderIm * @param {Object} props { attributes, setAttributes, context, clientId } * @return {WPElement} */ -export default function Edit( { attributes, setAttributes, context, clientId } ) { - - const { aspectRatio, height, isLink, rel, scale, sizeSlug, verticalAlign, width } = attributes; +export default function Edit( { + attributes, + setAttributes, + context, + clientId, +} ) { + const { + aspectRatio, + height, + isLink, + rel, + scale, + sizeSlug, + verticalAlign, + width, + } = attributes; // Author const authorPlaceholder = useSelect( - select => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), + ( select ) => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), [] ); - const author = context['co-authors-plus/author'] || authorPlaceholder; + const author = context[ 'co-authors-plus/author' ] || authorPlaceholder; // Media const media = useSelect( - select => 0 !== author.featured_media && select( coreStore ).getMedia( author.featured_media, { context: 'view' } ), - [author.featured_media] + ( select ) => + 0 !== author.featured_media && + select( coreStore ).getMedia( author.featured_media, { + context: 'view', + } ), + [ author.featured_media ] ); // Image Sizes and Dimensions const { imageSizes, imageDimensions } = useSelect( - select => select( blockEditorStore ).getSettings(), + ( select ) => select( blockEditorStore ).getSettings(), [] ); - const imageSizeOptions = imageSizes.map( ( { name, slug } ) => ({ value: slug, label: name })); - const availableSizeSlug = getAvailableSizeSlug( media, imageDimensions, sizeSlug ); - const dimensions = getMediaDimensions( media, imageDimensions, availableSizeSlug ); - const placeholderDimensions = media ? {} : getPlaceholderImageDimensions(imageDimensions, availableSizeSlug); + const imageSizeOptions = imageSizes.map( ( { name, slug } ) => ( { + value: slug, + label: name, + } ) ); + const availableSizeSlug = getAvailableSizeSlug( + media, + imageDimensions, + sizeSlug + ); + const dimensions = getMediaDimensions( + media, + imageDimensions, + availableSizeSlug + ); + const placeholderDimensions = media + ? {} + : getPlaceholderImageDimensions( imageDimensions, availableSizeSlug ); // Border const borderProps = useBorderProps( attributes ); @@ -65,49 +105,51 @@ export default function Edit( { attributes, setAttributes, context, clientId } ) setAttributes={ setAttributes } imageSizeOptions={ imageSizeOptions } /> - { - panic ? null : ( -
- { - media ? ( - {__( - ) : ( - - ) - } -
- ) - } + { panic ? null : ( +
+ { media ? ( + { + ) : ( + + ) } +
+ ) } setAttributes( { isLink: ! isLink } ) } checked={ isLink } /> @@ -122,56 +164,62 @@ export default function Edit( { attributes, setAttributes, context, clientId } ) /> ) } - - { - setAttributes( { - verticalAlign: '' === value ? undefined : value - } ); - } } - help={ __( 'Vertical alignment defaults to bottom in the block layout and middle in the inline layout.', 'co-authors-plus' )} - /> - + + { + setAttributes( { + verticalAlign: '' === value ? undefined : value, + } ); + } } + help={ __( + 'Vertical alignment defaults to bottom in the block layout and middle in the inline layout.', + 'co-authors-plus' + ) } + /> + ); diff --git a/src/blocks/block-coauthor-image/index.js b/src/blocks/block-coauthor-image/index.js index edc33d76..31c6727f 100644 --- a/src/blocks/block-coauthor-image/index.js +++ b/src/blocks/block-coauthor-image/index.js @@ -4,7 +4,7 @@ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/ */ import { registerBlockType } from '@wordpress/blocks'; -import { image as icon } from '@wordpress/icons' +import { image as icon } from '@wordpress/icons'; /** * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files. @@ -31,5 +31,5 @@ registerBlockType( metadata.name, { * @see ./edit.js */ edit: Edit, - icon + icon, } ); diff --git a/src/blocks/block-coauthor-image/utils.js b/src/blocks/block-coauthor-image/utils.js index 40f621fa..0032d9cb 100644 --- a/src/blocks/block-coauthor-image/utils.js +++ b/src/blocks/block-coauthor-image/utils.js @@ -11,22 +11,22 @@ export function getMediaDimensions( media, imageDimensions, sizeSlug ) { return {}; } - const mediaSize = media.media_details.sizes[sizeSlug]; - + const mediaSize = media.media_details.sizes[ sizeSlug ]; + if ( 'full' === sizeSlug ) { return { width: mediaSize.width, - height: mediaSize.height - } + height: mediaSize.height, + }; } - const imageSize = imageDimensions[sizeSlug]; + const imageSize = imageDimensions[ sizeSlug ]; if ( true === imageSize.crop || imageSize.width === imageSize.height ) { return { width: imageSize.width, - height: imageSize.height - } + height: imageSize.height, + }; } const mediaAspectRatio = mediaSize.width / mediaSize.height; @@ -34,14 +34,14 @@ export function getMediaDimensions( media, imageDimensions, sizeSlug ) { if ( imageSize.width > imageSize.height ) { return { width: imageSize.width, - height: imageSize.width / mediaAspectRatio - } + height: imageSize.width / mediaAspectRatio, + }; } return { width: imageSize.height * mediaAspectRatio, - height: imageSize.height - } + height: imageSize.height, + }; } /** @@ -52,7 +52,7 @@ export function getMediaDimensions( media, imageDimensions, sizeSlug ) { * @return {string} */ export function getMediaSrc( media, sizeSlug ) { - return media?.media_details?.sizes[sizeSlug]?.source_url; + return media?.media_details?.sizes[ sizeSlug ]?.source_url; } /** @@ -63,67 +63,68 @@ export function getMediaSrc( media, sizeSlug ) { * @return {Object} {width,height} */ export function getPlaceholderImageDimensions( imageDimensions, sizeSlug ) { - - const size = imageDimensions[sizeSlug]; + const size = imageDimensions[ sizeSlug ]; if ( true === size.crop || size.width === size.height ) { return { width: size.width, - height: size.height - } + height: size.height, + }; } if ( size.width > size.height ) { return { width: size.width, - height: size.width - } + height: size.width, + }; } return { width: size.height, - height: size.height - } + height: size.height, + }; } /** * Get Size Keys Intersection - * + * * @param {Object} media * @param {Object} imageDimensions * @return {Array} */ export function getSizeKeysIntersection( media, imageDimensions ) { - if ( ! media ) { return Object.keys( imageDimensions ); } const mediaKeys = Object.keys( media.media_details.sizes ); - const sizeKeys = Object.keys( imageDimensions ); - - return Array.from( new Set([...mediaKeys.filter( ( key ) => sizeKeys.includes(key) )])) + const sizeKeys = Object.keys( imageDimensions ); + + return Array.from( + new Set( [ + ...mediaKeys.filter( ( key ) => sizeKeys.includes( key ) ), + ] ) + ); } /** * Get Available Size Slug - * + * * @param {Object} media * @param {Object} imageDimensions * @param {string} sizeSlug * @return {string} */ export function getAvailableSizeSlug( media, imageDimensions, sizeSlug ) { - if ( media && 'full' === sizeSlug ) { return sizeSlug; } const keys = getSizeKeysIntersection( media, imageDimensions ); - + if ( sizeSlug && keys.includes( sizeSlug ) ) { return sizeSlug; } - return keys[Math.max(0, keys.length - 1)]; + return keys[ Math.max( 0, keys.length - 1 ) ]; } diff --git a/src/blocks/block-coauthor-name/block.json b/src/blocks/block-coauthor-name/block.json index 4b5d0440..44270bd5 100644 --- a/src/blocks/block-coauthor-name/block.json +++ b/src/blocks/block-coauthor-name/block.json @@ -34,9 +34,7 @@ } } }, - "usesContext": [ - "co-authors-plus/author" - ], + "usesContext": [ "co-authors-plus/author" ], "attributes": { "isLink": { "type": "boolean", diff --git a/src/blocks/block-coauthor-name/edit.js b/src/blocks/block-coauthor-name/edit.js index 4f552a41..309f0f52 100644 --- a/src/blocks/block-coauthor-name/edit.js +++ b/src/blocks/block-coauthor-name/edit.js @@ -9,9 +9,14 @@ import { InspectorControls, AlignmentControl, BlockControls, - store as blockEditorStore + store as blockEditorStore, } from '@wordpress/block-editor'; -import { TextControl, PanelBody, ToggleControl, SelectControl } from '@wordpress/components'; +import { + TextControl, + PanelBody, + ToggleControl, + SelectControl, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect } from '@wordpress/data'; import classnames from 'classnames'; @@ -25,77 +30,90 @@ import classnames from 'classnames'; * @return {WPElement} Element to render. */ export default function Edit( { context, attributes, setAttributes } ) { - const { isLink, rel, tagName, textAlign } = attributes; - const authorPlaceholder = useSelect( select => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), []); - const author = context['co-authors-plus/author'] || authorPlaceholder; + const authorPlaceholder = useSelect( + ( select ) => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), + [] + ); + const author = context[ 'co-authors-plus/author' ] || authorPlaceholder; const { link, display_name } = author; const TagName = tagName; return ( <> - - { - setAttributes( { textAlign: nextAlign } ); - } } - /> - - - { - isLink ? ( + + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + + + { isLink ? ( event.preventDefault() } > { display_name } - ) : display_name - } - - - - + + + setAttributes( { isLink: ! isLink } ) } + checked={ isLink } + /> + { isLink && ( + <> + + setAttributes( { rel: newRel } ) + } + /> + + ) } + + + + setAttributes( { isLink: ! isLink } ) } - checked={ isLink } + label={ __( 'HTML element', 'co-authors-plus' ) } + options={ [ + { label: __( 'Default (

)' ), value: 'p' }, + { label: '', value: 'span' }, + { label: '

', value: 'h1' }, + { label: '

', value: 'h2' }, + { label: '

', value: 'h3' }, + { label: '

', value: 'h4' }, + { label: '

', value: 'h5' }, + { label: '
', value: 'h6' }, + ] } + value={ tagName } + onChange={ ( value ) => + setAttributes( { tagName: value } ) + } /> - { isLink && ( - <> - - setAttributes( { rel: newRel } ) - } - /> - - ) } - - - - )' ), value: 'p' }, - { label: '', value: 'span' }, - { label: '

', value: 'h1' }, - { label: '

', value: 'h2' }, - { label: '

', value: 'h3' }, - { label: '

', value: 'h4' }, - { label: '

', value: 'h5' }, - { label: '
', value: 'h6' }, - ] } - value={ tagName } - onChange={ (value) => setAttributes( {tagName: value}) } - /> - + ); } diff --git a/src/blocks/block-coauthor-name/index.js b/src/blocks/block-coauthor-name/index.js index f059437a..1a50659e 100644 --- a/src/blocks/block-coauthor-name/index.js +++ b/src/blocks/block-coauthor-name/index.js @@ -22,5 +22,5 @@ registerBlockType( metadata.name, { * @see ./edit.js */ edit: Edit, - icon + icon, } ); diff --git a/src/blocks/block-coauthors/block.json b/src/blocks/block-coauthors/block.json index d882d73f..c5251d14 100644 --- a/src/blocks/block-coauthors/block.json +++ b/src/blocks/block-coauthors/block.json @@ -28,7 +28,7 @@ "spacing": { "margin": true, "padding": true, - "blockGap": ["vertical"], + "blockGap": [ "vertical" ], "__experimentalDefaultControls": { "margin": false, "padding": false, diff --git a/src/blocks/block-coauthors/components/memoized-coauthor-template-block-preview.js b/src/blocks/block-coauthors/components/memoized-coauthor-template-block-preview.js index 40913f53..bf0e9d0a 100644 --- a/src/blocks/block-coauthors/components/memoized-coauthor-template-block-preview.js +++ b/src/blocks/block-coauthors/components/memoized-coauthor-template-block-preview.js @@ -4,13 +4,12 @@ import { __experimentalUseBlockPreview as useBlockPreview } from '@wordpress/blo /** * CoAuthor Template Block Preview */ -function CoAuthorTemplateBlockPreview({ +function CoAuthorTemplateBlockPreview( { blocks, blockContextId, isHidden, setActiveBlockContextId, -}) { - +} ) { const blockPreviewProps = useBlockPreview( { blocks, props: { diff --git a/src/blocks/block-coauthors/edit.js b/src/blocks/block-coauthors/edit.js index 10739fe3..2687e0bc 100644 --- a/src/blocks/block-coauthors/edit.js +++ b/src/blocks/block-coauthors/edit.js @@ -13,7 +13,7 @@ import { InspectorControls, RichText, __experimentalGetGapCSSValue, - AlignmentControl + AlignmentControl, } from '@wordpress/block-editor'; import { TextControl, ToolbarGroup, PanelBody } from '@wordpress/components'; import apiFetch from '@wordpress/api-fetch'; @@ -29,18 +29,18 @@ import MemoizedCoAuthorTemplateBlockPreview from './components/memoized-coauthor /** * CoAuthor Template Inner Blocks */ -function CoAuthorTemplateInnerBlocks () { - return
; +function CoAuthorTemplateInnerBlocks() { + return ( +
+ ); } -const ALLOWED_FORMATS = [ - 'core/bold', - 'core/italic', - 'core/text-color', -]; +const ALLOWED_FORMATS = [ 'core/bold', 'core/italic', 'core/text-color' ]; /** * The edit function describes the structure of your block in the context of the @@ -50,16 +50,25 @@ const ALLOWED_FORMATS = [ * * @return {WPElement} Element to render. */ -export default function Edit( { attributes, setAttributes, clientId, context, isSelected } ) { - - const { prefix, separator, lastSeparator, suffix, layout, textAlign } = attributes; +export default function Edit( { + attributes, + setAttributes, + clientId, + context, + isSelected, +} ) { + const { prefix, separator, lastSeparator, suffix, layout, textAlign } = + attributes; const { postId } = context; - const authorPlaceholder = useSelect( select => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), []); - const [ coAuthors, setCoAuthors ] = useState([authorPlaceholder]); + const authorPlaceholder = useSelect( + ( select ) => select( 'co-authors-plus/blocks' ).getAuthorPlaceholder(), + [] + ); + const [ coAuthors, setCoAuthors ] = useState( [ authorPlaceholder ] ); const [ activeBlockContextId, setActiveBlockContextId ] = useState(); - const noticesDispatch = useDispatch('core/notices'); + const noticesDispatch = useDispatch( 'core/notices' ); - useEffect(()=>{ + useEffect( () => { if ( ! postId ) { return; } @@ -67,38 +76,40 @@ export default function Edit( { attributes, setAttributes, clientId, context, is const controller = new AbortController(); apiFetch( { - path: `/coauthors/v1/coauthors?post_id=${postId}`, - signal: controller.signal + path: `/coauthors/v1/coauthors?post_id=${ postId }`, + signal: controller.signal, } ) - .then( setCoAuthors ) - .catch( handleError ) + .then( setCoAuthors ) + .catch( handleError ); return () => { controller.abort(); - } - },[postId]); + }; + }, [ postId ] ); /** * Handle Error - * + * * @param {Error} */ function handleError( error ) { if ( 'AbortError' === error.name ) { return; } - noticesDispatch.createErrorNotice( error.message, { isDismissible: true } ); + noticesDispatch.createErrorNotice( error.message, { + isDismissible: true, + } ); } - const blocks = useSelect( (select) => { + const blocks = useSelect( ( select ) => { return select( blockEditorStore ).getBlocks( clientId ); - }); + } ); const setLayout = ( nextLayout ) => { setAttributes( { layout: { ...layout, ...nextLayout }, } ); - } + }; const layoutControls = [ { @@ -110,8 +121,7 @@ export default function Edit( { attributes, setAttributes, clientId, context, is { icon: grid, title: __( 'Block', 'co-authors-plus' ), - onClick: () => - setLayout( { type: 'block' } ), + onClick: () => setLayout( { type: 'block' } ), isActive: layout.type === 'block', }, ]; @@ -127,75 +137,81 @@ export default function Edit( { attributes, setAttributes, clientId, context, is } } /> -
- { - coAuthors && + gap: __experimentalGetGapCSSValue( + attributes?.style?.spacing?.blockGap + ), + }, + } ) } + > + { coAuthors && 'inline' === layout.type && - ( isSelected || prefix ) && - ( + ( isSelected || prefix ) && ( setAttributes( { prefix: value } ) } tagName="span" /> - ) - } - { - coAuthors && + ) } + { coAuthors && coAuthors - .map( ( author ) => { - const isHidden = author.id === ( activeBlockContextId || coAuthors[0]?.id ); - return ( - - { isHidden ? () : null } - - - ); - }) - .reduce( ( previous, current, index, all ) => ( - <> - { previous } - { - 'inline' === layout.type && - ( - - { ( lastSeparator && index === (all.length - 1) ) ? `${lastSeparator}` : `${separator}` } - - ) - } - { current } - - )) - } - { - coAuthors && + .map( ( author ) => { + const isHidden = + author.id === + ( activeBlockContextId || coAuthors[ 0 ]?.id ); + return ( + + { isHidden ? ( + + ) : null } + + + ); + } ) + .reduce( ( previous, current, index, all ) => ( + <> + { previous } + { 'inline' === layout.type && ( + + { lastSeparator && + index === all.length - 1 + ? `${ lastSeparator }` + : `${ separator }` } + + ) } + { current } + + ) ) } + { coAuthors && 'inline' === layout.type && - ( isSelected || suffix ) && - ( + ( isSelected || suffix ) && ( - ) - } + ) }
- { - 'inline' === layout.type && - ( - + { 'inline' === layout.type && ( + { setAttributes( { separator: nextValue } ); } } - help={ __( 'Enter character(s) used to separate authors.', 'co-authors-plus' ) } + help={ __( + 'Enter character(s) used to separate authors.', + 'co-authors-plus' + ) } /> { setAttributes( { lastSeparator: nextValue } ); } } - help={ __( 'Enter character(s) used to separate the last author.', 'co-authors-plus' ) } + help={ __( + 'Enter character(s) used to separate the last author.', + 'co-authors-plus' + ) } /> - - ) - } + + ) } ); diff --git a/src/blocks/block-coauthors/index.js b/src/blocks/block-coauthors/index.js index 702f20cd..d6b58a83 100644 --- a/src/blocks/block-coauthors/index.js +++ b/src/blocks/block-coauthors/index.js @@ -34,5 +34,5 @@ registerBlockType( metadata.name, { */ save, - icon + icon, } ); diff --git a/src/blocks/block-coauthors/save.js b/src/blocks/block-coauthors/save.js index 0461c4c9..a4c787b3 100644 --- a/src/blocks/block-coauthors/save.js +++ b/src/blocks/block-coauthors/save.js @@ -1,7 +1,11 @@ /** * Save */ -import { useBlockProps, InnerBlocks, __experimentalGetGapCSSValue } from '@wordpress/block-editor'; +import { + useBlockProps, + InnerBlocks, + __experimentalGetGapCSSValue, +} from '@wordpress/block-editor'; import classnames from 'classnames'; /** @@ -10,17 +14,21 @@ import classnames from 'classnames'; * @return {WPElement} Element to render. */ export default function save( { attributes } ) { - const { layout, textAlign } = attributes; const style = { - gap: 'block' === layout.type ? __experimentalGetGapCSSValue( attributes.style?.spacing?.blockGap ) : null + gap: + 'block' === layout.type + ? __experimentalGetGapCSSValue( + attributes.style?.spacing?.blockGap + ) + : null, }; - const className = classnames({ - [`is-layout-cap-${layout.type}`]: layout.type, - [`has-text-align-${ textAlign }`]: textAlign - }); + const className = classnames( { + [ `is-layout-cap-${ layout.type }` ]: layout.type, + [ `has-text-align-${ textAlign }` ]: textAlign, + } ); return (
diff --git a/src/blocks/components/placeholder-image.jsx b/src/blocks/components/placeholder-image.jsx index 6dc79e18..c6cac7f7 100644 --- a/src/blocks/components/placeholder-image.jsx +++ b/src/blocks/components/placeholder-image.jsx @@ -1,23 +1,25 @@ -import { useMemo } from "@wordpress/element"; +import { useMemo } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; /** * Encode SVG - * + * * @param {string} svgHTML * @return {string} */ function encodeSVG( svgHTML ) { - return encodeURIComponent( - svgHTML - // Strip newlines and tabs - .replace(/[\t\n\r]/gim, '') - // Condense multiple spaces - .replace(/\s\s+/g, ' ') - ) - // Encode parenthesis - .replace(/\(/g, '%28') - .replace(/\)/g, '%29'); + return ( + encodeURIComponent( + svgHTML + // Strip newlines and tabs + .replace( /[\t\n\r]/gim, '' ) + // Condense multiple spaces + .replace( /\s\s+/g, ' ' ) + ) + // Encode parenthesis + .replace( /\(/g, '%28' ) + .replace( /\)/g, '%29' ) + ); } /** @@ -28,12 +30,12 @@ function encodeSVG( svgHTML ) { */ function getPlaceholderSrc( { width, height } ) { const svg = encodeSVG( - ` - - + ` + + ` ); - return `data:image/svg+xml;charset=UTF-8,${svg}` + return `data:image/svg+xml;charset=UTF-8,${ svg }`; } /** @@ -44,17 +46,19 @@ function getPlaceholderSrc( { width, height } ) { * @return {WPElement} */ export default function PlaceholderImage( { dimensions, style, className } ) { + const src = useMemo( + () => getPlaceholderSrc( dimensions ), + [ dimensions ] + ); - const src = useMemo(() => getPlaceholderSrc(dimensions), [dimensions]); - return ( {__('Placeholder ); }