1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
/**
* External dependencies
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { get } from 'lodash';
import { withDispatch, withSelect } from '@wordpress/data';
class SeoPanel extends Component {
onMessageChange = event => {
this.props.updateSeoDescription( event.target.value );
};
render() {
const { seoDescription } = this.props;
return (
<div className="jetpack-seo-message-box">
<textarea
value={ seoDescription }
onChange={ this.onMessageChange }
placeholder={ __( 'Write a description…', 'jetpack' ) }
rows={ 4 }
/>
<div className="jetpack-seo-character-count">
{ sprintf(
_n( '%d character', '%d characters', seoDescription.length, 'jetpack' ),
seoDescription.length
) }
</div>
</div>
);
}
}
export default compose( [
withSelect( select => ( {
seoDescription: get(
select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
[ 'advanced_seo_description' ],
''
),
} ) ),
withDispatch( dispatch => ( {
updateSeoDescription( seoDescription ) {
dispatch( 'core/editor' ).editPost( {
meta: {
advanced_seo_description: seoDescription,
},
} );
},
} ) ),
] )( SeoPanel );
|