diff --git a/README.md b/README.md index c159699d86dd0..aaed2dfa32d24 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,8 @@ Gutenberg is the project name. Conversations and discussions take place in #core > The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery. — Matt Mullenweg +WordPress already supports a large amount of "blocks", but doesn't surface them very well, nor give them many rich layout options. By embracing the blocky nature, we can hopefully surface blocks that already exist, as well as attach more advanced layout options to each of them, allowing you to easily write richer posts. + ## Overview - What are little blocks made of? @@ -22,58 +24,100 @@ Gutenberg is the project name. Conversations and discussions take place in #core - WP Post grammar parser. -## Mockups - -These mockups are all subject to change and feedback. - -**Blocks & Formatting** +## How Designers Can Contribute -![Hover](mockups/Formatting, Hover.png) +The editor we're building means to make the editing experience better for every WordPress user, by creating an interface that "makes writing rich posts effortless, and has 'blocks' to make it easy what today might take shortcodes, custom HTML, or 'mystery meat' embed discovery", to quote the kickoff goal. -![Click](mockups/Formatting, Click.png) +That is difficult. So your designer eyes and help is appreciated, in what capacity you'd like to contribute. -![Drag & Drop](mockups/Drag and drop.png) +A good place to start is having a look at the current mockups and the UI prototype. We also have a GitHub repository, where anything labelled "Design" could use thoughtful replies, mockups, animatics, sketches, doodles. -**New Blocks** +With regards to specific changes to the design, the details & execution (like colors, borders, shadows), those are best done as minimal and specific iterations on the work that precedes it, so we can ideally compare. That doesn't preclude wild ideas, but should be considered for precise tasks like "give the pressed buttons more contrast", things in that vein. -![New Blocks](mockups/New Blocks.png) -![Insert Between](mockups/Insert Between.png) -![Insert Between, Keyboard Only](mockups/Insert Between, Keyboard.png) -![Insert](mockups/Insert.png) +Grab the Sketch file so you don't have to start from scratch: -**Type Switcher** +**Download, Updated Mar. 10th.** -![Switcher](mockups/Type Switcher.png) +## Mockups -**Other Blocks** +These mockups are all subject to change and feedback. -![Image](mockups/Image.png) -![Quote](mockups/Quote.png) -![Quote 2](mockups/Quote 2.png) -![Headings](mockups/Headings.png) +**Basic Blocks** + +_Text_ +![Text, Neutral](mockups/Text, Neutral.png) +_Text, Hover_ +![Text, Hover](mockups/Text, Hover.png) +_Text, Selected_ +![Text, Selected](mockups/Text, Selected.png) + +_Image_ +![Image, Neutral](mockups/Image, Neutral.png) +_Image, Hover_ +![Image, Hover](mockups/Image, Hover.png) +_Image, Selected_ +![Image, Selected](mockups/Image, Selected.png) +_Image, Caption_ +![Image, Caption](mockups/Image, Caption.png) + +_Quote_ +![Quote, Neutral](mockups/Quote, Neutral.png) +![Quote, Hover](mockups/Quote, Hover.png) +![Quote, Selected](mockups/Quote, Selected.png) +![Quote, Citation](mockups/Quote, Citation.png) + +_Quote 2_ +![Quote 2, Neutral](mockups/Quote 2, Neutral.png) +_Quote 2, Hover_ +![Quote 2, Hover](mockups/Quote 2, Hover.png) +_Quote 2, Selected_ +![Quote 2, Selected](mockups/Quote 2, Selected.png) + +_Heading_ +![Heading, Neutral](mockups/Heading, Neutral.png) +_Heading, Hover_ +![Heading, Hover](mockups/Heading, Hover.png) +_Heading, Selected_ +![Heading, Selected](mockups/Heading, Selected.png) + +_Empty Embed_ +![Empty Embed, Neutral](mockups/Empty Embed, Neutral.png) +_Empty Embed, Hover_ +![Empty Embed, Hover](mockups/Empty Embed, Hover.png) +_Embed, Neutral_ +![Embed, Neutral](mockups/Embed, Neutral.png) +_Embed, Hover_ +![Embed, Hover](mockups/Embed, Hover.png) +_Embed, Selected_ +![Embed, Selected](mockups/Embed, Selected.png) +_Embed, Caption_ +![Embed, Caption](mockups/Embed, Caption.png) + +_Gallery_ +![Gallery, Neutral](mockups/Gallery, Neutral.png) +_Gallery, Hover_ +![Gallery, Hover](mockups/Gallery, Hover.png) +_Gallery, Selected_ +![Gallery, Selected](mockups/Gallery, Selected.png) +_Gallery, Selected Image_ +![Gallery, Selected Image](mockups/Gallery, Selected Image.png) +_Gallery, Caption_ +![Gallery, Caption](mockups/Gallery, Caption.png) + +_Basic UI controls_ +![Drag and drop](mockups/Drag and drop.png) +![Insert](mockups/Insert.png) +![Newlines](mockups/Newlines.png) +![Type Switcher](mockups/Type Switcher.png) -**Early Desktop Chrome Concept** +**Early Admin UI Concept** **Note:** This is how it _could_ look. -![Desktop](mockups/Admin Chrome.png) +![Admin UI](mockups/Admin UI.png) -![Desktop, Sidebar Open](mockups/Admin Chrome, Sidebar Open.png) +![Admin UI, Sidebar Open](mockups/Admin UI, Sidebar Open.png) -**Early Mobile Chrome Concept** +**Early Mobile UI Concept** ![Mobile](mockups/Mobile.png) - -## How Designers Can Contribute - -The editor we're building means to make the editing experience better for every WordPress user, by creating an interface that "makes writing rich posts effortless, and has 'blocks' to make it easy what today might take shortcodes, custom HTML, or 'mystery meat' embed discovery", to quote the kickoff goal. - -That is difficult. So your designer eyes and help is appreciated, in what capacity you'd like to contribute. - -A good place to start is having a look at the current mockups and the UI prototype. We also have a GitHub repository, where anything labelled "Design" could use thoughtful replies, mockups, animatics, sketches, doodles. - -With regards to specific changes to the design, the details & execution (like colors, borders, shadows), those are best done as minimal and specific iterations on the work that precedes it, so we can ideally compare. That doesn't preclude wild ideas, but should be considered for precise tasks like "give the pressed buttons more contrast", things in that vein. - -Grab the Sketch file so you don't have to start from scratch: - -**Download, Updated Mar. 1st.** diff --git a/mockups/Admin Chrome, Sidebar Open.png b/mockups/Admin Chrome, Sidebar Open.png deleted file mode 100644 index 5495f48d41c7c..0000000000000 Binary files a/mockups/Admin Chrome, Sidebar Open.png and /dev/null differ diff --git a/mockups/Admin Chrome.png b/mockups/Admin Chrome.png deleted file mode 100644 index 5b38c81a4e445..0000000000000 Binary files a/mockups/Admin Chrome.png and /dev/null differ diff --git a/mockups/Admin UI, Sidebar Open.png b/mockups/Admin UI, Sidebar Open.png new file mode 100644 index 0000000000000..0461c534f602a Binary files /dev/null and b/mockups/Admin UI, Sidebar Open.png differ diff --git a/mockups/Admin UI.png b/mockups/Admin UI.png new file mode 100644 index 0000000000000..90946c1243d3e Binary files /dev/null and b/mockups/Admin UI.png differ diff --git a/mockups/Drag and drop.png b/mockups/Drag and drop.png index 0a4758a91b80a..ca10d2ed4c4f1 100644 Binary files a/mockups/Drag and drop.png and b/mockups/Drag and drop.png differ diff --git a/mockups/Embed, Caption.png b/mockups/Embed, Caption.png new file mode 100644 index 0000000000000..ae57a550a4fb8 Binary files /dev/null and b/mockups/Embed, Caption.png differ diff --git a/mockups/Embed, Hover.png b/mockups/Embed, Hover.png new file mode 100644 index 0000000000000..0497d94042800 Binary files /dev/null and b/mockups/Embed, Hover.png differ diff --git a/mockups/Embed, Neutral.png b/mockups/Embed, Neutral.png new file mode 100644 index 0000000000000..cead43bde8476 Binary files /dev/null and b/mockups/Embed, Neutral.png differ diff --git a/mockups/Embed, Selected.png b/mockups/Embed, Selected.png new file mode 100644 index 0000000000000..c3000e076ff4a Binary files /dev/null and b/mockups/Embed, Selected.png differ diff --git a/mockups/Empty Embed, Hover.png b/mockups/Empty Embed, Hover.png new file mode 100644 index 0000000000000..6f1aa7ac5d2f9 Binary files /dev/null and b/mockups/Empty Embed, Hover.png differ diff --git a/mockups/Empty Embed, Neutral.png b/mockups/Empty Embed, Neutral.png new file mode 100644 index 0000000000000..c4456c62a36a2 Binary files /dev/null and b/mockups/Empty Embed, Neutral.png differ diff --git a/mockups/Formatting, Click.png b/mockups/Formatting, Click.png deleted file mode 100644 index e1fa010738988..0000000000000 Binary files a/mockups/Formatting, Click.png and /dev/null differ diff --git a/mockups/Formatting, Hover.png b/mockups/Formatting, Hover.png deleted file mode 100644 index 7614ff2fe4ec0..0000000000000 Binary files a/mockups/Formatting, Hover.png and /dev/null differ diff --git a/mockups/Gallery, Caption.png b/mockups/Gallery, Caption.png new file mode 100644 index 0000000000000..f5e39d42cfc4d Binary files /dev/null and b/mockups/Gallery, Caption.png differ diff --git a/mockups/Gallery, Hover.png b/mockups/Gallery, Hover.png new file mode 100644 index 0000000000000..f955eaeafc80b Binary files /dev/null and b/mockups/Gallery, Hover.png differ diff --git a/mockups/Gallery, Neutral.png b/mockups/Gallery, Neutral.png new file mode 100644 index 0000000000000..9a124eca176bb Binary files /dev/null and b/mockups/Gallery, Neutral.png differ diff --git a/mockups/Gallery, Selected Image.png b/mockups/Gallery, Selected Image.png new file mode 100644 index 0000000000000..db629336ec1b8 Binary files /dev/null and b/mockups/Gallery, Selected Image.png differ diff --git a/mockups/Gallery, Selected.png b/mockups/Gallery, Selected.png new file mode 100644 index 0000000000000..9b9a9d65eee5b Binary files /dev/null and b/mockups/Gallery, Selected.png differ diff --git a/mockups/Heading, Hover.png b/mockups/Heading, Hover.png new file mode 100644 index 0000000000000..e849d030e4b5c Binary files /dev/null and b/mockups/Heading, Hover.png differ diff --git a/mockups/Heading, Neutral.png b/mockups/Heading, Neutral.png new file mode 100644 index 0000000000000..62d399afe12da Binary files /dev/null and b/mockups/Heading, Neutral.png differ diff --git a/mockups/Heading, Selected.png b/mockups/Heading, Selected.png new file mode 100644 index 0000000000000..9c5b3901589c6 Binary files /dev/null and b/mockups/Heading, Selected.png differ diff --git a/mockups/Headings.png b/mockups/Headings.png deleted file mode 100644 index a189bb26cbede..0000000000000 Binary files a/mockups/Headings.png and /dev/null differ diff --git a/mockups/Image, Caption.png b/mockups/Image, Caption.png new file mode 100644 index 0000000000000..332fd6ca8640a Binary files /dev/null and b/mockups/Image, Caption.png differ diff --git a/mockups/Image, Hover.png b/mockups/Image, Hover.png new file mode 100644 index 0000000000000..fe2ecce9ecf5f Binary files /dev/null and b/mockups/Image, Hover.png differ diff --git a/mockups/Image, Neutral.png b/mockups/Image, Neutral.png new file mode 100644 index 0000000000000..bd86b524ffd8c Binary files /dev/null and b/mockups/Image, Neutral.png differ diff --git a/mockups/Image, Selected.png b/mockups/Image, Selected.png new file mode 100644 index 0000000000000..f4bdea94daae1 Binary files /dev/null and b/mockups/Image, Selected.png differ diff --git a/mockups/Image.png b/mockups/Image.png deleted file mode 100644 index 7b4699e1de567..0000000000000 Binary files a/mockups/Image.png and /dev/null differ diff --git a/mockups/Insert Between, Keyboard.png b/mockups/Insert Between, Keyboard.png deleted file mode 100644 index 199d655397d62..0000000000000 Binary files a/mockups/Insert Between, Keyboard.png and /dev/null differ diff --git a/mockups/Insert Between.png b/mockups/Insert Between.png deleted file mode 100644 index 3f1cdc125f0e1..0000000000000 Binary files a/mockups/Insert Between.png and /dev/null differ diff --git a/mockups/Insert.png b/mockups/Insert.png index aaf81cac13735..ff81cbcd560a6 100644 Binary files a/mockups/Insert.png and b/mockups/Insert.png differ diff --git a/mockups/Mobile.png b/mockups/Mobile.png index 952b415523db5..85234070170a8 100644 Binary files a/mockups/Mobile.png and b/mockups/Mobile.png differ diff --git a/mockups/New Blocks.png b/mockups/New Blocks.png deleted file mode 100644 index e6c7b2ce17500..0000000000000 Binary files a/mockups/New Blocks.png and /dev/null differ diff --git a/mockups/Newlines.png b/mockups/Newlines.png new file mode 100644 index 0000000000000..807ea1dc35b04 Binary files /dev/null and b/mockups/Newlines.png differ diff --git a/mockups/Quote 2, Hover.png b/mockups/Quote 2, Hover.png new file mode 100644 index 0000000000000..28de11e64264d Binary files /dev/null and b/mockups/Quote 2, Hover.png differ diff --git a/mockups/Quote 2, Neutral.png b/mockups/Quote 2, Neutral.png new file mode 100644 index 0000000000000..8aa1a4d1aa51f Binary files /dev/null and b/mockups/Quote 2, Neutral.png differ diff --git a/mockups/Quote 2, Selected.png b/mockups/Quote 2, Selected.png new file mode 100644 index 0000000000000..ada92a4cb4acb Binary files /dev/null and b/mockups/Quote 2, Selected.png differ diff --git a/mockups/Quote 2.png b/mockups/Quote 2.png deleted file mode 100644 index 2524e23356360..0000000000000 Binary files a/mockups/Quote 2.png and /dev/null differ diff --git a/mockups/Quote, Citation.png b/mockups/Quote, Citation.png new file mode 100644 index 0000000000000..c6d3aeb310325 Binary files /dev/null and b/mockups/Quote, Citation.png differ diff --git a/mockups/Quote, Hover.png b/mockups/Quote, Hover.png new file mode 100644 index 0000000000000..4fcb923e3371c Binary files /dev/null and b/mockups/Quote, Hover.png differ diff --git a/mockups/Quote, Neutral.png b/mockups/Quote, Neutral.png new file mode 100644 index 0000000000000..7947bb1d6ca31 Binary files /dev/null and b/mockups/Quote, Neutral.png differ diff --git a/mockups/Quote, Selected.png b/mockups/Quote, Selected.png new file mode 100644 index 0000000000000..504e66f842f4a Binary files /dev/null and b/mockups/Quote, Selected.png differ diff --git a/mockups/Quote.png b/mockups/Quote.png deleted file mode 100644 index e96ad5891e2c4..0000000000000 Binary files a/mockups/Quote.png and /dev/null differ diff --git a/mockups/Text, Hover.png b/mockups/Text, Hover.png new file mode 100644 index 0000000000000..16133d0db774d Binary files /dev/null and b/mockups/Text, Hover.png differ diff --git a/mockups/Text, Neutral.png b/mockups/Text, Neutral.png new file mode 100644 index 0000000000000..b5709af583a1f Binary files /dev/null and b/mockups/Text, Neutral.png differ diff --git a/mockups/Text, Selected.png b/mockups/Text, Selected.png new file mode 100644 index 0000000000000..b61ef9926a8ca Binary files /dev/null and b/mockups/Text, Selected.png differ diff --git a/mockups/Type Switcher.png b/mockups/Type Switcher.png index f523c4855b701..d1134588b92d5 100644 Binary files a/mockups/Type Switcher.png and b/mockups/Type Switcher.png differ diff --git a/mockups/editor.sketch b/mockups/editor.sketch deleted file mode 100644 index a1a44048f68c2..0000000000000 Binary files a/mockups/editor.sketch and /dev/null differ