PICKME: make the context html better

sirreal · sirreal · commit a5c285378d16 · 2024-11-27T17:45:52.000+01:00
diff --git a/html-api-debugger/interactivity.php b/html-api-debugger/interactivity.php
@@ -63,6 +63,17 @@ function generate_page( string $html, array $options ): string {
 	data-wp-init="run"
 	class="html-api-debugger-container html-api-debugger--grid"
 >
+	<div data-wp-bind--hidden="!state.htmlapiResponse.supports.create_fragment_advanced">
+		<label>Context in which input HTML finds itself
+			<textarea
+				class="context-html"
+				placeholder="Provide a fragment context, for example:&#x0A;<!DOCTYPE html><body>"
+				title="Leave blank to parse a full document."
+				rows="2"
+				data-wp-on-async--input="handleContextHtmlInput"
+			><?php echo "\n" . esc_textarea( str_replace( "\0", '', $options['context_html'] ?? '' ) ); ?></textarea>
+		</label>
+	</div>
 	<div>
 		<h2>Input HTML</h2>
 		<textarea
@@ -139,16 +150,6 @@ class="html-api-debugger-container html-api-debugger--grid"
 				<label>Show closers <input type="checkbox" data-wp-bind--checked="state.showClosers" data-wp-on-async--input="handleShowClosersClick"></label>
 				<label>Show invisible <input type="checkbox" data-wp-bind--checked="state.showInvisible" data-wp-on-async--input="handleShowInvisibleClick"></label>
 				<span><label>Show virtual <input type="checkbox" data-wp-bind--checked="state.showVirtual" data-wp-on-async--input="handleShowVirtualClick"></label></span>
-				<div data-wp-bind--hidden="!state.htmlapiResponse.supports.create_fragment_advanced">
-					<label>Context html
-						<textarea
-							class="context-html"
-							placeholder="Provide a fragment context, for example:&#x0A;<!DOCTYPE html><body>"
-							rows="2"
-							data-wp-on-async--input="handleContextHtmlInput"
-						><?php echo "\n" . esc_textarea( str_replace( "\0", '', $options['context_html'] ?? '' ) ); ?></textarea>
-					</label>
-				</div>
 				<div>
 					<label>CSS Selectors <input placeholder="CSS selector: .my-class" data-wp-on-async--input="handleSelectorChange"></label>
 					<p data-wp-bind--hidden="!state.selectorErrorMessage" data-wp-text="state.selectorErrorMessage" class="error-holder"></p>
