Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Image Block: add caption field to placeholder
Browse files Browse the repository at this point in the history
ellatrix committed May 19, 2020
1 parent 7fa12a3 commit 9214bf4
Showing 1 changed file with 29 additions and 24 deletions.
53 changes: 29 additions & 24 deletions packages/block-library/src/image/edit.js
Original file line number Diff line number Diff line change
@@ -165,7 +165,6 @@ export class ImageEdit extends Component {
alt: undefined,
id: undefined,
title: undefined,
caption: undefined,
} );
return;
}
@@ -188,9 +187,9 @@ export class ImageEdit extends Component {
}
}

// If a caption text was meanwhile written by the user,
// make sure the text is not overwritten by empty captions
if ( caption && ! get( mediaAttributes, [ 'caption' ] ) ) {
// If a caption text was meanwhile written by the user, make sure the
// text is not overwritten by another caption.
if ( caption ) {
mediaAttributes = omit( mediaAttributes, [ 'caption' ] );
}

@@ -417,11 +416,35 @@ export class ImageEdit extends Component {
/>
);

let captionField;

if ( ! RichText.isEmpty( caption ) || isSelected ) {
captionField = (
<RichText
tagName="figcaption"
placeholder={ __( 'Write caption…' ) }
value={ caption }
unstableOnFocus={ this.onFocusCaption }
onChange={ ( value ) =>
setAttributes( { caption: value } )
}
isSelected={ this.state.captionFocused }
inlineToolbar
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter( createBlock( 'core/paragraph' ) )
}
/>
);
}

if ( ! url ) {
return (
<>
{ controls }
<Block.div>{ mediaPlaceholder }</Block.div>
<Block.div>
{ mediaPlaceholder }
{ captionField }
</Block.div>
</>
);
}
@@ -663,25 +686,7 @@ export class ImageEdit extends Component {
);
} }
</ImageSize>
{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
<RichText
tagName="figcaption"
placeholder={ __( 'Write caption…' ) }
value={ caption }
unstableOnFocus={ this.onFocusCaption }
onChange={ ( value ) =>
setAttributes( { caption: value } )
}
isSelected={ this.state.captionFocused }
inlineToolbar
__unstableOnSplitAtEnd={ () =>
insertBlocksAfter(
createBlock( 'core/paragraph' )
)
}
/>
) }

{ captionField }
{ mediaPlaceholder }
</Block.figure>
</>

0 comments on commit 9214bf4

Please sign in to comment.