{"id":4323,"date":"2016-10-01T15:35:43","date_gmt":"2016-10-01T15:35:43","guid":{"rendered":"https:\/\/preview.artisanthemes.io\/pepperplus\/?p=4323"},"modified":"2022-06-27T19:29:45","modified_gmt":"2022-06-27T19:29:45","slug":"a-post-created-with-gutenberg-blocks","status":"publish","type":"post","link":"https:\/\/preview.artisanthemes.io\/pepperplus\/2016\/10\/01\/a-post-created-with-gutenberg-blocks\/","title":{"rendered":"A Post Created With Gutenberg Blocks"},"content":{"rendered":"\n<div class=\"wp-block-cover alignfull is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-2695\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/norbert-levajsics-243761-unsplash.jpg\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-text-color has-large-font-size\" style=\"color:#ffffff\"><strong>Meet Gutenberg \u2013<br>The new WordPress editor.<\/strong><\/p>\n<\/div><\/div>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/gutenberg\/\">Gutenberg<\/a> aims to bring you a whole new writing experience inside your WordPress editor. Instead of writing your post as you would in the classic way (similar to writing an article on any text processor), Gutenberg will let you create posts by inserting and combining different types of content <strong>blocks<\/strong>. What a way to step up your blogging game.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Artisan Themes + Gutenberg<\/h2>\n\n\n\n<p>At Artisan Themes we believe Gutenberg blocks will help you <strong>make your posts more beautiful, compelling and unique<\/strong>.<\/p>\n\n\n\n<p>That&#8217;s why we put a lot of efforts into integrating and styling Gutenberg&#8217;s blocks and possible settings.<\/p>\n\n\n\n<p>Everything you see in this post was created by using Gutenberg&#8217;s blocks and <a href=\"https:\/\/artisanthemes.io\/wordpress-themes\/pepperplus\/\">Pepper+ WordPress Theme<\/a> styles.<\/p>\n\n\n\n<div class=\"wp-block-cover is-light\"><span aria-hidden=\"true\" class=\"wp-block-cover__background has-background-dim\"><\/span><img decoding=\"async\" class=\"wp-block-cover__image-background wp-image-2706\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/svr0ypshh-8-annie-spratt.jpg\" data-object-fit=\"cover\"\/><div class=\"wp-block-cover__inner-container is-layout-flow wp-block-cover-is-layout-flow\">\n<p class=\"has-text-align-center has-white-color has-text-color has-large-font-size\"><strong>Like this Cover Image.&nbsp;<\/strong>Which is a text over an image <g class=\"gr_ gr_4 gr-alert gr_gramm gr_inline_cards gr_run_anim Punctuation multiReplace\" id=\"4\" data-gr-id=\"4\">background.<\/g><\/p>\n<\/div><\/div>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Gutenberg&#8217;s blocks include:<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li>Paragraphs &amp; Headings<\/li><li>Images &amp; Videos<\/li><li>Galleries<\/li><li>Embeds, like YouTube, Tweets, or other WordPress posts<\/li><li>Buttons<\/li><li>Cover Images<\/li><li>Separators<\/li><li>Quotes<\/li><li>Videos &amp; Audios<\/li><li>And Lists&nbsp;(like this one!)<\/li><\/ul>\n\n\n\n<p>Each of these elements is handled as a separated block that you can edit,&nbsp; duplicate and rearrange within your post.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Size matters&#8230; \ud83d\ude42<\/h2>\n\n\n\n<p>If you ever wanted to make a <strong>full-width<\/strong> image or a <strong>wide<\/strong> quote, now you can. We&#8217;ve enabled the Wide and Full Width alignments for some of Gutenberg blocks.<\/p>\n\n\n\n<p>So you can have an image that looks like this&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/tiffany-nutt-400385-unsplash.jpg\" alt=\"\" class=\"wp-image-2690\"\/><figcaption>Standard Width \u2013 The picture matches the content&#8217;s limits<\/figcaption><\/figure>\n\n\n\n<p>But also one that looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide\"><img decoding=\"async\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/tiffany-nutt-400385-unsplash.jpg\" alt=\"\" class=\"wp-image-2690\"\/><figcaption>Wide Width \u2013 The picture gets off the content&#8217;s limits<\/figcaption><\/figure>\n\n\n\n<p>&#8230;And one that looks like this too!<\/p>\n\n\n\n<figure class=\"wp-block-image alignfull\"><img decoding=\"async\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/tiffany-nutt-400385-unsplash.jpg\" alt=\"\" class=\"wp-image-2690\"\/><figcaption>Full Width &#8211; The picture goes from edge to edge on the screen<\/figcaption><\/figure>\n\n\n\n<p>Pretty nice, uh?<\/p>\n\n\n\n<p>And guess what&#8230; it&#8217;s not only for images. You can use the <strong>Wide<\/strong> and <strong>Full Width<\/strong> alignments also in: Galleries, Quotes, Pullquotes, Videos, and more.<\/p>\n\n\n\n<p>Keep reading to see some examples.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Show me the money<\/h2>\n\n\n\n<p>What you&#8217;re about to see is a random composition of some beautiful blocks you can use in your posts. I can&#8217;t promise you&#8217;ll find logic in this composition, but I&#8217;m sure you&#8217;ll get an idea of how nice your posts can look like from now on.&nbsp;<\/p>\n\n\n\n<p class=\"has-large-font-size\">This is a paragraph text that has been enlarged. You can change the <strong>size<\/strong> of any paragraph to make it bigger.<\/p>\n\n\n\n<p class=\"has-small-font-size\">Or to make it smaller.<\/p>\n\n\n\n<p class=\"has-drop-cap\">You can also&nbsp;enable the <strong>Drop Cap<\/strong> to show a large initial letter at the beginning of the paragraph and make it look like a fancy newspaper article. Now, let&#8217;s fill this paragraph with a little lorem ipsum magic. The only words I remember are &#8220;lorem ipsum dolor sit <g class=\"gr_ gr_6 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"6\" data-gr-id=\"6\">amet<\/g> <g class=\"gr_ gr_7 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"7\" data-gr-id=\"7\">consectetur<\/g> <g class=\"gr_ gr_8 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"8\" data-gr-id=\"8\">adipiscing<\/g> <g class=\"gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling\" id=\"9\" data-gr-id=\"9\">elit<\/g>&#8220;. That&#8217;s enough.<\/p>\n\n\n\n<p>The following is a regular sized <strong>Quote<\/strong>. And yes, it&#8217;s something we&#8217;ve said many times and something we believe and try to live by every day.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Building your own business can be hard. But right in those moments when you feel like the climb gets steeper and results seem farther, you must keep giving. When in doubt, do more. Give more.<\/p><cite>Artisan Themes<\/cite><\/blockquote>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-4 is-cropped alignfull wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"2100\" data-id=\"215\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2016\/12\/fhyo9b5m4uq-nordwood-themes-1.jpg\" alt=\"\" class=\"wp-image-215\" srcset=\"https:\/\/preview.artisanthemes.io\/pepperplus\/files\/2016\/12\/fhyo9b5m4uq-nordwood-themes-1.jpg 1400w, https:\/\/preview.artisanthemes.io\/pepperplus\/files\/2016\/12\/fhyo9b5m4uq-nordwood-themes-1-600x900.jpg 600w, https:\/\/preview.artisanthemes.io\/pepperplus\/files\/2016\/12\/fhyo9b5m4uq-nordwood-themes-1-200x300.jpg 200w, https:\/\/preview.artisanthemes.io\/pepperplus\/files\/2016\/12\/fhyo9b5m4uq-nordwood-themes-1-768x1152.jpg 768w, https:\/\/preview.artisanthemes.io\/pepperplus\/files\/2016\/12\/fhyo9b5m4uq-nordwood-themes-1-683x1024.jpg 683w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"2686\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/nikita-kachanovsky-412069-unsplash.jpg\" alt=\"\" class=\"wp-image-2686\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"2699\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/michael-207282.jpg\" alt=\"\" class=\"wp-image-2699\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"2700\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/michael-234664.jpg\" alt=\"\" class=\"wp-image-2700\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"2701\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/michael-236681.jpg\" alt=\"\" class=\"wp-image-2701\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"2704\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/michael-221247.jpg\" alt=\"\" class=\"wp-image-2704\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"2709\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/g3b00pd939w-sarah-dorweiler-1.jpg\" alt=\"\" class=\"wp-image-2709\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-id=\"2705\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/michael-244415.jpg\" alt=\"\" class=\"wp-image-2705\"\/><\/figure>\n<\/figure>\n\n\n\n<p>Oh! Look at this beautiful full-width <strong>Gallery<\/strong>. I took you by surprise, didn&#8217;t I?<\/p>\n\n\n\n<p>There&#8217;s still, of course, the regular <strong>left<\/strong> and <strong>right<\/strong> alignments for images that you can use along with your text.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignleft is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/marten-bjork-637521-unsplash.jpg\" alt=\"\" class=\"wp-image-2698\" width=\"279\" height=\"419\"\/><\/figure>\n<\/div>\n\n\n<p>If you insist on seeing, it here&#8217;s an example. But now I&#8217;ll really need some serious lorem ipsum. Something like lorem ipsum dolor sit mauris a turpis pellentes biben dum magna ut congue ipsum mauris nec vesti bulum diam duis at leo.<\/p>\n\n\n\n<p>Lorem ipsum dolor sit mauris a turpis pellentes biben dum magna ut congue ipsum. Mauris nec vestibulum diam duis at leo vitae dui aliquet volutpat proin egestas mattis augue egestas tristique. Donec volutpat quam non hendrerit. Cras molestie sem eget augue pharetra, sit amet dictum justo tristique. Ut porta porttitor vestibulum.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-color has-background\" style=\"background-color:#8abeab;color:#ffffff\">Any paragraph can have a background if you want. It makes highlighting parts of your text pretty easy. And you can use any color combination you&#8217;d like for this.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>You can also use the <strong>Spacer<\/strong> block to&#8230;<\/p>\n\n\n\n<div style=\"height:140px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-center\">&#8230; Create suspense.<\/p>\n\n\n\n<p class=\"has-text-align-center\">(Or to create more space between things, whatever. It&#8217;s your call and your pixels.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">There is a block for what you do<\/h3>\n\n\n\n<p>What if you write poetry and need your text to respect the line&nbsp;breaks? Now you have a block for that, it&#8217;s called <strong>Verse<\/strong> and it looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-verse\">Dear Theodosia, what to say to you?<br>You have my eyes&nbsp;<br>You have your mother\u2019s name<br><br>When you came into the world, you cried and it broke my heart<br><br>I\u2019m dedicating every day to you<br>Domestic life was never quite my style<br>When you smile, you knock me out, I fall apart<br>And I thought I was so smart<br><br>\u2013Dear Theodosia \/ Lin-Manuel Miranda<\/pre>\n\n\n\n<p>What if you write code in your posts? No problem, dear dev. Here&#8217;s the <strong>Code<\/strong> block.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.gutenberg {\n    display: block;\n}<\/code><\/pre>\n\n\n\n<p>And maybe you usually offer files to download to your readers. Just use the <strong>File<\/strong> block, pal.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-c5145419-7837-41f9-86a2-4505a263704c\" href=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/nathan-dumlao-744696-unsplash.jpg\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">This is the title of the file<\/a><a href=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/nathan-dumlao-744696-unsplash.jpg\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-c5145419-7837-41f9-86a2-4505a263704c\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">Download<\/a><\/div>\n\n\n\n<p>And use it in biiiiiig size if you want it.<\/p>\n\n\n\n<div class=\"wp-block-file alignfull\"><a id=\"wp-block-file--media-c255b586-b36a-4c0b-a0e5-47d8c6fc905d\" href=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/nathan-dumlao-744696-unsplash.jpg\" data-rel=\"lightbox-image-2\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">This is the title of the file<\/a><a href=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/nathan-dumlao-744696-unsplash.jpg\" class=\"wp-block-file__button\" download aria-describedby=\"wp-block-file--media-c255b586-b36a-4c0b-a0e5-47d8c6fc905d\" data-rel=\"lightbox-image-3\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\">Download<\/a><\/div>\n\n\n\n<p>Or are you one of those who wants to play an audio file right in your post? Use the <strong>Audio<\/strong> block. It&#8217;s pretty.<\/p>\n\n\n\n<figure class=\"wp-block-audio alignwide\"><audio controls src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/Honey-Bee-feat.-Jody-Nardone-Matt-Endahl-online-audio-converter.com_.mp3\"><\/audio><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Go nuts with media and alignments<\/h2>\n\n\n\n<p>If you combine the new <strong>wide<\/strong> and <strong>full-wide<\/strong> alignments with galleries, you can create a very media rich layout, very quickly:<\/p>\n\n\n\n<figure class=\"wp-block-image alignfull\"><img decoding=\"async\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/johan-mouchet-265564-unsplash.jpg\" alt=\"\" class=\"wp-image-2696\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped alignwide wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image\"><a href=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/norbert-levajsics-243761-unsplash.jpg\" data-rel=\"lightbox-image-4\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" data-id=\"2695\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/norbert-levajsics-243761-unsplash.jpg\" alt=\"\" class=\"wp-image-2695\"\/><\/a><figcaption>This is a caption<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/e74lxp-vxyg-chris-barbalis.jpg\" data-rel=\"lightbox-image-5\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img decoding=\"async\" data-id=\"2707\" src=\"https:\/\/pepperwptheme.com\/preview\/wp-content\/uploads\/sites\/2\/2018\/09\/e74lxp-vxyg-chris-barbalis.jpg\" alt=\"\" class=\"wp-image-2707\"\/><\/a><figcaption>This is another caption<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<p>The above is a <strong>full-width image<\/strong> + a <strong>wide gallery<\/strong> with just two images. Galleries are an easier way to create visually appealing layouts, without having to deal with floats. Gutenberg will take care of the pictures size and alignment.<\/p>\n\n\n\n<p><strong>Videos<\/strong> can also be full-width or wide.<\/p>\n\n\n\n<figure class=\"wp-block-embed alignfull is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Extrapolate\" src=\"https:\/\/player.vimeo.com\/video\/212731897?h=a3fc2ad5e3&amp;dnt=1&amp;app_id=122963?api=1\" width=\"960\" height=\"540\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed alignwide is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Extrapolate\" src=\"https:\/\/player.vimeo.com\/video\/212731897?h=a3fc2ad5e3&amp;dnt=1&amp;app_id=122963?api=1\" width=\"960\" height=\"540\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>So&#8230; I guess what I&#8217;m trying to say is&#8230;<\/p>\n\n\n\n<p><strong>Now you can have a safe width for content that keeps your text readable, and big stunning media at the same time.<\/strong><\/p>\n\n\n\n<p style=\"color:#8abeab;text-align:center\" class=\"has-text-color has-larger-font-size\"><p style=\"color:#8abeab;text-align:center\" class=\"has-larger-font-size\">What a time to be alive!<\/p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-dots\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Hungry for more blocks?<\/h2>\n\n\n\n<p>There&#8217;s the <strong>Latest Posts<\/strong> block, which lets you display&nbsp;a list of your most recent posts. Right. Here. As a list or in columns, and as many posts as you&#8217;d like. Really? Yes, really.&nbsp;<\/p>\n\n\n<ul class=\"wp-block-latest-posts__list is-grid columns-2 has-dates wp-block-latest-posts\"><li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/preview.artisanthemes.io\/pepperplus\/2017\/08\/31\/another-post-for-this-gorgeous-new-theme-named-pepperplus\/\">Another post for this gorgeous new theme named Pepper+<\/a><time datetime=\"2017-08-31T21:20:31+00:00\" class=\"wp-block-latest-posts__post-date\">August 31, 2017<\/time><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/preview.artisanthemes.io\/pepperplus\/2017\/08\/31\/knowing-these-8-secrets-will-make-your-shoes-look-amazing\/\">Knowing these 8 secrets will make your shoes look amazing<\/a><time datetime=\"2017-08-31T21:17:18+00:00\" class=\"wp-block-latest-posts__post-date\">August 31, 2017<\/time><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/preview.artisanthemes.io\/pepperplus\/2017\/08\/31\/what-happens-in-your-brain-when-you-pay-attention\/\">What happens in your brain when you pay attention?<\/a><time datetime=\"2017-08-31T21:13:06+00:00\" class=\"wp-block-latest-posts__post-date\">August 31, 2017<\/time><\/li>\n<li><a class=\"wp-block-latest-posts__post-title\" href=\"https:\/\/preview.artisanthemes.io\/pepperplus\/2017\/08\/30\/how-to-use-a-french-press-by-perfect-coffee\/\">How to Use a French Press by Perfect Coffee<\/a><time datetime=\"2017-08-30T21:22:16+00:00\" class=\"wp-block-latest-posts__post-date\">August 30, 2017<\/time><\/li>\n<\/ul>\n\n\n<p>You know what? We have some tables too. Let&#8217;s not forget about tables. Here&#8217;s a wide <strong>Table<\/strong>, very useful for comparing fruits.<\/p>\n\n\n\n<figure class=\"wp-block-table alignwide is-style-regular\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Name<\/strong><\/td><td><strong>Color<\/strong><\/td><td><strong>Taste (1-10)<\/strong><\/td><\/tr><tr><td>Banana<\/td><td>Yellow<\/td><td>9<\/td><\/tr><tr><td>Apple<\/td><td>Red<\/td><td>7<\/td><\/tr><tr><td>Watermelon<\/td><td>Red and green<\/td><td>10<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>You&#8217;re about to see one of my favorite blocks. The <strong><g class=\"gr_ gr_9 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del\" id=\"9\" data-gr-id=\"9\">Pullquote<\/g><\/strong> in a full-width mode.<\/p>\n\n\n\n<p>Ready? Go!<\/p>\n\n\n\n<figure class=\"wp-block-pullquote alignfull has-black-color has-white-background-color has-text-color has-background\"><blockquote><p>&#8220;If everything looks and reads the same, then probably nothing gets read or looked at.&#8221;<\/p><cite>Mai Knoblovits<\/cite><\/blockquote><\/figure>\n\n\n\n<p>Ok, I just quoted myself. Sometimes you gotta do what you gotta do.<\/p>\n\n\n\n<p>Here&#8217;s a serious question: what&#8217;s copy without a call to action? I bet many times you needed to add a neat call to action button within your post content. Fortunately, now there&#8217;s an easy way to do that thanks to the <strong>Button<\/strong> block.<\/p>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"https:\/\/artisanthemes.io\/\">I&#8217;m a button, I&#8217;m important<\/a><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter is-style-outline is-style-outline--3\"><a class=\"wp-block-button__link\" href=\"https:\/\/artisanthemes.io\/\">I can be rounded<\/a><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"https:\/\/artisanthemes.io\/\" style=\"border-radius:0px\">I can be squared<\/a><\/div>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link has-vivid-cyan-blue-background-color has-background\" href=\"https:\/\/artisanthemes.io\/\">I can have any color I want<\/a><\/div>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity is-style-wide\"\/>\n\n\n\n<p class=\"has-text-align-center has-very-dark-gray-color has-text-color\" style=\"font-size:22px\"><em> If you want to learn more about Artisan Themes&#8217; integration with Gutenberg, we have a full post about it (a serious post, no joking around like here).<\/em><\/p>\n\n\n\n<div class=\"wp-block-button aligncenter\"><a class=\"wp-block-button__link\" href=\"https:\/\/artisanthemes.io\/artisan-themes-gutenberg-integration\">Read it here&nbsp;\u2192<\/a><\/div>\n\n\n\n<p class=\"has-text-align-center\"><img loading=\"lazy\" decoding=\"async\" draggable=\"false\" class=\"emoji\" alt=\"\ud83d\udc4b\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/1f44b.svg\" width=\"20\" height=\"20\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gutenberg aims to bring you a whole new writing experience inside your WordPress editor. Instead of writing your post as you would in the classic way (similar to writing an article on any text processor), Gutenberg will let you create posts by inserting and combining different types of content blocks. What a way to step [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4323","post","type-post","status-publish","format-standard","hentry","category-inspiration"],"_links":{"self":[{"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/posts\/4323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/comments?post=4323"}],"version-history":[{"count":19,"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/posts\/4323\/revisions"}],"predecessor-version":[{"id":9178,"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/posts\/4323\/revisions\/9178"}],"wp:attachment":[{"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/media?parent=4323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/categories?post=4323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview.artisanthemes.io\/pepperplus\/wp-json\/wp\/v2\/tags?post=4323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}