diff --git a/projects/plugins/jetpack/changelog/update-featured-images-fix-panel-transition b/projects/plugins/jetpack/changelog/update-featured-images-fix-panel-transition new file mode 100644 index 0000000000000..5aae8ff00facd --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-featured-images-fix-panel-transition @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +AI Featured Image: fix bug on automatic transition to featured image panel diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx index 0041031c4a43c..ac18db8bc6f9c 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/featured-image/index.tsx @@ -34,6 +34,7 @@ export default function FeaturedImage( { busy, disabled }: { busy: boolean; disa useDispatch( 'core/edit-post' ); const { editPost, toggleEditorPanelOpened: toggleEditorPanelOpenedFromEditor } = useDispatch( 'core/editor' ); + const { clearSelectedBlock } = useDispatch( 'core/block-editor' ); const [ isFeaturedImageModalVisible, setIsFeaturedImageModalVisible ] = useState( false ); const [ images, setImages ] = useState< CarrouselImages >( [ { generating: true } ] ); @@ -176,8 +177,10 @@ export default function FeaturedImage( { busy, disabled }: { busy: boolean; disa }, [ processImageGeneration, recordEvent ] ); const triggerComplementaryArea = useCallback( () => { - enableComplementaryArea( 'core/edit-post', 'edit-post/document' ); - }, [ enableComplementaryArea ] ); + // clear any block selection, because selected blocks have precedence on settings sidebar + clearSelectedBlock(); + return enableComplementaryArea( 'core/edit-post', 'edit-post/document' ); + }, [ clearSelectedBlock, enableComplementaryArea ] ); const handleAccept = useCallback( () => { // track the accept/use image event @@ -191,14 +194,19 @@ export default function FeaturedImage( { busy, disabled }: { busy: boolean; disa // Open the featured image panel for users to see the new image. setTimeout( () => { - // If the panel is not opened, open it and then trigger the complementary area. - if ( ! isEditorPanelOpened( 'featured-image' ) ) { - toggleEditorPanelOpened?.( 'featured-image' ).then( () => { - triggerComplementaryArea(); - } ); - } else { - triggerComplementaryArea(); - } + const isFeaturedImagePanelOpened = isEditorPanelOpened( 'featured-image' ); + const isPostStatusPanelOpened = isEditorPanelOpened( 'post-status' ); + + // open the complementary area and then trigger the featured image panel. + triggerComplementaryArea().then( () => { + if ( ! isFeaturedImagePanelOpened ) { + toggleEditorPanelOpened( 'featured-image' ); + } + // handle the case where the featured image panel is not present + if ( ! isPostStatusPanelOpened ) { + toggleEditorPanelOpened( 'post-status' ); + } + } ); }, 500 ); };