Fix dedicated IDE page

Signed-off-by: Joe Fusco <[email protected]>
wp-graphql · Feb 28, 2024 · bb774f9 · bb774f9
1 parent 0d8e7df
commit bb774f9
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/styles/wpgraphql-ide.css b/styles/wpgraphql-ide.css
@@ -96,8 +96,8 @@
   color: inherit;
 }
 
-/* Fix layout shift from drawer opening */
-body {
+/* Fix layout shift from drawer opening everywhere except the dedicated IDE page */
+body:not(.graphql_page_graphql-ide) {
   top: var(--wp-admin--admin-bar--height) !important;
 }
 
@@ -119,3 +119,26 @@ body {
 .wpgraphql-logo-link {
   display: flex;
 }
+
+/* Dedicated IDE page for new editor */
+
+/* Ful-width editor on dedicated page */
+body.graphql_page_graphql-ide #wpcontent {
+  padding-left: 0;
+}
+/* Ful-height editor on dedicated page */
+body.graphql_page_graphql-ide #wpgraphql-ide-root {
+  height: calc(100vh - var(--wp-admin--admin-bar--height));
+}
+
+body.graphql_page_graphql-ide .AppRoot {
+  height: 100%;
+}
+
+body.graphql_page_graphql-ide #wpbody-content {
+  padding: 0;
+}
+
+body.graphql_page_graphql-ide #wpfooter {
+  display: none
+}
diff --git a/wpgraphql-ide.php b/wpgraphql-ide.php
@@ -139,7 +139,7 @@ function register_dedicated_ide_menu(): void {
  * @return void
  */
 function render_dedicated_ide_page(): void {
-    echo '<div id="' . WPGRAPHQL_IDE_ROOT_ELEMENT_ID . '">IDE GOES HERE</div>';
+    echo '<div id="' . WPGRAPHQL_IDE_ROOT_ELEMENT_ID . '"></div>';
 }
 
 /**