{"id":48341,"date":"2018-09-11T18:14:45","date_gmt":"2018-09-11T18:14:45","guid":{"rendered":"http:\/\/annaschneider.me\/?p=48341"},"modified":"2018-09-11T18:24:37","modified_gmt":"2018-09-11T18:24:37","slug":"custom-gutenberg-blocks-for-custom-websites","status":"publish","type":"post","link":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/","title":{"rendered":"Custom Gutenberg Blocks for Custom Websites"},"content":{"rendered":"

It often occurs, that one is building a website for a customer who has very specific design needs. And it happens even more, that the people publishing posts are not the ones designing the looks. So writers don\u2019t know how things are supposed to be, yet they should still be able to always get it right.<\/p>\n

In the past, I have created custom elements for the TinyMCE-WordPress Editor. One of the plugins I used here was the Visual Editor Custom Buttons<\/a>. I could create elements that the writers would find in the toolbar with just a click on a button. Each button got its own icon and usually the content looked accordingly.
\nI say usually, because it was also not too hard to mess up the HTML when copying content in, when deleting elements, etc. That then ended in a mess in the frontend. So it was a solution to offer the needed elements, but I still had to teach the html view and how the elements markup was supposed to look.<\/p>\n

But now Gutenberg is coming. My custom buttons wouldn\u2019t work anymore anyways – so I had a good reason to get to know blocks.<\/p>\n

Building my first Gutenberg block<\/h2>\n

First be ready<\/h3>\n

To get started with building blocks, one does need a bit of a setup. It\u2019s nothing too bad. You should definitely work on a local installation or you have to write everything in JS5, which is a lot more of a hassle. I mainly use local<\/a> for that. That also means you need to be able to build your ESNext-written blocks, so you need npm\/yarn setup. But if you develop, you probably think that’s standard computer equipment.
\nAnd last but not least, if you don\u2019t already, you need to understand React. If you\u2019re mainly developing for WordPress, you may not have needed it so far. But it\u2019s a good time to learn it anyways.<\/p>\n

Now finally, we can get started.<\/p>\n

Figuring out how to build a custom block<\/h3>\n

So we all get started with googling. There already are a lot of articles on how to build your blocks. Some of them were already outdated, as Gutenberg did a lot of development since it first got introduced. But there\u2019s still enough. And luckily the team behind Gutenberg actually published Gutenberg examples. Them\u00a0combined with their tutorial<\/a>\u00a0are great learning resource.
\nI personally only wanted to build simple blocks which mainly have 1-3 fields to fill out, sometimes an image to upload and a set design around them. So I decided against using a developer toolkit.
\nOther then that I had a steep learning curve. You can really just follow any of the tutorials, run your build and activate your blocks as a plugin.<\/p>\n

Where I ran into problems<\/h3>\n

So yes, it was simple, but not without these aweful moments where it just won’t work. And that was when I noticed how little questions were asked about Gutenberg yet. When usually you can always find an answer on Stackoverflow, it\u2019s not the case a month before Gutenberg is integrated into WordPress Core. But I bet this changes really fast from now on.<\/p>\n

So what I had to google forever where things like:<\/p>\n

    \n
  • How can I use a specific media image size – if available?<\/strong> This for example is a really simple question. With a really simple answer:
    \nconst image = media.sizes.thumbnail
    \n? media.sizes.thumbnail.url
    \n: media.url;<\/code><\/li>\n
  • How to make you block styles appear on the left hand corner of the block?\u00a0<\/strong>(In the toolbar) This can go underneath the attributes:
    \nstyles: [
    \n{ name: 'default', label: __( 'Standard' ), isDefault: true },
    \n{ name: 'round', label: __( 'Round\u2018 ) },
    \n{ name: 'oval\u2019, label: __( 'Oval\u2018 ) }],<\/code>
    \nFunny enough, I found a couple of good tutorials on how to add your own selections in the inspector on the right. It\u2019s so often the simple things that no-one mentions.<\/li>\n
  • How can I change classnames according to the selected style?<\/strong>\u00a0(I still haven\u2019t figured it out actually.) And yes, the block will get is-style-xxx<\/code> as class name, and I do have CSS. But I still wanted to give an image a different class. So, I\u2019ll add this once I know.<\/li>\n
  • Why do I keep getting the \u201einvalid block\u201c in my backend?<\/strong> So here googling didn\u2019t help much either. But I noticed that I had given my RichText tags a tagname=\u201ediv\u201c<\/code> and then used p as child elements. Gutenberg only expected the div. As I only have short content in the blocks. I now just use p as tagname.<\/li>\n<\/ul>\n

    What I love<\/h2>\n

    So building these blocks actually turned me into a Gutenberg fan. Yes, my blocks were simple, but that\u2019s what customers need so often.<\/p>\n

      \n
    • Customers can\u2019t break them!<\/li>\n
    • They are really simple to use and as you really see what you get chances of making a mistake are even smaller.<\/li>\n
    • It\u2019s much easier to customize the possibilities for editors.<\/li>\n
    • It\u2019s really not hard to understand the science behind simple blocks.<\/li>\n
    • As your blocks definitely have custom class names, you usually won\u2019t break other design elements when styling the block.<\/li>\n
    • The preview view<\/li>\n
    • And well – I showed my customers how to edit posts, and they were so happy about it. I don\u2019t want to introduce something else anymore.<\/li>\n<\/ul>\n

      Will I use Gutenberg?<\/h2>\n

      Well, as you probably read “between the bold lines”, I definitely will use it and will get further into building blocks.<\/p>\n

      But will I always use it? Honestly? Probably not. There are so many different kinds of projects one builds with WordPress. And each project has different needs. I won’t close the door on other page builders. Gutenberg is not a replacement for me. I like pagebuilders, when creating static pages. It’s a fast process, immediately looks good and is usually responsive. And they will get me much further (so far?) then the Gutenberg editor.
      \nBut for every project a customer will publish their own content, I will introduce them to the Gutenberg editor, I will create them their own blogs if needed and I will shut off my laptop easier knowing that it’s much harder for them to break them.<\/p>\n

      I\u2019m really curious and what is to come and I can\u2019t wait to have a huge library of blocks to use. The Gutenberg team definitely covered what most bloggers need. And they opened a huge door to add custom functionality with new technology instead of always running back to old plugins that may or may not use current programming languages.<\/p>\n","protected":false},"excerpt":{"rendered":"

      It often occurs, that one is building a website for a customer who has very specific design needs. And it happens even more, that the people publishing posts are not the ones designing the looks. So writers don\u2019t know how things are supposed to be, yet they should still be able to always get it […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","jetpack_post_was_ever_published":false,"footnotes":""},"categories":[19,37,4],"tags":[],"yoast_head":"\nCustom Gutenberg Blocks for Custom Websites - Anna Schneider<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Custom Gutenberg Blocks for Custom Websites - Anna Schneider\" \/>\n<meta property=\"og:description\" content=\"It often occurs, that one is building a website for a customer who has very specific design needs. And it happens even more, that the people publishing posts are not the ones designing the looks. So writers don\u2019t know how things are supposed to be, yet they should still be able to always get it […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/\" \/>\n<meta property=\"og:site_name\" content=\"Anna Schneider\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-11T18:14:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-09-11T18:24:37+00:00\" \/>\n<meta name=\"author\" content=\"anna\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"anna\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/\",\"url\":\"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/\",\"name\":\"Custom Gutenberg Blocks for Custom Websites - Anna Schneider\",\"isPartOf\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\"},\"datePublished\":\"2018-09-11T18:14:45+00:00\",\"dateModified\":\"2018-09-11T18:24:37+00:00\",\"author\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\"},\"breadcrumb\":{\"@id\":\"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/annaschneider.me\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Custom Gutenberg Blocks for Custom Websites\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#website\",\"url\":\"https:\/\/annaschneider.me\/blog\/\",\"name\":\"Anna Schneider\",\"description\":\"Front-End Developer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/annaschneider.me\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844\",\"name\":\"anna\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g\",\"caption\":\"anna\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Custom Gutenberg Blocks for Custom Websites - Anna Schneider","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/","og_locale":"en_US","og_type":"article","og_title":"Custom Gutenberg Blocks for Custom Websites - Anna Schneider","og_description":"It often occurs, that one is building a website for a customer who has very specific design needs. And it happens even more, that the people publishing posts are not the ones designing the looks. So writers don\u2019t know how things are supposed to be, yet they should still be able to always get it […]","og_url":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/","og_site_name":"Anna Schneider","article_published_time":"2018-09-11T18:14:45+00:00","article_modified_time":"2018-09-11T18:24:37+00:00","author":"anna","twitter_card":"summary_large_image","twitter_misc":{"Written by":"anna","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/","url":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/","name":"Custom Gutenberg Blocks for Custom Websites - Anna Schneider","isPartOf":{"@id":"https:\/\/annaschneider.me\/blog\/#website"},"datePublished":"2018-09-11T18:14:45+00:00","dateModified":"2018-09-11T18:24:37+00:00","author":{"@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844"},"breadcrumb":{"@id":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/annaschneider.me\/blog\/custom-gutenberg-blocks-for-custom-websites\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/annaschneider.me\/blog\/"},{"@type":"ListItem","position":2,"name":"Custom Gutenberg Blocks for Custom Websites"}]},{"@type":"WebSite","@id":"https:\/\/annaschneider.me\/blog\/#website","url":"https:\/\/annaschneider.me\/blog\/","name":"Anna Schneider","description":"Front-End Developer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/annaschneider.me\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/aed03681a2dc960294c5442477a37844","name":"anna","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/annaschneider.me\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6c797411dcaa0edbe0f7d081dd142432?s=96&d=mm&r=g","caption":"anna"}}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9x5Dx-czH","jetpack-related-posts":[{"id":48624,"url":"https:\/\/annaschneider.me\/blog\/finally-wordpress-image-editing-at-its-best\/","url_meta":{"origin":48341,"position":0},"title":"Finally – WordPress image editing at its best","author":"anna","date":"May 31, 2022","format":false,"excerpt":"Blogs live not only from their written content, but many of those out there live off their pictures. The most known examples coming to mind are travel and food blogs, fashion and jewelry, sports and news and that\u2019s just the big keywords.\u00a0 For most creators, this means they take a\u2026","rel":"","context":"In "WordPress Tips"","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/05\/Bildschirmfoto-2022-05-31-um-11.17.15.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":48639,"url":"https:\/\/annaschneider.me\/blog\/adding-custom-content-with-javascript-to-wordpress-media-modals\/","url_meta":{"origin":48341,"position":1},"title":"Adding custom content to WordPress media modals","author":"anna","date":"June 13, 2022","format":false,"excerpt":"This is a short tutorial on extending the WordPress media modal with your own content. Here we add a button in the media upload image details section. The wp.media class When adding, choosing and editing images in WordPress, most of the time you will see a modal opening up. This\u2026","rel":"","context":"In "WordPress Tips"","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2022\/06\/editimagebutton.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":147,"url":"https:\/\/annaschneider.me\/blog\/why-i-love-working-with-woothemes-canvas\/","url_meta":{"origin":48341,"position":2},"title":"Why I love working with WooThemes Canvas","author":"anna","date":"March 18, 2016","format":false,"excerpt":"The Canvas theme Canvas describes itself as: \"a\u00a0clean, minimalistic and beautiful WordPress theme framework or so called starter theme that you can use as-is or customize it via Theme Options. Canvas Theme Options provides with over 100 different values you can tweak to change font size, color, background, widget styling,\u2026","rel":"","context":"In "Customization"","block_context":{"text":"Customization","link":"https:\/\/annaschneider.me\/blog\/customization\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/03\/Canvas.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":48553,"url":"https:\/\/annaschneider.me\/blog\/plugin-image-slider-block\/","url_meta":{"origin":48341,"position":3},"title":"Plugin: Image Slider Block","author":"anna","date":"March 26, 2019","format":false,"excerpt":"Download from WordPress.org A simple image slider block plugin for Gutenberg blocks Create a fully responsive image slider gallery as a block. Features:\u2013 Simple Image Slider\u2013 Enable\/Disable arrow navigation\u2013 Enable\/Disable dot navigation\u2013 Enable\/Disable autoplay\u2013 Enable\/Disable image crop to same height\u2013 Set autoplay speed\u2013 Fade or scroll effect\u2013 Image linking","rel":"","context":"In "WordPress Tips"","block_context":{"text":"WordPress Tips","link":"https:\/\/annaschneider.me\/blog\/wordpress-tips\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2019\/03\/image-slider-block-banner.jpg?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":403,"url":"https:\/\/annaschneider.me\/blog\/5-tools-test-css-browser-support\/","url_meta":{"origin":48341,"position":4},"title":"5 Great Tools to Test Your CSS And Browser Support","author":"anna","date":"July 14, 2017","format":false,"excerpt":"When writing code no matter for what, one of the hardest part is keeping up. Constantly there are new standards and CSS compatibility problems with all browsers, users, sizes, etc. Designers and programers usually have the most recent browser updates installed and use the most common browsers. So new elements\u2026","rel":"","context":"In "Front-End Development"","block_context":{"text":"Front-End Development","link":"https:\/\/annaschneider.me\/blog\/front-end-development\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/07\/cross-browser-compatibility.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/07\/cross-browser-compatibility.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/07\/cross-browser-compatibility.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/07\/cross-browser-compatibility.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/07\/cross-browser-compatibility.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2017\/07\/cross-browser-compatibility.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":80,"url":"https:\/\/annaschneider.me\/blog\/language-corrections-using-po-files\/","url_meta":{"origin":48341,"position":5},"title":"Language corrections using .po files","author":"anna","date":"February 23, 2016","format":false,"excerpt":"Most themes and plugins automatically recognize the language version of your WordPress installation and the country you work from. Then they install the right language package and without ever noticing the different language versions, everything is shown in the right\u00a0language. But what if a different language then automatically detected is\u2026","rel":"","context":"In "Multilanguage"","block_context":{"text":"Multilanguage","link":"https:\/\/annaschneider.me\/blog\/multilanguage\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/PoEdit.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/PoEdit.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/PoEdit.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/PoEdit.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/PoEdit.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/annaschneider.me\/blog\/wp-content\/uploads\/2016\/02\/PoEdit.png?resize=1400%2C800&ssl=1 4x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/48341"}],"collection":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/comments?post=48341"}],"version-history":[{"count":7,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/48341\/revisions"}],"predecessor-version":[{"id":48350,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/posts\/48341\/revisions\/48350"}],"wp:attachment":[{"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/media?parent=48341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/categories?post=48341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/annaschneider.me\/blog\/wp-json\/wp\/v2\/tags?post=48341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}