Make Draftail ImageBlock alt field readonly for now

client/src/components/Draftail/blocks/ImageBlock.js

@@ -36,7 +36,7 @@ class ImageBlock extends Component {
       <MediaBlock {...this.props} src={src} alt="">
         <label className="ImageBlock__field">
           <p>{STRINGS.ALT_TEXT}</p>
-          <input className="ImageBlock__field__input" type="text" value={alt || ''} onChange={this.changeAlt} />
+          <input className="ImageBlock__field__input" type="text" value={alt || ''} readOnly />
         </label>
 
         <button className="button button-secondary no Tooltip__button" onClick={onRemoveEntity}>

client/src/components/Draftail/blocks/ImageBlock.scss

@@ -22,4 +22,8 @@
     font-size: 1rem;
     background-color: $color-white;
     color: $color-text-base;
+
+    &[readonly] {
+        color: transparentize($color-text-base, 0.5);
+    }
 }

client/src/components/Draftail/blocks/ImageBlock.test.js

@@ -65,7 +65,8 @@ describe('ImageBlock', () => {
     ).toMatchSnapshot();
   });
 
-  it('changeAlt', () => {
+  // Alt field is readonly for now.
+  it.skip('changeAlt', () => {
     jest.spyOn(DraftUtils, 'updateBlockEntity');
     DraftUtils.updateBlockEntity.mockImplementation(e => e);
 

client/src/components/Draftail/blocks/__snapshots__/ImageBlock.test.js.snap

@@ -24,7 +24,7 @@ exports[`ImageBlock alt 1`] = `
     </p>
     <input
       className="ImageBlock__field__input"
-      onChange={[Function]}
+      readOnly={true}
       type="text"
       value="Test"
     />
@@ -61,7 +61,7 @@ exports[`ImageBlock no data 1`] = `
     </p>
     <input
       className="ImageBlock__field__input"
-      onChange={[Function]}
+      readOnly={true}
       type="text"
       value=""
     />
@@ -98,7 +98,7 @@ exports[`ImageBlock renders 1`] = `
     </p>
     <input
       className="ImageBlock__field__input"
-      onChange={[Function]}
+      readOnly={true}
       type="text"
       value=""
     />