-
Notifications
You must be signed in to change notification settings - Fork 810
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix Jetpack Social pre publish UI (#34243)
* Create usePostMeta hook to make the data reactive * Remove the utils as well as the tests * Update consumer components to use usePostMeta * Add tests to usePostMeta * Add changelog * Fix up versions * Fix import
- Loading branch information
1 parent
cf472d9
commit d790023
Showing
35 changed files
with
437 additions
and
635 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
projects/js-packages/publicize-components/changelog/fix-social-pre-publish-ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: patch | ||
| Type: fixed | ||
|
|
||
| Fixed pre-publish UI reactivity for Jetpack Social |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 17 additions & 13 deletions
30
projects/js-packages/publicize-components/src/components/share-buttons/useShareButtonText.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
97 changes: 97 additions & 0 deletions
97
projects/js-packages/publicize-components/src/components/social-previews/use-post-data.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { usePostMeta } from '../../utils'; | ||
| import { getSigImageUrl } from '../generated-image-preview/utils'; | ||
| import { getMediaSourceUrl } from './utils'; | ||
|
|
||
| /** | ||
| * Returns the post data. | ||
| * | ||
| * @returns {object} The post data. | ||
| */ | ||
| export function usePostData() { | ||
| const { attachedMedia, imageGeneratorSettings, shouldUploadAttachedMedia } = usePostMeta(); | ||
|
|
||
| return useSelect( | ||
| select => { | ||
| const { getMedia } = select( 'core' ); | ||
| const { getEditedPostAttribute } = select( 'core/editor' ); | ||
|
|
||
| const featuredImageId = getEditedPostAttribute( 'featured_media' ); | ||
|
|
||
| // Use the featured image by default, if it's available. | ||
| let image = featuredImageId ? getMediaSourceUrl( getMedia( featuredImageId ) ) : ''; | ||
|
|
||
| const sigImageUrl = imageGeneratorSettings.enabled | ||
| ? getSigImageUrl( imageGeneratorSettings.token ) | ||
| : ''; | ||
| // If we have a SIG token, use it to generate the image URL. | ||
| if ( sigImageUrl ) { | ||
| image = sigImageUrl; | ||
| } else if ( attachedMedia?.[ 0 ]?.id ) { | ||
| // If we don't have a SIG image, use the first image in the attached media. | ||
| const [ firstMedia ] = attachedMedia; | ||
| const isImage = firstMedia.id | ||
| ? getMedia( firstMedia.id )?.mime_type?.startsWith( 'image/' ) | ||
| : false; | ||
|
|
||
| if ( isImage && firstMedia.url ) { | ||
| image = firstMedia.url; | ||
| } | ||
| } | ||
|
|
||
| const media = []; | ||
|
|
||
| // Attach media only if "Share as a social post" option is enabled. | ||
| if ( shouldUploadAttachedMedia ) { | ||
| if ( sigImageUrl ) { | ||
| media.push( { | ||
| type: 'image/jpeg', | ||
| url: sigImageUrl, | ||
| alt: '', | ||
| } ); | ||
| } else { | ||
| const getMediaDetails = id => { | ||
| const mediaItem = getMedia( id ); | ||
| if ( ! mediaItem ) { | ||
| return null; | ||
| } | ||
| return { | ||
| type: mediaItem.mime_type, | ||
| url: getMediaSourceUrl( mediaItem ), | ||
| alt: mediaItem.alt_text, | ||
| }; | ||
| }; | ||
|
|
||
| for ( const { id } of attachedMedia ) { | ||
| const mediaDetails = getMediaDetails( id ); | ||
| if ( mediaDetails ) { | ||
| media.push( mediaDetails ); | ||
| } | ||
| } | ||
| if ( 0 === media.length && featuredImageId ) { | ||
| const mediaDetails = getMediaDetails( featuredImageId ); | ||
| if ( mediaDetails ) { | ||
| media.push( mediaDetails ); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return { | ||
| title: | ||
| getEditedPostAttribute( 'meta' )?.jetpack_seo_html_title || | ||
| getEditedPostAttribute( 'title' ), | ||
| description: | ||
| getEditedPostAttribute( 'meta' )?.advanced_seo_description || | ||
| getEditedPostAttribute( 'excerpt' ) || | ||
| getEditedPostAttribute( 'content' ).split( '<!--more' )[ 0 ] || | ||
| __( 'Visit the post for more.', 'jetpack' ), | ||
| url: getEditedPostAttribute( 'link' ), | ||
| image, | ||
| media, | ||
| initialTabName: null, | ||
| }; | ||
| }, | ||
| [ shouldUploadAttachedMedia, attachedMedia, imageGeneratorSettings ] | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.