simple-seo/simple-seo-sidebar.js at main · bgardner/simple-seo · GitHub

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/**
 * Block editor sidebar for Simple SEO plugin.
 */

( function( wp ) {
	const { registerPlugin } = wp.plugins;
	const { PluginDocumentSettingPanel } = wp.editPost;
	const { TextControl, TextareaControl, SelectControl } = wp.components;
	const { useSelect, useDispatch } = wp.data;
	const { __, _n, sprintf } = wp.i18n;
	const { createElement: el } = wp.element;

	function SimpleSEOPlugin() {
		const meta = useSelect(
			select => select( 'core/editor' ).getEditedPostAttribute( 'meta' ),
			[]
		);
		const { editPost } = useDispatch( 'core/editor' );

		const {
			simple_seo_seo_title = '',
			simple_seo_seo_description = '',
			simple_seo_seo_robots = '',
			simple_seo_seo_canonical = '',
		} = meta;

		function onChangeMeta( key, value ) {
			editPost( { meta: { ...meta, [ key ]: value } } );
		}

		// Character counts.
		const titleCount = simple_seo_seo_title.length;
		const descCount  = simple_seo_seo_description.length;

		return el(
			PluginDocumentSettingPanel,
			{
				name: 'simple-seo',
				title: __( 'Simple SEO', 'simple-seo' ),
				initialOpen: true,
			},

			// SEO Title.
			el( TextControl, {
				label: __( 'SEO Title', 'simple-seo' ),
				value: simple_seo_seo_title,
				onChange: value => onChangeMeta( 'simple_seo_seo_title', value ),
			} ),
			// Title counter.
			el(
				'p',
				{ style: { marginTop: '4px', marginBottom: '12px', fontSize: '12px', color: '#666' } },
				sprintf(
					/* translators: %s: character count */
					_n( '%s character', '%s characters', titleCount, 'simple-seo' ),
					titleCount
				)
			),

			// Meta Description.
			el( TextareaControl, {
				label: __( 'Meta Description', 'simple-seo' ),
				value: simple_seo_seo_description,
				onChange: value => onChangeMeta( 'simple_seo_seo_description', value ),
			} ),
			// Description counter.
			el(
				'p',
				{ style: { marginTop: '4px', marginBottom: '12px', fontSize: '12px', color: '#666' } },
				sprintf(
					/* translators: %s: character count */
					_n( '%s character', '%s characters', descCount, 'simple-seo' ),
					descCount
				)
			),

			// Robots dropdown.
			el( SelectControl, {
				label: __( 'Robots', 'simple-seo' ),
				value: simple_seo_seo_robots,
				options: [
					{ label: __( 'Index, Follow',    'simple-seo' ), value: 'index,follow' },
					{ label: __( 'Noindex, Follow',  'simple-seo' ), value: 'noindex,follow' },
					{ label: __( 'Index, Nofollow',  'simple-seo' ), value: 'index,nofollow' },
					{ label: __( 'Noindex, Nofollow','simple-seo' ), value: 'noindex,nofollow' },
				],
				onChange: value => onChangeMeta( 'simple_seo_seo_robots', value ),
			} ),

			// Canonical URL.
			el( TextControl, {
				label: __( 'Canonical URL', 'simple-seo' ),
				type: 'url',
				value: simple_seo_seo_canonical,
				onChange: value => onChangeMeta( 'simple_seo_seo_canonical', value ),
			} )
		);
	}

	registerPlugin( 'simple-seo', { render: SimpleSEOPlugin } );
} )( window.wp );