-
-
- ) }
-
-
-
@@ -291,8 +254,6 @@ export default function Layout() {
) }
-
+
+
{ areas.mobile }
@@ -358,6 +319,8 @@ export default function Layout() {
) }
+
+ `${ descriptionId }-${ index }`
+ )
+ .join( ' ' )
+ : undefined
+ }
>
-
- `${ descriptionId }-${ index }`
- )
- .join( ' ' )
- : undefined
- }
- >
- { isEmpty && isTemplatePart && __( 'Empty template part' ) }
- { isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
- { ! isEmpty && (
-
-
- ) }
-
-
- { ariaDescriptions.map( ( ariaDescription, index ) => (
+ { isEmpty && isTemplatePart && __( 'Empty template part' ) }
+ { isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
+ { ! isEmpty && (
+
+ { ariaDescription }
+
+ ) ) }
+
+ );
+}
+
+function Author( { item, viewType } ) {
+ const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+ const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+ const withIcon = viewType !== LAYOUT_LIST;
+
+ return (
+
- { ariaDescription }
+ ![]()
setIsImageLoaded( true ) }
+ alt=""
+ src={ imageUrl }
+ />
- ) ) }
-
+ ) }
+ { withIcon && ! imageUrl && (
+
+
+ ) }
+ { text }
+
-
- { __( 'The last part of the URL.' ) }{ ' ' }
-
- { __( 'Learn more.' ) }
-
-
- }
- onChange={ ( newValue ) => {
- editPost( { slug: newValue } );
- // When we delete the field the permalink gets
- // reverted to the original value.
- // The forceEmptyField logic allows the user to have
- // the field temporarily empty while typing.
- if ( ! newValue ) {
- if ( ! forceEmptyField ) {
- setForceEmptyField( true );
+
+ { isEditable && (
+
);
}
diff --git a/packages/editor/src/components/post-url/panel.js b/packages/editor/src/components/post-url/panel.js
index 1a64ae7096df7..3e5ea6cd8ba47 100644
--- a/packages/editor/src/components/post-url/panel.js
+++ b/packages/editor/src/components/post-url/panel.js
@@ -2,16 +2,18 @@
* WordPress dependencies
*/
import { useMemo, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
import { Dropdown, Button } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
+import { safeDecodeURIComponent } from '@wordpress/url';
/**
* Internal dependencies
*/
import PostURLCheck from './check';
import PostURL from './index';
-import { usePostURLLabel } from './label';
import PostPanelRow from '../post-panel-row';
+import { store as editorStore } from '../../store';
export default function PostURLPanel() {
// Use internal state instead of a ref to make sure that the component
@@ -19,13 +21,20 @@ export default function PostURLPanel() {
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = useMemo(
- () => ( { anchor: popoverAnchor, placement: 'bottom-end' } ),
+ () => ( {
+ // Anchor the popover to the middle of the entire row so that it doesn't
+ // move around when the label changes.
+ anchor: popoverAnchor,
+ placement: 'left-start',
+ offset: 36,
+ shift: true,
+ } ),
[ popoverAnchor ]
);
return (
+ { __( 'Customize the last part of the URL. ' ) }
+
+ { __( 'Learn more.' ) }
+
+
+ ) }
+
+ { isEditable && (
+
+ /
+
}
- return;
- }
- if ( forceEmptyField ) {
- setForceEmptyField( false );
- }
- } }
- onBlur={ ( event ) => {
- editPost( {
- slug: cleanForSlug( event.target.value ),
- } );
- if ( forceEmptyField ) {
- setForceEmptyField( false );
- }
- } }
- />
- ) }
- { isEditable && (
-
+ - { viewPostLabel ?? __( 'View post' ) } -
- ) } -
-
- { children }
-
+
+ { children }
+
+