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 }

+
+
+ Gutenberg +
+

+ 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 @@ - - Easy to Use - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 @@ - - Powered by React - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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 @@ - - Focus on What Matters - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 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