diff --git a/platform-docs/package-lock.json b/platform-docs/package-lock.json
index 7f24ee5d447f8f..04013762e6b962 100644
--- a/platform-docs/package-lock.json
+++ b/platform-docs/package-lock.json
@@ -7,6 +7,7 @@
"": {
"name": "platform-docs",
"version": "0.0.1",
+ "license": "GPL-2.0-or-later",
"dependencies": {
"@docusaurus/core": "2.4.1",
"@docusaurus/preset-classic": "2.4.1",
@@ -21,7 +22,8 @@
"@docusaurus/module-type-aliases": "2.4.1"
},
"engines": {
- "node": ">=16.14"
+ "node": ">=20.10.0",
+ "npm": ">=10.2.3"
}
},
"node_modules/@algolia/autocomplete-core": {
diff --git a/platform-docs/package.json b/platform-docs/package.json
index e51921f3a5e554..ecbd29717148a6 100644
--- a/platform-docs/package.json
+++ b/platform-docs/package.json
@@ -16,8 +16,8 @@
"url": "https://github.com/WordPress/gutenberg/issues"
},
"engines": {
- "node": ">=16.0.0",
- "npm": ">=8 <9"
+ "node": ">=20.10.0",
+ "npm": ">=10.2.3"
},
"dependencies": {
"@docusaurus/core": "2.4.1",
diff --git a/platform-docs/src/components/HomepageBlocks/index.js b/platform-docs/src/components/HomepageBlocks/index.js
new file mode 100644
index 00000000000000..c36f643c3213b9
--- /dev/null
+++ b/platform-docs/src/components/HomepageBlocks/index.js
@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+const blocks = [
+ {
+ title: 'Paragraph',
+ img: require( '@site/static/img/paragraph.png' ).default,
+ },
+ {
+ title: 'Heading',
+ img: require( '@site/static/img/heading.png' ).default,
+ },
+ {
+ title: 'Media & Text',
+ img: require( '@site/static/img/media-text.png' ).default,
+ },
+ {
+ title: 'Image',
+ img: require( '@site/static/img/image.png' ).default,
+ },
+ {
+ title: 'Cover',
+ img: require( '@site/static/img/cover.png' ).default,
+ },
+ {
+ title: 'Gallery',
+ img: require( '@site/static/img/gallery.png' ).default,
+ },
+ {
+ title: 'Video',
+ img: require( '@site/static/img/video.png' ).default,
+ },
+ {
+ title: 'Audio',
+ img: require( '@site/static/img/audio.png' ).default,
+ },
+ {
+ title: 'Columns',
+ img: require( '@site/static/img/columns.png' ).default,
+ },
+ {
+ title: 'File',
+ img: require( '@site/static/img/file.png' ).default,
+ },
+ {
+ title: 'Code',
+ img: require( '@site/static/img/code.png' ).default,
+ },
+ {
+ title: 'List',
+ img: require( '@site/static/img/list.png' ).default,
+ },
+];
+
+function Block( { img, title } ) {
+ return (
+
+
+
+
+
{ title }
+
+ );
+}
+
+export default function HomepageBlocks() {
+ return (
+
+
+
Be your own builder.
+
+ Blocks allow users to build their own content without any
+ coding knowledge. Here’s a selection of the default blocks
+ included with Gutenberg:
+
+
+
+ { blocks.map( ( props, idx ) => (
+
+ ) ) }
+
+
+ );
+}
diff --git a/platform-docs/src/components/HomepageBlocks/styles.module.css b/platform-docs/src/components/HomepageBlocks/styles.module.css
new file mode 100644
index 00000000000000..71607c085b81bb
--- /dev/null
+++ b/platform-docs/src/components/HomepageBlocks/styles.module.css
@@ -0,0 +1,52 @@
+.blocks {
+ padding: 8rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.titleContainer {
+ max-width: 1000px;
+}
+
+.title {
+ font-weight: 400;
+ font-size: 60px;
+}
+
+[data-theme="dark"] .title {
+ color: #fff;
+}
+
+.description {
+ font-size: 20px;
+}
+
+.grid {
+ max-width: 1000px;
+ display: grid;
+ gap: 2rem;
+ grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+}
+
+.image {
+ width: 100%;
+ aspect-ratio: 1/1;
+}
+
+.block {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.blockTitle {
+ padding: 0;
+ margin: 0;
+ font-weight: 400;
+ text-align: center;
+}
+
+[data-theme="dark"] .blockTitle {
+ color: #fff;
+}
diff --git a/platform-docs/src/components/HomepageFeatures/index.js b/platform-docs/src/components/HomepageFeatures/index.js
index 9f42ddd6425e16..d4fabec827d1a2 100644
--- a/platform-docs/src/components/HomepageFeatures/index.js
+++ b/platform-docs/src/components/HomepageFeatures/index.js
@@ -2,6 +2,7 @@
* External dependencies
*/
import React from 'react';
+import clsx from 'clsx';
/**
* Internal dependencies
@@ -11,8 +12,7 @@ import styles from './styles.module.css';
const FeatureList = [
{
title: 'Easy to Use',
- Svg: require( '@site/static/img/undraw_docusaurus_mountain.svg' )
- .default,
+ img: require( '@site/static/img/block-media-text.png' ).default,
description: (
<>
Gutenberg was designed from the ground up to be easily installed
@@ -22,7 +22,7 @@ const FeatureList = [
},
{
title: 'Flexible',
- Svg: require( '@site/static/img/undraw_docusaurus_tree.svg' ).default,
+ img: require( '@site/static/img/plugin-icon.png' ).default,
description: (
<>
Gutenberg allows you to customize the UI of your block editor as
@@ -30,23 +30,33 @@ const FeatureList = [
>
),
},
+ {
+ title: 'Multi devices',
+ img: require( '@site/static/img/mobile-icon.png' ).default,
+ description: <>Work across screen sizes and devices.>,
+ },
{
title: 'Powered by React',
- Svg: require( '@site/static/img/undraw_docusaurus_react.svg' ).default,
+ svg: require( '@site/static/img/react-icon.svg' ).default,
description: <>Extend or customize your block editor using React.>,
},
];
-function Feature( { Svg, title, description } ) {
+function Feature( { svg: Svg, img, title, description } ) {
return (
-
-
-
-
-
{ title }
-
{ description }
+
+ { !! Svg &&
}
+ { !! img && (
+
+ ) }
+
{ title }
+
{ description }
);
}
@@ -54,7 +64,7 @@ function Feature( { Svg, title, description } ) {
export default function HomepageFeatures() {
return (
-
+
{ FeatureList.map( ( props, idx ) => (
) ) }
diff --git a/platform-docs/src/components/HomepageFeatures/styles.module.css b/platform-docs/src/components/HomepageFeatures/styles.module.css
index 1d42ee1c02cc9b..c8c8228422d40b 100644
--- a/platform-docs/src/components/HomepageFeatures/styles.module.css
+++ b/platform-docs/src/components/HomepageFeatures/styles.module.css
@@ -1,21 +1,34 @@
.features {
- display: flex;
- align-items: center;
- padding: 2rem 0;
- background: var(--ifm-color-secondary);
+ padding: 4rem 0;
+ background: url(@site/static/img/gradient_background.png);
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 50% 50%;
+ color: #fff;
}
-.features > div {
- max-width: var(--ifm-container-width);
- margin: auto;
- justify-content: space-between;
+.grid {
+ max-width: 800px;
+ display: grid;
+ gap: 6rem;
+ grid-template-columns: 1fr 1fr;
}
.featureSvg {
- height: 200px;
- width: 200px;
+ height: 40px;
+ width: 40px;
+ fill: #fff;
}
.feature {
- max-width: 30%;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.title {
+ color: #fff;
+ padding: 0;
+ margin: 0;
}
diff --git a/platform-docs/src/components/HomepageThanks/index.js b/platform-docs/src/components/HomepageThanks/index.js
new file mode 100644
index 00000000000000..3e332ae5d21991
--- /dev/null
+++ b/platform-docs/src/components/HomepageThanks/index.js
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.module.css';
+
+export default function HomepageThanks() {
+ return (
+
+
+
Thanks for trying Gutenberg.
+
+
+ Gutenberg is project by the WordPress community. New
+ developments and experiments will continue in the{ ' ' }
+
+ Gutenberg repository
+
+ .
+
+
+
+
+
+ );
+}
diff --git a/platform-docs/src/components/HomepageThanks/styles.module.css b/platform-docs/src/components/HomepageThanks/styles.module.css
new file mode 100644
index 00000000000000..a54b6f5601e886
--- /dev/null
+++ b/platform-docs/src/components/HomepageThanks/styles.module.css
@@ -0,0 +1,31 @@
+.thanks {
+ padding: 8rem 0;
+ background: rgb(236, 246, 250);
+ color: #000;
+}
+
+[data-theme="dark"] .thanks a {
+ color: var(--ifm-color-secondary);
+}
+
+.container {
+ max-width: 1000px;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+.title {
+ font-weight: 400;
+ font-size: 60px;
+}
+
+.description {
+ font-size: 20px;
+}
+
+.columns {
+ display: grid;
+ gap: 4rem;
+ grid-template-columns: 1fr 1fr;
+}
diff --git a/platform-docs/src/components/HomepageTrustedBy/styles.module.css b/platform-docs/src/components/HomepageTrustedBy/styles.module.css
index 8481a032b43386..c06a34f9c05283 100644
--- a/platform-docs/src/components/HomepageTrustedBy/styles.module.css
+++ b/platform-docs/src/components/HomepageTrustedBy/styles.module.css
@@ -1,5 +1,5 @@
.container {
- padding: 5rem 0 2rem;
+ padding: 5rem 0 4rem;
background: #fff;
color: var(--ifm-color-gray-800);
}
diff --git a/platform-docs/src/css/custom.css b/platform-docs/src/css/custom.css
index 34af00725ff15a..d85df1a98291b7 100644
--- a/platform-docs/src/css/custom.css
+++ b/platform-docs/src/css/custom.css
@@ -1,24 +1,32 @@
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
+body {
+ font-family:
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ Roboto,
+ Oxygen-Sans,
+ Ubuntu,
+ Cantarell,
+ "Helvetica Neue",
+ sans-serif;
+}
-/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #3858e9;
- --ifm-color-primary-dark: #3858e9;
- --ifm-color-primary-darker: #3858e9;
- --ifm-color-primary-darkest: #3858e9;
- --ifm-color-primary-light: #3858e9;
- --ifm-color-primary-lighter: #3858e9;
- --ifm-color-primary-lightest: #3858e9;
+ --ifm-color-primary-dark: #1e42e6;
+ --ifm-color-primary-darker: #183cdd;
+ --ifm-color-primary-darkest: #1431b6;
+ --ifm-color-primary-light: #526eec;
+ --ifm-color-primary-lighter: #5f79ed;
+ --ifm-color-primary-lightest: #869af2;
--ifm-color-secondary: #e9edfd;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+ --ifm-heading-color: #000;
+ --ifm-navbar-shadow: rgba(0, 0, 0, 0.1) 0 1px 1px 0;
}
-/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
--ifm-color-primary: #c6d0ff;
--ifm-color-primary-dark: #c6d0ff;
diff --git a/platform-docs/src/pages/index.js b/platform-docs/src/pages/index.js
index bb1226f7d8bd64..d820e6fdcdc8cf 100644
--- a/platform-docs/src/pages/index.js
+++ b/platform-docs/src/pages/index.js
@@ -13,17 +13,32 @@ import HomepageFeatures from '@site/src/components/HomepageFeatures';
*/
import styles from './index.module.css';
import HomepageTrustedBy from '../components/HomepageTrustedBy';
+import HomepageBlocks from '../components/HomepageBlocks';
+import HomepageThanks from '../components/HomepageThanks';
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
-
-
{ siteConfig.title }
+
+
+
+
+
+ Say hello to Gutenberg, the block editor.
+
{ siteConfig.tagline }
Getting started - 10min ⏱️
@@ -44,6 +59,8 @@ export default function Home() {
+
+
diff --git a/platform-docs/src/pages/index.module.css b/platform-docs/src/pages/index.module.css
index 7b210d6cc440c5..5f79b7562f5797 100644
--- a/platform-docs/src/pages/index.module.css
+++ b/platform-docs/src/pages/index.module.css
@@ -1,23 +1,31 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
+.heroLogo {
+ padding-bottom: 3rem;
+}
+
+.heroTitle {
+ font-weight: 400;
+ font-size: 80px;
+}
+
+[data-theme="dark"] .heroTitle {
+ color: #fff;
+}
.heroBanner {
- padding: 10rem 0;
- text-align: center;
position: relative;
overflow: hidden;
}
-@media screen and (max-width: 996px) {
- .heroBanner {
- padding: 2rem;
- }
+.container {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ max-width: 800px;
+ padding: 5rem 0;
}
.buttons {
- display: flex;
- align-items: center;
- justify-content: center;
+ --ifm-button-border-radius: 50px;
+ --ifm-button-size-multiplier: 1.5;
+ --ifm-button-font-weight: 500;
}
diff --git a/platform-docs/static/img/audio.png b/platform-docs/static/img/audio.png
new file mode 100644
index 00000000000000..513caf78e57050
Binary files /dev/null and b/platform-docs/static/img/audio.png differ
diff --git a/platform-docs/static/img/block-media-text.png b/platform-docs/static/img/block-media-text.png
new file mode 100644
index 00000000000000..9e7b78a96dcdfa
Binary files /dev/null and b/platform-docs/static/img/block-media-text.png differ
diff --git a/platform-docs/static/img/code.png b/platform-docs/static/img/code.png
new file mode 100644
index 00000000000000..2ca9e3404890da
Binary files /dev/null and b/platform-docs/static/img/code.png differ
diff --git a/platform-docs/static/img/columns.png b/platform-docs/static/img/columns.png
new file mode 100644
index 00000000000000..2f12fca11824a3
Binary files /dev/null and b/platform-docs/static/img/columns.png differ
diff --git a/platform-docs/static/img/cover.png b/platform-docs/static/img/cover.png
new file mode 100644
index 00000000000000..0ad011f85a27ee
Binary files /dev/null and b/platform-docs/static/img/cover.png differ
diff --git a/platform-docs/static/img/file.png b/platform-docs/static/img/file.png
new file mode 100644
index 00000000000000..d0fc342541baa7
Binary files /dev/null and b/platform-docs/static/img/file.png differ
diff --git a/platform-docs/static/img/gallery.png b/platform-docs/static/img/gallery.png
new file mode 100644
index 00000000000000..de1bc9689f1549
Binary files /dev/null and b/platform-docs/static/img/gallery.png differ
diff --git a/platform-docs/static/img/gradient_background.png b/platform-docs/static/img/gradient_background.png
new file mode 100644
index 00000000000000..851e12b1a91d1b
Binary files /dev/null and b/platform-docs/static/img/gradient_background.png differ
diff --git a/platform-docs/static/img/gutenberg_icon.png b/platform-docs/static/img/gutenberg_icon.png
new file mode 100644
index 00000000000000..44f41d0019552c
Binary files /dev/null and b/platform-docs/static/img/gutenberg_icon.png differ
diff --git a/platform-docs/static/img/heading.png b/platform-docs/static/img/heading.png
new file mode 100644
index 00000000000000..2432805003d671
Binary files /dev/null and b/platform-docs/static/img/heading.png differ
diff --git a/platform-docs/static/img/image.png b/platform-docs/static/img/image.png
new file mode 100644
index 00000000000000..6a4459d791c6bf
Binary files /dev/null and b/platform-docs/static/img/image.png differ
diff --git a/platform-docs/static/img/list.png b/platform-docs/static/img/list.png
new file mode 100644
index 00000000000000..59b848107ac8b2
Binary files /dev/null and b/platform-docs/static/img/list.png differ
diff --git a/platform-docs/static/img/media-text.png b/platform-docs/static/img/media-text.png
new file mode 100644
index 00000000000000..36d4d2b6a2f1c3
Binary files /dev/null and b/platform-docs/static/img/media-text.png differ
diff --git a/platform-docs/static/img/mobile-icon.png b/platform-docs/static/img/mobile-icon.png
new file mode 100644
index 00000000000000..1decbca5daa2f6
Binary files /dev/null and b/platform-docs/static/img/mobile-icon.png differ
diff --git a/platform-docs/static/img/paragraph.png b/platform-docs/static/img/paragraph.png
new file mode 100644
index 00000000000000..4a47dfd6edaf15
Binary files /dev/null and b/platform-docs/static/img/paragraph.png differ
diff --git a/platform-docs/static/img/plugin-icon.png b/platform-docs/static/img/plugin-icon.png
new file mode 100644
index 00000000000000..fcb257e46e16b6
Binary files /dev/null and b/platform-docs/static/img/plugin-icon.png differ
diff --git a/platform-docs/static/img/react-icon.svg b/platform-docs/static/img/react-icon.svg
new file mode 100644
index 00000000000000..1c5118db70fb62
--- /dev/null
+++ b/platform-docs/static/img/react-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/platform-docs/static/img/undraw_docusaurus_mountain.svg b/platform-docs/static/img/undraw_docusaurus_mountain.svg
deleted file mode 100644
index af961c49a88882..00000000000000
--- a/platform-docs/static/img/undraw_docusaurus_mountain.svg
+++ /dev/null
@@ -1,171 +0,0 @@
-
diff --git a/platform-docs/static/img/undraw_docusaurus_react.svg b/platform-docs/static/img/undraw_docusaurus_react.svg
deleted file mode 100644
index 94b5cf08f88f22..00000000000000
--- a/platform-docs/static/img/undraw_docusaurus_react.svg
+++ /dev/null
@@ -1,170 +0,0 @@
-
diff --git a/platform-docs/static/img/undraw_docusaurus_tree.svg b/platform-docs/static/img/undraw_docusaurus_tree.svg
deleted file mode 100644
index d9161d33920c97..00000000000000
--- a/platform-docs/static/img/undraw_docusaurus_tree.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-
diff --git a/platform-docs/static/img/video.png b/platform-docs/static/img/video.png
new file mode 100644
index 00000000000000..d24f2a75547f4c
Binary files /dev/null and b/platform-docs/static/img/video.png differ