-
Notifications
You must be signed in to change notification settings - Fork 384
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6757 from ampproject/remove/sandboxing-filter-opt-in
Replace `amp_experimental_sandboxing_enabled` filter with Sandboxing experiment toggle
- Loading branch information
Showing
11 changed files
with
338 additions
and
255 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createInterpolateElement, useContext } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { CheckboxControl } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { Options } from '../components/options-context-provider'; | ||
| import { AMPDrawer } from '../components/amp-drawer'; | ||
| import { STANDARD } from '../common/constants'; | ||
|
|
||
| /** | ||
| * Component rendering the Sandboxing experiment. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {string} props.focusedSection Focused section. | ||
| */ | ||
| export function Sandboxing( { focusedSection } ) { | ||
| const { updateOptions, editedOptions: { | ||
| sandboxing_enabled: sandboxingEnabled, | ||
| sandboxing_level: sandboxingLevel, | ||
| theme_support: themeSupport, | ||
| } } = useContext( Options ); | ||
|
|
||
| if ( STANDARD !== themeSupport ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <AMPDrawer | ||
| heading={ ( | ||
| <h3> | ||
| { __( 'Sandboxing (Experimental)', 'amp' ) } | ||
| </h3> | ||
| ) } | ||
| hiddenTitle={ __( 'Sandboxing (Experimental)', 'amp' ) } | ||
| id="sandboxing" | ||
| initialOpen={ 'sandboxing' === focusedSection } | ||
| > | ||
| <p> | ||
| { __( 'Try out a more flexible AMP by generating pages that use AMP components without requiring AMP validity! By selecting a sandboxing level, you are indicating the minimum degree of sanitization. For example, if you selected the loose level but have a page without any POST form and no custom scripts, it will still be served as valid AMP—the same as if you had selected the strict level.', 'amp' ) } | ||
| </p> | ||
|
|
||
| <CheckboxControl | ||
| className="sandboxing-enabled" | ||
| checked={ sandboxingEnabled } | ||
| label={ __( 'Enable sandboxing experiment', 'amp' ) } | ||
| onChange={ | ||
| ( newChecked ) => { | ||
| updateOptions( { sandboxing_enabled: newChecked } ); | ||
| } | ||
| } | ||
| /> | ||
|
|
||
| { sandboxingEnabled && ( | ||
| <ol> | ||
| <li> | ||
| <input | ||
| type="radio" | ||
| id="sandboxing-level-1" | ||
| checked={ 1 === sandboxingLevel } | ||
| onChange={ () => { | ||
| updateOptions( { sandboxing_level: 1 } ); | ||
| } } | ||
| /> | ||
| <label htmlFor="sandboxing-level-1"> | ||
| { createInterpolateElement( | ||
| __( '<b>Loose:</b> Do not remove any AMP-invalid markup by default, including custom scripts. CSS processing is disabled.', 'amp' ), | ||
| { b: <strong /> }, | ||
| ) } | ||
| </label> | ||
| </li> | ||
| <li> | ||
| <input | ||
| type="radio" | ||
| id="sandboxing-level-2" | ||
| checked={ 2 === sandboxingLevel } | ||
| onChange={ () => { | ||
| updateOptions( { sandboxing_level: 2 } ); | ||
| } } | ||
| /> | ||
| <label htmlFor="sandboxing-level-2"> | ||
| { createInterpolateElement( | ||
| __( '<b>Moderate:</b> Remove anything invalid AMP except for POST forms, excessive CSS, and other PX-verified markup.', 'amp' ), | ||
| { b: <strong /> }, | ||
| ) } | ||
| </label> | ||
| </li> | ||
| <li> | ||
| <input | ||
| type="radio" | ||
| id="sandboxing-level-3" | ||
| checked={ 3 === sandboxingLevel } | ||
| onChange={ () => { | ||
| updateOptions( { sandboxing_level: 3 } ); | ||
| } } | ||
| /> | ||
| <label htmlFor="sandboxing-level-3"> | ||
| { createInterpolateElement( | ||
| __( '<b>Strict:</b> Require valid AMP, removing all markup that causes validation errors (except for excessive CSS).', 'amp' ), | ||
| { b: <strong /> }, | ||
| ) } | ||
| </label> | ||
| </li> | ||
| </ol> | ||
| ) } | ||
| </AMPDrawer> | ||
| ); | ||
| } | ||
| Sandboxing.propTypes = { | ||
| focusedSection: PropTypes.string, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.