diff --git a/editor/effects.js b/editor/effects.js
index f75379c6c6b25..7e6df9e024ae7 100644
--- a/editor/effects.js
+++ b/editor/effects.js
@@ -27,18 +27,14 @@ export default {
const { dispatch, getState } = store;
const state = getState();
const post = getCurrentPost( state );
- const isNew = ! post.id;
const edits = getPostEdits( state );
const toSend = {
...edits,
content: serialize( getBlocks( state ) ),
+ id: post.id,
};
const transactionId = uniqueId();
- if ( ! isNew ) {
- toSend.id = post.id;
- }
-
dispatch( {
type: 'CLEAR_POST_EDITS',
optimist: { type: BEGIN, id: transactionId },
@@ -58,7 +54,6 @@ export default {
type: 'REQUEST_POST_UPDATE_SUCCESS',
previousPost: post,
post: newPost,
- isNew,
optimist: { type: COMMIT, id: transactionId },
} );
} ).fail( ( err ) => {
@@ -75,7 +70,7 @@ export default {
} );
},
REQUEST_POST_UPDATE_SUCCESS( action, store ) {
- const { previousPost, post, isNew } = action;
+ const { previousPost, post } = action;
const { dispatch } = store;
const publishStatus = [ 'publish', 'private', 'future' ];
@@ -102,13 +97,15 @@ export default {
) );
}
- if ( ! isNew ) {
- return;
+ if ( get( window.history.state, 'id' ) !== post.id ) {
+ window.history.replaceState(
+ { id: post.id },
+ 'Post ' + post.id,
+ getGutenbergURL( {
+ post_id: post.id,
+ } )
+ );
}
- const newURL = getGutenbergURL( {
- post_id: post.id,
- } );
- window.history.replaceState( {}, 'Post ' + post.id, newURL );
},
REQUEST_POST_UPDATE_FAILURE( action, store ) {
const { post, edits } = action;
diff --git a/editor/header/saved-state/index.js b/editor/header/saved-state/index.js
index 8d55efda5bb96..c8b21c1535cc2 100644
--- a/editor/header/saved-state/index.js
+++ b/editor/header/saved-state/index.js
@@ -49,7 +49,10 @@ export function SavedState( { isNew, isDirty, isSaving, isSaveable, status, onSt
}
const onClick = () => {
- onStatusChange( status || 'draft' );
+ if ( 'auto-draft' === status ) {
+ onStatusChange( 'draft' );
+ }
+
onSave();
};
diff --git a/editor/header/saved-state/test/index.js b/editor/header/saved-state/test/index.js
index 9829361f4a0d9..38c33ba633713 100644
--- a/editor/header/saved-state/test/index.js
+++ b/editor/header/saved-state/test/index.js
@@ -46,6 +46,27 @@ describe( 'SavedState', () => {
expect( wrapper.childAt( 1 ).text() ).toBe( 'Saved' );
} );
+ it( 'should edit auto-draft post to draft before save', () => {
+ const statusSpy = jest.fn();
+ const saveSpy = jest.fn();
+ const wrapper = shallow(
+
+ );
+
+ expect( wrapper.name() ).toBe( 'Button' );
+ expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
+ wrapper.simulate( 'click' );
+ expect( statusSpy ).toHaveBeenCalledWith( 'draft' );
+ expect( saveSpy ).toHaveBeenCalled();
+ } );
+
it( 'should return Save button if edits to be saved', () => {
const statusSpy = jest.fn();
const saveSpy = jest.fn();
@@ -62,7 +83,7 @@ describe( 'SavedState', () => {
expect( wrapper.name() ).toBe( 'Button' );
expect( wrapper.childAt( 0 ).text() ).toBe( 'Save' );
wrapper.simulate( 'click' );
- expect( statusSpy ).toHaveBeenCalledWith( 'draft' );
+ expect( statusSpy ).not.toHaveBeenCalled();
expect( saveSpy ).toHaveBeenCalled();
} );
} );
diff --git a/editor/index.js b/editor/index.js
index 5d90e39f72b2d..13961ff05cffa 100644
--- a/editor/index.js
+++ b/editor/index.js
@@ -3,7 +3,6 @@
*/
import { Provider as ReduxProvider } from 'react-redux';
import { Provider as SlotFillProvider } from 'react-slot-fill';
-import { omit } from 'lodash';
import moment from 'moment-timezone';
import 'moment-timezone/moment-timezone-utils';
@@ -44,28 +43,26 @@ if ( settings.timezone.string ) {
* @param {Object} post Bootstrapped post object
*/
function preparePostState( store, post ) {
+ // Set current post into state
store.dispatch( {
type: 'RESET_POST',
post,
} );
- if ( post.content ) {
+ // Parse content as blocks
+ if ( post.content.raw ) {
store.dispatch( {
type: 'RESET_BLOCKS',
blocks: parse( post.content.raw ),
} );
}
- if ( ! post.id ) {
- // Each property that is set in `post-content.js` (other than `content`
- // because it is serialized when a save is requested) needs to be
- // registered as an edit now. Otherwise the initial values of these
- // properties will not be properly saved with the post.
+ // Include auto draft title in edits while not flagging post as dirty
+ if ( post.status === 'auto-draft' ) {
store.dispatch( {
type: 'SETUP_NEW_POST',
edits: {
- title: post.title ? post.title.raw : undefined,
- ...omit( post, 'title', 'content', 'type' ),
+ title: post.title.raw,
},
} );
}
diff --git a/editor/post-permalink/index.js b/editor/post-permalink/index.js
index 17f682ec61f1f..b8b318f9a40ff 100644
--- a/editor/post-permalink/index.js
+++ b/editor/post-permalink/index.js
@@ -14,7 +14,7 @@ import { Dashicon, ClipboardButton, Button } from 'components';
* Internal Dependencies
*/
import './style.scss';
-import { getEditedPostAttribute } from '../selectors';
+import { isEditedPostNew, getEditedPostAttribute } from '../selectors';
class PostPermalink extends Component {
constructor() {
@@ -43,8 +43,8 @@ class PostPermalink extends Component {
}
render() {
- const { link } = this.props;
- if ( ! link ) {
+ const { isNew, link } = this.props;
+ if ( isNew || ! link ) {
return null;
}
@@ -66,6 +66,7 @@ class PostPermalink extends Component {
export default connect(
( state ) => {
return {
+ isNew: isEditedPostNew( state ),
link: getEditedPostAttribute( state, 'link' ),
};
}
diff --git a/editor/selectors.js b/editor/selectors.js
index 9713265966067..9223d4a695f1e 100644
--- a/editor/selectors.js
+++ b/editor/selectors.js
@@ -79,7 +79,7 @@ export function hasEditorRedo( state ) {
* @return {Boolean} Whether the post is new
*/
export function isEditedPostNew( state ) {
- return ! getCurrentPostId( state );
+ return getEditedPostAttribute( state, 'status' ) === 'auto-draft';
}
/**
diff --git a/editor/sidebar/last-revision/index.js b/editor/sidebar/last-revision/index.js
index 36540b7df79d1..eb0d5ee92d851 100644
--- a/editor/sidebar/last-revision/index.js
+++ b/editor/sidebar/last-revision/index.js
@@ -15,7 +15,12 @@ import PanelBody from 'components/panel/body';
* Internal dependencies
*/
import './style.scss';
-import { getCurrentPostId, getCurrentPostType, isSavingPost } from '../../selectors';
+import {
+ isEditedPostNew,
+ getCurrentPostId,
+ getCurrentPostType,
+ isSavingPost,
+} from '../../selectors';
import { getWPAdminURL } from '../../utils/url';
class LastRevision extends Component {
@@ -51,19 +56,19 @@ class LastRevision extends Component {
}
fetchRevisions() {
- if ( ! this.props.postId ) {
+ const { isNew, postId, postType } = this.props;
+ if ( isNew || ! postId ) {
this.setState( { loading: false } );
return;
}
this.setState( { loading: true } );
- const postIdToLoad = this.props.postId;
- const Collection = wp.api.getPostTypeRevisionsCollection( this.props.postType );
+ const Collection = wp.api.getPostTypeRevisionsCollection( postType );
if ( ! Collection ) {
return;
}
- this.fetchRevisionsRequest = new Collection( {}, { parent: postIdToLoad } ).fetch()
+ this.fetchRevisionsRequest = new Collection( {}, { parent: postId } ).fetch()
.done( ( revisions ) => {
- if ( this.props.postId !== postIdToLoad ) {
+ if ( this.props.postId !== postId ) {
return;
}
this.setState( {
@@ -72,7 +77,7 @@ class LastRevision extends Component {
} );
} )
.fail( () => {
- if ( this.props.postId !== postIdToLoad ) {
+ if ( this.props.postId !== postId ) {
return;
}
this.setState( {
@@ -112,6 +117,7 @@ class LastRevision extends Component {
export default connect(
( state ) => {
return {
+ isNew: isEditedPostNew( state ),
postId: getCurrentPostId( state ),
postType: getCurrentPostType( state ),
isSaving: isSavingPost( state ),
diff --git a/editor/sidebar/post-trash/index.js b/editor/sidebar/post-trash/index.js
index 3581e66b14730..ce0ebbd4e3ae2 100644
--- a/editor/sidebar/post-trash/index.js
+++ b/editor/sidebar/post-trash/index.js
@@ -13,11 +13,15 @@ import { Button, Dashicon } from 'components';
* Internal dependencies
*/
import './style.scss';
-import { getCurrentPostId, getCurrentPostType } from '../../selectors';
+import {
+ isEditedPostNew,
+ getCurrentPostId,
+ getCurrentPostType,
+} from '../../selectors';
import { trashPost } from '../../actions';
-function PostTrash( { postId, postType, ...props } ) {
- if ( ! postId ) {
+function PostTrash( { isNew, postId, postType, ...props } ) {
+ if ( isNew || ! postId ) {
return null;
}
@@ -34,6 +38,7 @@ function PostTrash( { postId, postType, ...props } ) {
export default connect(
( state ) => {
return {
+ isNew: isEditedPostNew( state ),
postId: getCurrentPostId( state ),
postType: getCurrentPostType( state ),
};
diff --git a/editor/test/selectors.js b/editor/test/selectors.js
index f6baaa07c46ac..e5471adc18ab3 100644
--- a/editor/test/selectors.js
+++ b/editor/test/selectors.js
@@ -148,16 +148,24 @@ describe( 'selectors', () => {
describe( 'isEditedPostNew', () => {
it( 'should return true when the post is new', () => {
const state = {
- currentPost: {},
+ currentPost: {
+ status: 'auto-draft',
+ },
+ editor: {
+ edits: {},
+ },
};
expect( isEditedPostNew( state ) ).toBe( true );
} );
- it( 'should return false when the post has an ID', () => {
+ it( 'should return false when the post is not new', () => {
const state = {
currentPost: {
- id: 1,
+ status: 'draft',
+ },
+ editor: {
+ edits: {},
},
};
@@ -193,8 +201,12 @@ describe( 'selectors', () => {
const state = {
editor: {
dirty: false,
+ edits: {},
+ },
+ currentPost: {
+ id: 1,
+ status: 'auto-draft',
},
- currentPost: {},
};
expect( isCleanNewPost( state ) ).toBe( true );
@@ -204,8 +216,12 @@ describe( 'selectors', () => {
const state = {
editor: {
dirty: false,
+ edits: {},
+ },
+ currentPost: {
+ id: 1,
+ status: 'draft',
},
- currentPost: { id: 1 },
};
expect( isCleanNewPost( state ) ).toBe( false );
@@ -215,7 +231,11 @@ describe( 'selectors', () => {
const state = {
editor: {
dirty: true,
- currentPost: {},
+ edits: {},
+ },
+ currentPost: {
+ id: 1,
+ status: 'auto-draft',
},
};
@@ -337,6 +357,8 @@ describe( 'selectors', () => {
it( 'should return new post title when new post is clean', () => {
const state = {
currentPost: {
+ id: 1,
+ status: 'auto-draft',
title: { raw: '' },
},
editor: {
@@ -351,6 +373,8 @@ describe( 'selectors', () => {
it( 'should return untitled title when new post is dirty', () => {
const state = {
currentPost: {
+ id: 1,
+ status: 'auto-draft',
title: { raw: '' },
},
editor: {
@@ -366,6 +390,7 @@ describe( 'selectors', () => {
const state = {
currentPost: {
id: 123,
+ status: 'draft',
title: { raw: '' },
},
editor: {
diff --git a/lib/client-assets.php b/lib/client-assets.php
index 4247a00c437da..5b17117a41ff2 100644
--- a/lib/client-assets.php
+++ b/lib/client-assets.php
@@ -418,12 +418,6 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
$is_demo = isset( $page_match[2] );
- /**
- * Scripts
- */
- wp_enqueue_media();
- wp_enqueue_editor();
-
wp_add_inline_script(
'editor', 'window.wp.oldEditor = window.wp.editor;', 'after'
);
@@ -506,42 +500,61 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
// Now load the `word-count` script from core.
wp_enqueue_script( 'word-count' );
+ // Parse post type from parameters.
+ $post_type = null;
+ if ( ! isset( $_GET['post_type'] ) ) {
+ $post_type = 'post';
+ } else {
+ $post_types = get_post_types( array(
+ 'show_ui' => true,
+ ) );
+
+ if ( in_array( $_GET['post_type'], $post_types ) ) {
+ $post_type = $_GET['post_type'];
+ } else {
+ wp_die( __( 'Invalid post type.', 'gutenberg' ) );
+ }
+ }
+
+ // Parse post ID from parameters.
$post_id = null;
if ( isset( $_GET['post_id'] ) && (int) $_GET['post_id'] > 0 ) {
$post_id = (int) $_GET['post_id'];
}
- $post_to_edit = null;
- if ( $post_id ) {
- $post_to_edit = gutenberg_get_post_to_edit( $post_id );
- if ( is_wp_error( $post_to_edit ) ) {
- wp_die( $post_to_edit->get_error_message() );
- }
+ // Create an auto-draft if new post.
+ if ( ! $post_id ) {
+ $default_post_to_edit = get_default_post_to_edit( $post_type, true );
+ $post_id = $default_post_to_edit->ID;
}
- // Initialize the post data...
- if ( $post_to_edit ) {
- // ...with a real post
- wp_add_inline_script(
- 'wp-editor',
- 'window._wpGutenbergPost = ' . wp_json_encode( $post_to_edit ) . ';'
+ // Generate API-prepared post from post ID.
+ $post_to_edit = gutenberg_get_post_to_edit( $post_id );
+ if ( is_wp_error( $post_to_edit ) ) {
+ wp_die( $post_to_edit->get_error_message() );
+ }
+
+ // Set initial title to empty string for auto draft for duration of edit.
+ if ( 'auto-draft' === $post_to_edit['status'] ) {
+ $default_title = apply_filters( 'default_title', '' );
+ $post_to_edit['title'] = array(
+ 'raw' => $default_title,
+ 'rendered' => apply_filters( 'the_title', $default_title, $post_id ),
);
- } elseif ( $is_demo ) {
- // ...with some test content
+ }
+
+ // Initialize the post data.
+ wp_add_inline_script(
+ 'wp-editor',
+ 'window._wpGutenbergPost = ' . wp_json_encode( $post_to_edit ) . ';'
+ );
+
+ // Prepopulate with some test content in demo.
+ if ( $is_demo ) {
wp_add_inline_script(
'wp-editor',
file_get_contents( gutenberg_dir_path() . 'post-content.js' )
);
- } else {
- // ...with a new empty post
- // TODO: Error handling if we tried and failed to get a post above
- $empty_post = array(
- 'type' => 'post',
- );
- wp_add_inline_script(
- 'wp-editor',
- 'window._wpGutenbergPost = ' . wp_json_encode( $empty_post ) . ';'
- );
}
// Prepare Jed locale data.
@@ -555,6 +568,14 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
// Initialize the editor.
wp_add_inline_script( 'wp-editor', 'wp.api.init().done( function() { wp.editor.createEditorInstance( \'editor\', window._wpGutenbergPost ); } );' );
+ /**
+ * Scripts
+ */
+ wp_enqueue_media( array(
+ 'post' => $post_to_edit['id'],
+ ) );
+ wp_enqueue_editor();
+
/**
* Styles
*/
diff --git a/post-content.js b/post-content.js
index 2afa6171ae794..0ea57e8bb2280 100644
--- a/post-content.js
+++ b/post-content.js
@@ -1,188 +1,186 @@
/**
* Temporary test post content
*/
-window._wpGutenbergPost = {
- type: 'post',
- title: {
- raw: 'Welcome to the Gutenberg Editor',
- },
- content: {
- raw: [
- '',
- '
Of mountains & printing presses
',
- '',
-
- '',
- '',
-
- '',
- '
The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you\'ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.
',
- '',
-
- '',
- '
What you are reading now is a text block, the most basic block of all. The text block has its own controls to be moved freely around the post...
',
- '',
-
- '',
- '
... like this one, which is right aligned.
',
- '',
-
- '',
-
- '',
- '
Headings are separate blocks as well, which helps with the outline and organization of your content.
',
- '',
-
- '',
- '
A picture is worth a thousand words, or so the saying goes
',
- '',
-
- '',
- '
Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you\'ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.
',
- '',
-
- '',
- 'Give it a try. Press the "really wide" button on the image toolbar.',
- '',
-
- '',
- '
Try selecting and removing or editing the caption, now you don\'t have to be careful about selecting the image or other text by mistake and ruining the presentation.
',
- '',
-
- '',
- '
The Inserter Tool
',
- '',
-
- '',
- '
Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That\'s the spirit behind the inserter—the (+) button you\'ll see around the editor—which allows you to browse all available content blocks and insert them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.
',
- '',
-
- '',
- '
Go give it a try, you may discover things WordPress can already insert into your posts that you didn\'t know about. Here\'s a short list of what you can currently find there:
',
- '',
-
- '',
- '
Text & Headings
Images & Videos
Galleries
Embeds, like YouTube, Tweets, or other WordPress posts.
Layout blocks, like Buttons, Hero Images, Separators, etc.
And Lists like this one of course :)
',
- '',
-
- '',
- '
If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.
A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:
',
- '',
-
- '',
- '
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.
',
- '',
-
- '',
- '
The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It\'s always easy to add it back.
',
- '',
-
- '',
- '
Blocks can be anything you need. For instance, you may want to insert a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.
',
- '',
-
- '',
- '
There is no greater agony than bearing an untold story inside you.
The goal of this new editor is to make adding rich content to WordPress simple and enjoyable. This whole post is composed of pieces of content—somewhat similar to LEGO bricks—that you can move around and interact with. Move your cursor around and you\'ll notice the different blocks light up with outlines and arrows. Press the arrows to reposition blocks quickly, without fearing about losing things in the process of copying and pasting.
',
+ '',
+
+ '',
+ '
What you are reading now is a text block, the most basic block of all. The text block has its own controls to be moved freely around the post...
',
+ '',
+
+ '',
+ '
... like this one, which is right aligned.
',
+ '',
+
+ '',
+
+ '',
+ '
Headings are separate blocks as well, which helps with the outline and organization of your content.
',
+ '',
+
+ '',
+ '
A picture is worth a thousand words, or so the saying goes
',
+ '',
+
+ '',
+ '
Handling images and media with the utmost care is a primary focus of the new editor. Hopefully, you\'ll find aspects of adding captions or going full-width with your pictures much easier and robust than before.
',
+ '',
+
+ '',
+ 'Give it a try. Press the "really wide" button on the image toolbar.',
+ '',
+
+ '',
+ '
Try selecting and removing or editing the caption, now you don\'t have to be careful about selecting the image or other text by mistake and ruining the presentation.
',
+ '',
+
+ '',
+ '
The Inserter Tool
',
+ '',
+
+ '',
+ '
Imagine everything that WordPress can do is available to you quickly and in the same place on the interface. No need to figure out HTML tags, classes, or remember complicated shortcode syntax. That\'s the spirit behind the inserter—the (+) button you\'ll see around the editor—which allows you to browse all available content blocks and insert them into your post. Plugins and themes are able to register their own, opening up all sort of possibilities for rich editing and publishing.
',
+ '',
+
+ '',
+ '
Go give it a try, you may discover things WordPress can already insert into your posts that you didn\'t know about. Here\'s a short list of what you can currently find there:
',
+ '',
+
+ '',
+ '
Text & Headings
Images & Videos
Galleries
Embeds, like YouTube, Tweets, or other WordPress posts.
Layout blocks, like Buttons, Hero Images, Separators, etc.
And Lists like this one of course :)
',
+ '',
+
+ '',
+ '
If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the GitHub repository.
Ea veniam homero eam. Ex inimicus molestiae cum, debet scaevola at eos. Vis assum veritus ut, has ea nostrud accusata, offendit appareat comprehensam ea pro. Ad quo quem veritus appellantur, te est quas phaedrum, eum alia habeo ad. Ei est erroribus imperdiet, omnis dicam propriae sed no. His vitae oratio fierent ne, cu duo tota eligendi, electram rationibus in qui.
',
- '',
+ '',
+ '
A huge benefit of blocks is that you can edit them in place and manipulate your content directly. Instead of having fields for editing things like the source of a quote, or the text of a button, you can directly change the content. Try editing the following quote:
',
+ '',
- '',
- '',
- '',
+ '',
+ '
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.
',
+ '',
- '',
- '
Est quis reque cetero ad. Sea id autem nominavi deseruisse. Veniam qualisque definitionem pri id, ea autem feugiat delenit ius, mei at loem affert accumsan. Dicat eruditi cu est, te pro dicant pericula conclusionemque, ei vim detracto euripidis intellegam. Eius postea volumus mei ad.
',
- '',
+ '',
+ '
The information corresponding to the source of the quote is a separate text field, similar to captions under images, so the structure of the quote is protected even if you select, modify, or remove the source. It\'s always easy to add it back.
',
+ '',
- '',
- '
Prima ridens denique his te, ferri illum volumus an his. Eu vel dicat homero qualisqu, vitae regione deserunt vis ei. Graeci incorrupte liberavisse no mea, saepe voluptaria usu ex, vis dicant euismod id. At dolor reprimique eos, quo altera detraxit moderatius id. Quo iudico utinam eu, ad alia munere mel.
',
- '',
+ '',
+ '
Blocks can be anything you need. For instance, you may want to insert a subdued quote as part of the composition of your text, or you may prefer to display a giant stylized one. All of these options are available in the inserter.
There is no greater agony than bearing an untold story inside you.
',
+ '',
+
+ '',
+ '',
+ '',
+
+ '',
+ '
Sea id autem nominavi deseruisse
',
+ '',
+
+ '',
+ '
Ea veniam homero eam. Ex inimicus molestiae cum, debet scaevola at eos. Vis assum veritus ut, has ea nostrud accusata, offendit appareat comprehensam ea pro. Ad quo quem veritus appellantur, te est quas phaedrum, eum alia habeo ad. Ei est erroribus imperdiet, omnis dicam propriae sed no. His vitae oratio fierent ne, cu duo tota eligendi, electram rationibus in qui.
',
+ '',
+
+ '',
+ '',
+ '',
+
+ '',
+ '
Est quis reque cetero ad. Sea id autem nominavi deseruisse. Veniam qualisque definitionem pri id, ea autem feugiat delenit ius, mei at loem affert accumsan. Dicat eruditi cu est, te pro dicant pericula conclusionemque, ei vim detracto euripidis intellegam. Eius postea volumus mei ad.
',
+ '',
+
+ '',
+ '
Prima ridens denique his te, ferri illum volumus an his. Eu vel dicat homero qualisqu, vitae regione deserunt vis ei. Graeci incorrupte liberavisse no mea, saepe voluptaria usu ex, vis dicant euismod id. At dolor reprimique eos, quo altera detraxit moderatius id. Quo iudico utinam eu, ad alia munere mel.
',
+ '',
+
+ '',
+ '
export default function MyButton() {\n\
+return <Button>Click Me!</Button>;\n\
}
',
- '',
-
- '',
- '
',
- '',
- '',
- '
',
- '',
-
- '',
- '
An old silent pond... A frog jumps into the pond, splash! Silence again.
',
- '',
-
- '',
- '
Eu integre accusata prodesset est, sed te impetus gubergren conceptam, ex sed wisi nostrum ocurreret. Esse velit omittantur ius te, alii dissentias ei vis. At sed unum veritus fabellas. Te volutpat appellantur duo. Ad natum fuisset intellegebat eam, causae invidunt usu id, et vis impetus appetere.
',
- '',
-
- '',
- '
Nominavi deseruisse
',
- '',
-
- '',
- '
Est quis reque cetero ad
Sea id autem nominavi deseruisse
Veniam qualisque definitionem pri id, ea autem feugiat delenit ius, mei at loem affert accumsan
Dicat eruditi cu est, te pro dicant pericula conclusionemque
An old silent pond... A frog jumps into the pond, splash! Silence again.
',
+ '',
+
+ '',
+ '
Eu integre accusata prodesset est, sed te impetus gubergren conceptam, ex sed wisi nostrum ocurreret. Esse velit omittantur ius te, alii dissentias ei vis. At sed unum veritus fabellas. Te volutpat appellantur duo. Ad natum fuisset intellegebat eam, causae invidunt usu id, et vis impetus appetere.
',
+ '',
+
+ '',
+ '
Nominavi deseruisse
',
+ '',
+
+ '',
+ '
Est quis reque cetero ad
Sea id autem nominavi deseruisse
Veniam qualisque definitionem pri id, ea autem feugiat delenit ius, mei at loem affert accumsan
Dicat eruditi cu est, te pro dicant pericula conclusionemque
