PoC for decoupling metabox and sidebar

[vraja-pro]

If I remove the add_meta_box from class-metabox.php, I'm left with sidebar, however, I do need to find a away to add the hidden fields since the sidebar is using them. This is done in the method render_hidden_fields. render_hidden_fields is rendering the hidden fields of a form that is submitted once the post is updated. In the metabox class it is rendered as part of the metabox and the sidebar is depending on those fields to get data relating to:

• SEO analysis
• Readability analysis
• Inclusive language analysis

Those fields are also simultaneously updated when settings are changed in the metabox or sidebar. This separation is also done in elementor.php. The render_hidden_fields is rendering a complete form while the metabox render_hidden_fields is rendering only the input fields. Without the metabox, the hidden fields are not needed. Once the metabox is removed, the data should be from the used fields not the hidden fields. Better to use redux store and not hidden fields.

The ideal solution would be to get the data from the store (get the initial data from localised script) and update the data in the store ( That is done here: wordpress-seo/packages/js/src/helpers/fields/AnalysisFields.js). From the store it should be accessible to the metabox, sidebar and form. This change might require the changing Meta_Fields_Presenter since it returns the html input fields while will need to construct them on the JS side. Using this guide: The meta fields can be registered like so:

add_action( 'admin_init', [ $this, 'register_meta_fields'] );
public function register_meta_fields() {
		register_meta('post', '_yoast_wpseo_focuskw', array(
			'show_in_rest' => true,
			'single' => true,
			'type' => 'string',
		));
}

And then they will appear under meta in the core/editor store:

wp.data.select( 'core/editor' ).getCurrentPost().meta;

Another way to retrieve and update this meta with useEntityProp from :

import { useEntityProp } from "@wordpress/core-data";
const MetaBlockField = () => {
	const [ meta, setMeta ] = useEntityProp( "postType", "post", "meta" );
	const saveValue = ( content ) => {
		console.log( content );
		setMeta( {
			...meta,
			_yoast_wpseo_focuskw: content,
		} );
	};

	return <TextControl
		label="Meta Block Field"
		defaultValue={ meta._yoast_wpseo_focuskw }
		onChange={ content => saveValue( content ) }
	/>;
};

Tried to implement this for focus keyphrase, was able to add it to the store but it won't save. (based on this example).

Was able to fix it by adding shoe_in_rest => true when registering the meta in WPSEO_Meta init method.

JS side is separated with different slots and fills according to location from a LocationProvider.

• global $post does not work on site editor and neither other WP methods related to current post.
• The redux store core/edit-site include editedPost.context where we can get post id, and post type

post-edit.js Register the store for the usage of the block editor and the metabox, however it also initialise the tabs for the metabox. Either that should be separated or conditioned.

Files to change when moving away from hidden fields:

• packages/yoastseo/src/app.js on App.prototype.bindInputEvent which adds event listener to the hidden fields.
• packages/js/src/initializer/post-scraper.js in initializePostAnalysis for signing value to hidden fields: $( "#yoast_wpseo_focuskw" ).val( focusKeyword );
• packages/js/src/analysis/PostDataCollector.js under PostDataCollector.prototype.getKeyword
• packages/js/src/components/contentAnalysis/KeywordInputComponent.js
• packages/js/src/helpers/fields/AnalysisFields.js under static get keyphraseElement

The hidden fields method should be preserved in case user is using the classic editor. In that casr the store is not available. I recommend assigning the initial state and updating the data according to 3 different states:

• Classic editor (hidden fields) (only for metabox)
• Block editor ( core/editor store ) ( for both metabox and sidebar)
• Site editor ( core store) (only for sidebar)

I added the hidden fields values to wpseoScriptData. I added a JS class to fetch initial value for hidden fields from wpseoScriptData and update according to the editor (PostMeta.js). The following task list is for all the actions that need to be updated, and the classes that are used now and should be removed:

### Hidden fields to treat and - classes and  path (packages/js/src)
- [x] focuskw - AnalysisFields - /redux/actions/focusKeyword.js
- [ ] content_score - AnalysisFields - /redux/actions/cornerstoneContent.js
- [ ] inclusive_language_score, linkdex - AnalysisFields - /redux/actions/contentAnalysis.js
- [ ] is_cornerstone - AnalysisFields - /redux/actions/focusKeyword.js
- [ ] title, metadesc, slug - SearchMetadataFields - /elementor/redux/actions/snippetEditor.js
- [ ] estimated-reading-time-minutes - EstimatedReadingTimeFields - /insights/redux/actions.js
- [ ] meta-robots-noindex - AdvancedFields - /redux/actions/advancedSettings.js
- [ ] meta-robots-nofollow - AdvancedFields - /redux/actions/advancedSettings.js
- [ ] meta-robots-adv - AdvancedFields - /redux/actions/advancedSettings.js
- [ ] bctitle - AdvancedFields - /redux/actions/advancedSettings.js
- [ ] canonical - AdvancedFields - /redux/actions/advancedSettings.js
- [ ] wordproof_timestamp - AdvancedFields - /redux/actions/advancedSettings.js
- [ ] schema_page_type - SchemaFields - redux/actions/schemaTab.js, /containers/SchemaTab.js
- [ ] schema_article_type - SchemaFields - redux/actions/schemaTab.js, /containers/SchemaTab.js
- [ ] opengraph-title - FacebookFields - /redux/actions/facebookEditor.js
- [ ] opengraph-description - FacebookFields - /redux/actions/facebookEditor.js
- [ ] opengraph-image - FacebookFields - /redux/actions/facebookEditor.js
- [ ] opengraph-image-id - FacebookFields - /redux/actions/facebookEditor.js
- [ ] twitter-title - TwitterFields - /redux/actions/twitterEditor.js
- [ ] twitter-description - TwitterFields - /redux/actions/twitterEditor.js
- [ ] twitter-image - TwitterFields - /redux/actions/twitterEditor.js
- [ ] twitter-image-id - TwitterFields - /redux/actions/twitterEditor.js
- [ ] primary_category_term
- [ ] check for other fields from addons

### Tasks
- [ ] Register analysis store separate from the editor type.