summaryrefslogtreecommitdiff
blob: 38496052a926ab2e27dae9d09da50ecabbb8e1f9 (plain)
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 );