Introduce Editable.

WordPress · Jul 10, 2017 · 71d8e19 · 71d8e19
1 parent 47c8e18
commit 71d8e19
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/blocks/library/gallery/gallery-image.js b/blocks/library/gallery/gallery-image.js
@@ -1,10 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from 'i18n';
+
+/**
+ * Internal dependencies
+ */
+import Editable from '../../editable';
 
 export default function GalleryImage( props ) {
 	return (
 		<figure className="blocks-gallery-image" onClick={ props.onSelect }>
 			<img src={ props.img.url } alt={ props.img.alt } />
 			{ props.focus &&
-				<figcaption>Add caption...</figcaption>
+				<Editable
+					tagName="figcaption"
+					placeholder={ __( 'Write caption…' ) }
+					focus={ props.focus }
+					inlineToolbar
+				/>
 			}
 		</figure>
 	);

diff --git a/blocks/library/gallery/style.scss b/blocks/library/gallery/style.scss
@@ -19,3 +19,13 @@
 .blocks-gallery__placeholder-instructions {
 	margin: 1.8em 0;
 }
+
+.wp-block-gallery .blocks-editable {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	figcaption {
+		position: static;
+	}
+}