Reactify Advanced settings tab

bintzandt commented 4 years ago

Explanation

As preparation for the new react modal, we need to reactify components that will be rendered in there. This issue describes how the "Advanced" tab in the metabox should be reactified.

This has been done as clearly as possible, without having to dive too much in the context. If you find any inconsistencies or think that there is a better way, you are free to implement that. Keep it mind though that the design

Technical decisions

Requirements to show the tab

Users need to have the wpseo_edit_advanced_metadata permission in order to have the "Advanced" tab
```
WPSEO_Capability_Utils::current_user_can( 'wpseo_edit_advanced_metadata' )
```

disableadvanced_meta should be false

WPSEO_Options::get( 'disableadvanced_meta' ) === false

Tasks

[x] Check when the redirect field is visible and implement the same logic in the reactified version
[x] For all of the input fields in the tab, create a reactified version
[x] The selection fields need to be initialized using Select2. A code example is provided below.
[x] Remove the original "Advanced settings" tab. Only the original input fields need to remain.
[x] Listen to the change event of the Select2 component and update the value of the input field. @Xyfi will have a look at this to see whether he can describe the needed steps in more detail.
[ ] Make sure to use a Warning Alert for the Warning: even though you can set the meta robots setting here, the entire site is set to noindex in the sitewide privacy settings, so these settings won't have an effect. message.
[ ] Add tests
- [ ] Snapshot test
- [ ] Test evenListener: does the hidden input field change when a value is edited?

Initializing Select2

Note: this is only an example. Please use the correct values and make abstractions where necessary.

import Collapsible from "./SidebarCollapsible";
import { __ } from "@wordpress/i18n";
import { Component } from "@wordpress/element";
class Select2 extends Component {
    componentDidMount() {
        this.select2 = jQuery( "#input-selection" );
        this.select2.select2( { width: "100%" } );
        this.select2.on( "change", e => {
            console.log( e.target.options );
        } );
    }
    render() {
        return (
        `   <select id="input-selection" className="input-selection" name="states[]">
                <option value="AL">Alabama</option>
                <option value="WY">Wyoming</option>
            </select>
        );`
    }
}
class AdvancedSettings extends Component {
    render() {
        return (
            <Collapsible id={ "yoast-cornerstone-collapsible" } title={ __( "Advanced", "wordpress-seo" ) }>
                <Select2 />
            </Collapsible>
        );
    }
}
export default AdvancedSettings;

bintzandt commented 4 years ago

Putting this to blocked because it needs the new components, see https://github.com/Yoast/javascript/issues/550. Picking those up first.