#BlockEditor

[purvituvar]

Ready to level up your WordPress game?

Discover how WordPress 6.8 is reshaping website design — from sleek grid layouts to powerful block-based magic! ✨

👨‍💻 Don’t go it alone — Hire a WordPress Developer and unlock the full potential of the latest features.

🛠️ Faster builds, better performance, and pro-level customizations await.

[magnigeeks]

Leveraging Gutenberg for WordPress Plugin Development

Hey there, fellow developers! If you're looking to level up your WordPress plugin development game, you've come to the right place. In this blog, we'll dive deep into Gutenberg, the revolutionary block-based editor that's changing the way we create content in WordPress. We'll explore how to harness Gutenberg's potential to build powerful and user-friendly plugins that elevate your websites to the next level. So, buckle up, and let's get started!

Understanding Gutenberg Blocks

Gutenberg is all about blocks - those neat little content elements that make up your web pages. From paragraphs to images, galleries to buttons, each piece of content is now a block. And guess what? You can create your custom blocks too! Embrace the future of content creation with this simple example of a custom "My Awesome Block":

import { registerBlockType } from '@wordpress/blocks';

registerBlockType('my-awesome-plugin/my-awesome-block', {

  title: 'My Awesome Block',

  icon: 'star-filled',

  category: 'common',

  edit: () => {

    return <div>Hey there! I'm your custom block. Let's rock!</div>;

  },

  save: () => {

    return <div>Hi, I'm the front-end version of your custom block!</div>;

  },

});

Building Custom Gutenberg Blocks Creating custom Gutenberg blocks is a breeze. All you need is the Gutenberg Block API and some JavaScript magic. The API lets you define block attributes, settings, and UI components. Let's build a dynamic "Quote Block" with editable author and text:

const { __ } = wp.i18n;

const { registerBlockType } = wp.blocks;

const { RichText } = wp.editor;

registerBlockType('my-awesome-plugin/quote-block', {

  title: __('Quote Block'),

  icon: 'format-quote',

  category: 'common',

  attributes: {

    quoteText: {

      type: 'string',

      source: 'html',

      selector: 'p',

    },

    quoteAuthor: {

      type: 'string',

      source: 'text',

      selector: 'cite',

    },

  },

  edit: ({ attributes, setAttributes }) => {

    const { quoteText, quoteAuthor } = attributes;

    const onChangeQuoteText = (newText) => setAttributes({ quoteText: newText });

    const onChangeQuoteAuthor = (newAuthor) => setAttributes({ quoteAuthor: newAuthor });

    return (

      <blockquote>

        <RichText

          tagName="p"

          value={quoteText}

          onChange={onChangeQuoteText}

          placeholder="Enter your quote here..."

        />

        <RichText

          tagName="cite"

          value={quoteAuthor}

          onChange={onChangeQuoteAuthor}

          placeholder="Author"

        />

      </blockquote>

    );

  },

  save: ({ attributes }) => {

    const { quoteText, quoteAuthor } = attributes;

    return (

      <blockquote>

        <p>{quoteText}</p>

        &lt;cite>{quoteAuthor}<;/cite>

      &lt;/blockquote>

    );

  },

});

Extending Core Gutenberg Blocks

Gutenberg comes with a rich set of core blocks, but sometimes you need that extra oomph! Fear not, you can extend core blocks too. Let's add a custom color option to the default "Button Block":

const { createHigherOrderComponent } = wp.compose;

const { addFilter } = wp.hooks;

const withCustomButtonColor = createHigherOrderComponent((BlockEdit) => {

  return (props) => {

    const { name, attributes, setAttributes } = props;

    const { backgroundColor } = attributes;

    const onChangeBackgroundColor = (colorValue) => {

      setAttributes({ backgroundColor: colorValue });

    };

    return (

      &lt;>

        &lt;BlockEdit {...props} />

        &lt;InspectorControls>

          &lt;PanelBody title="Button Settings" initialOpen={true}>

            &lt;ColorPicker

              color={backgroundColor}

              onChangeComplete={onChangeBackgroundColor}

            />

          &lt;/PanelBody>

        &lt;/InspectorControls>

      &lt;/>

    );

  };

}, 'withCustomButtonColor');

wp.hooks.addFilter('editor.BlockEdit', 'my-awesome-plugin/custom-button-color', withCustomButtonColor);

Implementing Block Patterns

Block Patterns are pre-designed block combinations that simplify content creation. With a single click, you can add complex layouts to your pages. Let's create a "Hero Section" pattern with an image and a heading:

const { registerBlockPattern } = wp.blockPatterns;

const { Fragment } = wp.element;

const { useBlockProps, RichText } = wp.blockEditor;

const heroSectionPattern = {

  title: 'Hero Section',

  description: 'Add a stunning hero section to your website.',

  categories: ['header'],

  content: [

    {

      name: 'core/image',

      attributes: {

        align: 'center',

      },

    },

    {

      name: 'core/heading',

      attributes: {

        level: 2,

        align: 'center',

        placeholder: 'Enter your heading here...',

      },

    },

  ],

};

registerBlockPattern('my-awesome-plugin/hero-section-pattern', heroSectionPattern);

Testing and Debugging Gutenberg Blocks

Testing and debugging are essential in any development process. For Gutenberg blocks, you can use the Gutenberg Plugin Compatibility and Site Health tools. Additionally, unit testing with Jest and end-to-end testing with Cypress can ensure your blocks perform seamlessly.

Congratulations! You've unlocked the immense power of Gutenberg for WordPress Plugin Development. With custom blocks, core block extensions, block patterns, and more, you can now build feature-rich plugins that elevate user experiences. So go ahead, experiment, and create amazing Gutenberg-powered plugins that rock the WordPress world. To know more visit us at https://magnigeeks.com/

[seoboxx-webdesign]

WordPress Update auf Version 6.6.1 (Maintenance Release) am Dienstag, 23. Juli 2024 erschienen

Seit Dienstag, den 23. Juli 2024 steht das WordPress Update auf die Version 6.6.1 zum Download zur Verfügung. Das WordPress Update behebt 8 Fehler im WordPress Core und 9 Fehler im Gutenberg BlockEditor und enthält zahlreiche Neuerungen und Verbesserungen.

Wir empfehlen daher die zeitnahe Installation des WordPress Updates und weisen zudem noch einmal darauf hin, dass durch Updates wichtige Sicherheitslücken geschlossen werden und somit Fehler in WordPress selbst behoben werden. Vor allem das Schließen von Sicherheitslücken steht immer im Fokus der Entwickler des WordPress CMS, wobei die Sicherheit beziehungsweise die Datensicherheit Ihrer WordPress Website auch im Sinne Ihrer Websitebesucher ist.

Bedenken Sie auch die Wichtigkeit des WordPress Updates im Bezug auf die Datenschutzgrundverordnung (DSGVO) und somit auch Ihrer Haftung gegenüber den Besuchern Ihrer Website bezüglich der gespeicherten und genutzten Daten.

Die Releasenote im Original (englische Sprache) können Sie auf https://wordpress.org/news/2024/07/wordpress-6-6-1-maintenance-release/ einsehen.

Die deutsche Version der Releasenote können Sie auf https://de.wordpress.org/news/ einsehen.

Alle Fehlerkorrekturen, Neuerungen und Verbesserungen des WordPress Cores können Sie auf https://core.trac.wordpress.org/query?status=closed&milestone=6.6.1 einsehen.

Die Fehlerkorrekturen, Neuerungen und Verbesserungen des „Gutenberg“ Block-Editors können Sie auf https://core.trac.wordpress.org/changeset/58757 einsehen.

Die Listen der behobenen Fehler und/oder behobenen Fehler sowie die originalen Releasenotes stehen zum Teil nur in englischer Sprache zur Verfügung und es gibt aktuell hierfür keine Übersetzungen. Sollten Sie jedoch eine Übersetzung benötigen empfehlen wir ihnen die Nutzung des kostenlosen DeepL - Übersetzers unter https://deepl.com/.

Erfahren Sie mehr über dieses WordPress-Update in unserem News Blog auf https://seoboxx-webdesign.de/blog-news/ oder lesen Sie den vollständigen Artikel auf https://seoboxx-webdesign.de/wordpress/2024/07/23/wordpress-update-auf-version-6-6-1-erschienen/

[derek-hanson]

Radical idea 💡. With the new pattern overrides coming in WordPress 6.6, what if you only used the Post Content block in page templates? One type of page design experience that is common for sites is to have a hero image background, page title, subtitle text, and a call to action button. When you do this design in a page template, you can get the page title and subtitle to be easily editable because you just use the Title block and Excerpt block, both editable in the post settings. What you can’t edit on a per page basis is that button. With pattern overrides, just use the post content block in your template, then have a page hero pattern with pattern overrides for each of those blocks: Title, any heading or paragraph block, and the button block. All the content is then editable when inserting the pattern. Enhance the experience even more by having the pattern auto inserted or displayed in the pattern modal. #wordpress #wp #blockeditor #gutenberg #patterns #patternoverrides

[growwwth]

How to Add Multi-Column Content in WordPress? Beginners Tutorial https://www.youtube.com/watch?v=8kEFlDlVEr4 🎬📝🧑‍💻↔️ #Column #Layout #BlockEditor #Content #WordPress #Guide

[bloggaliofficial]

Top 4 Features of WordPress 5.5- WP Latest Update

WordPress is the most commonly used CMS (Content Management System) that we are using today. Recently WordPress 5.5 has been released with a lot of improvements. You will see the latest features of WordPress in this update. About 35 %+ of the websites are made with WordPress. Whether we want to make our blog or start a new e-commerce site, WordPress is the number one option for most of us. The reason behind this success of WordPress is that it is so simple and easy to use. You don’t need to be any developer or have any knowledge of Website Development. Just buy a hosting and domain and start building your website on WordPress within hours. Yes, it is right. You can literally build your e-commerce store with WordPress and WooCommerce within 2-3 hours yourself. So, you don’t need to hire a developer and spend thousands of Dollars. WordPress has already made our lives easy and simple, with its built-in features, themes, and plugins support. And with WordPress 5.5, they are taking one step further towards your success. There are a lot of security improvements, bugs fixed in the latest WP 5.5 version. There are many new features added in the 5.5 version of WordPress, but In this article, we are going to give you the Top 4 features of WordPress 5.5 that we think are best for you and your website.  Top 4 features of WordPress 5.5: As we discussed above, there are many new features, but for now, we are going to list Top 4 features that are worth mentioning here. Read the full article

[paperkutzs]

Had A Wordpress Online Chat Tonite

Had A WordPress Online Chat Tonite

Non copyright image from web

Non copyrighted image from-no copyright exclamation point image

WordPress Editors

I had been using the classic editor for approximately the last 2 years. Then switched when told they were ditching it June 1, 2020.

I contacted their online chat tonite for assistance. There were a couple of things I was having a greater amount difficulty figuring out.

Long…

[tulamwebbanhang]

Cách dễ dàng thay đổi kích thước phông chữ trong WordPress

Bạn có muốn thay đổi kích thước phông chữ trong các bài đăng hoặc trang WordPress của mình không? Đôi khi, bạn có thể muốn làm cho một dòng hoặc một đoạn lớn hơn hoặc bạn có thể muốn tăng kích thước phông chữ của toàn bộ nội dung trang của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thay đổi kích thước phông chữ trong WordPress. Bạn không chỉ học cách thay đổi kích thước phông chữ trong các bài đăng WordPress mà còn cả cách thực hiện trên trang web của mình.

Sử dụng tiêu đề đoạn

Khách truy cập của bạn chỉ mất vài giây để quyết định xem họ muốn ở lại hay rời khỏi trang web của bạn. Điều này cho bạn rất ít thời gian để thuyết phục họ ở lại trang web của bạn. Sử dụng Tiêu đề trong nội dung của bạn là một cách tuyệt vời để thu hút sự chú ý của người dùng. Chúng cho phép bạn chia các bài đăng và trang của bạn thành các phần bằng các tiêu đề khác nhau (thường được gọi là tiêu đề phụ của Cameron). Tiêu đề là rất tốt cho SEO là tốt. Công cụ tìm kiếm cho tiêu đề thích hợp nhiều trọng lượng hơn văn bản đoạn bình thường. Cách thêm tiêu đề trong trình chỉnh sửa khối WordPress mặc định Bạn có thể thêm tiêu đề vào bài đăng hoặc trang của mình bằng cách thêm khối ‘Tiêu đề. Bạn có thể tìm kiếm nó hoặc tìm thấy nó trong phần ‘Khối khối chung trong phần Trình soạn thảo Block Editor WordPress.

Khối sẽ mặc định là Tiêu đề 2. Thông thường, sẽ rất hợp lý khi gắn với Tiêu đề 2 cho các tiêu đề phụ của bạn. Nếu bạn muốn thay đổi điều này, thì bạn chỉ cần nhấp vào trình đơn thả xuống ’H2, để chọn một kích thước khác.

Ngoài ra, bạn có thể thay đổi điều này trong cài đặt khối ở phía bên phải màn hình. Bạn cũng có thể thay đổi tiêu đề màu ở đó. Cách thêm tiêu đề trong Trình chỉnh sửa Cổ điển cũ hơn Nếu bạn vẫn đang sử dụng trình soạn thảo cũ hay còn có tên là Classic Editor, thì bạn có thể thêm các tiêu đề bằng cách nhấn vào "Paragraph" . Chọn văn bản mà bạn muốn biến thành tiêu đề, nhấp vào thả xuống ‘Đoạn văn bản và chọn kích thước tiêu đề của bạn.

Kích thước và màu sắc của các kiểu Tiêu đề khác nhau được kiểm soát bởi CSS trong theme bạn đang dùng (style.css). Nếu bạn sử dụng một chủ đề WordPress cao cấp, sau đó bạn có thể có tùy chọn để thay đổi các cài đặt này trong Giao diện »Tùy chỉnh. Sử dụng các tiêu đề phụ trong bài viết của bạn giúp người đọc dễ dàng theo dõi những gì bạn nói với họ. Đồng thời, nó cũng làm cho bạn Bài viết WordPress thân thiện với SEO.

Thay đổi kích thước phông chữ trong WordPress với trình soạn thảo dạng khối (Block Editor)

Điều gì nếu bạn muốn có một đoạn hoặc thậm chí toàn bộ bài viết của bạn trong một phông chữ lớn hơn? Bạn có thể làm điều này thực sự dễ dàng bằng cách sử dụng trình chỉnh sửa khối mặc định mới nhất của WordPress. Chỉ cần nhấp vào bất kỳ khối đoạn văn nào, sau đó chọn kích thước phông chữ trong Settings Cài đặt văn bản ở phía bên phải.

Có các lựa chọn bao gồm Nhỏ, Bình thường, Trung bình, Lớn và rất Lớn. Nếu bạn đổi ý, thì chỉ cần nhấp vào nút ‘Đặt lại" để đặt đoạn văn của bạn trở lại văn bản mặc định. Ngoài ra còn có một ô tùy chọn bên cạnh, bạn chỉ cần nhập kích thước pixel mà bạn thích. Nếu bạn muốn, bạn cũng có thể đặt DropCap lớn xuất hiện ở đầu đoạn của mình. Các tùy chọn này không có sẵn trong trình soạn thảo cổ điển cũ hơn cho WordPress. Nếu bạn muốn sử dụng chúng, bạn nên chuyển qua dùng Block Editor mới của Wordpress.

Thay đổi kích thước phông chữ bằng Plugin TinyMCE Advanced

TinyMCE Advanced là một plugin WordPress cho phép bạn kiểm soát nhiều hơn về kích thước phông chữ và định dạng văn bản, cũng như một loạt các tính năng khác. Điều này đặc biệt hữu ích với trình soạn thảo cổ điển cũ hơn, nhưng nó cũng hoạt động với trình chỉnh sửa khối. Nó bổ sung một khối mới có tên là Dòng cổ điển Đoạn văn có tất cả các điều khiển TinyMCE. Để sử dụng nó, trước tiên bạn cần cài đặt và kích hoạt Plugin TinyMCE Advanced cắm vào. Bạn có thể đọc bài viết cách cài đặt plugin của chúng tôi. Tiếp theo, đi đến Cài đặt »TinyMCE Advanced để cấu hình cài đặt trình chỉnh sửa. Đây là nơi bạn có thể thiết lập các nút bạn muốn sử dụng trên thanh công cụ TinyMCE Advanced. Nếu bạn sử dụng nó với trình soạn thảo Cổ điển, thì bạn sẽ thấy TinyMCE có trình đơn thả xuống Size Kích thước phông chữ được bật theo mặc định trong hàng biểu tượng thứ hai. Bạn có thể di chuyển nó đến hàng đầu tiên bằng cách k��o nó lên trên nếu bạn muốn.

Nếu bạn sử dụng trình soạn thảo Block Editor, thì bạn sẽ cần cuộn xuống màn hình và thêm trình đơn thả xuống Kích thước phông chữ vào thanh công cụ bằng cách kéo và thả nó:

Sau đó hãy nhấp vào ‘Lưu Thay đổi trên màn hình. Để xem nút hoạt động, tạo một bài đăng mới hoặc chỉnh sửa một bài hiện có. Trong trình chỉnh sửa khối, giờ đây, bạn sẽ có tùy chọn để thêm một khối Đoạn cổ điển. Nó sẽ có các điều khiển TinyMCE Advanced, như thế này:

Trong trình chỉnh sửa cổ điển Classic Editor, bạn sẽ thấy các thanh công cụ TinyMCE Advanced với trình đơn thả xuống kích thước phông chữ:

Bạn có thể chọn bất kỳ kích thước phông chữ nào từ trình đơn thả xuống. Lưu ý: điều này không cung cấp cho bạn nhiều tùy chọn như trình chỉnh sửa khối WordPress và bạn có thể gõ loại chữ trong kích thước phông chữ của riêng bạn.

Thay đổi kích thước phông chữ toàn trang web bằng CSS

Nếu bạn đang thay đổi kích thước phông chữ mỗi khi bạn chỉnh sửa một bài đăng, thì bạn có thể muốn làm cho nó dễ dàng hơn bằng cách thay đổi nó vĩnh viễn trong chủ đề của bạn. Tin vui là bạn có thể thay đổi kích thước đoạn mặc định trên toàn bộ trang web của mình. Cách tốt nhất để làm điều này là bằng cách sử dụng chức năng Giao diện »Tùy chỉnh. Một số  theme của WordPress có thể đi kèm với một tùy chọn để bạn thay đổi kích thước phông chữ. Nếu bạn có thể tìm thấy tùy chọn này, thì bạn có thể sử dụng nó mà không cần viết mã CSS. Tuy nhiên, nếu theme của bạn không có tính năng đó, thì bạn có thể thêm CSS tùy chỉnh để thêm quy tắc kích thước phông chữ của riêng bạn. Chỉ cần nhấp vào tùy chọn Additional CSS(CSS bổ sung) trong tùy biến chủ đề. Đây là nơi bạn có thể lưu trữ tất cả mã CSS tùy chỉnh của mình.

Bây giờ trong hộp văn bản CSS bổ sung, chỉ cần thêm mã CSS của bạn. Trong ví dụ này, chúng tôi đang thay đổi kích thước phông chữ thành Kiểu 16px, bạn có thể chọn một cỡ chữ khác. p { font-size:16px; } Bạn ngay lập tức nhìn thấy những thay đổi trên bản xem trước ở phía bên phải màn hình. Nếu bạn hài lòng với kích thước phông chữ, hãy nhấp vào nút ‘Xuất bản' ở đầu màn hình của bạn để làm cho nó hoạt động. Ghi chú: CSS tùy chỉnh của bạn sẽ chỉ được áp dụng cho theme bạn sử dụng. Nếu sau này bạn chọn chuyển sang một theme WordPress khác, bạn sẽ cần sao chép và dán nó vào Customizer một lần nữa. Đoạn mã trên chỉ áp dụng cho văn bản đoạn văn. Còn nếu bạn muốn thay đổi kích thước phông chữ của tất cả các tiêu đề phụ h2? Chỉ cần sửa đổi mã trên để nhắm mục tiêu phần tử h2 trong chủ đề của bạn như thế này: h2 { font-size:32px; } Bạn cũng có thể làm điều tương tự với các tiêu đề khác bằng cách thay đổi h2 thành h3, h4 hoặc h5. Read the full article

[deineip]

Neue Wordpress 5.5 Features im Blockeditor

Neue WordPress 5.5 Features im Blockeditor

Über Nacht ist die neue WordPress Version 5.5 “Eckstine” rausgekommen und ich zeige euch hier ein paar der neuen Blockeditor Möglichkeiten. Technisch hat sich auch Einiges verbessert, so legt WordPress nun selbstständig XML-Sitemaps für Suchmaschinen an und Die Ladegeschwindigkeit von Bildern bzw. Seiten wurde durch verzögertes Laden optimiert:

Beiträge und Seiten laden dank der…

[topicbeforeaboutthe5th]

もうどうにもこうにもWordPress5.0のブロックに馴染めない。柔軟なレイアウト構築が目的なのかもしれない。強力な、コンテンツ創造を体験してもらいたのかもしれない。しかし、自分にはこのアップデートによって「書く」という単純なことに気が回らなくなってしまったことの方が大きな問題なのだ。 これに慣れるしかないし、これから使い始める人にとってはそれが常識となるのも理解できる。実際、受け入れて使ってみて覚えていこうと思っても、気がのらない。...

[wpcity]

What Is Genesis Pro? Is Genesis Pro Worth Investing? Here is the answer: https://ift.tt/3sSog8w #gutenberg #blockeditor for #wordpresstheme #gensisframework from StudioPress

[seoboxx-webdesign]

WordPress Update auf Version 6.0 „Arturo“ erschienen

Seit 24. Mai 2022 steht das WordPress Update „Arturo“ auf Version 6.0 zum Download bereit. Dieses WordPress Update beinhaltet viele Neuerungen, behebt 177 Fehler und enthält 97 Erweiterungen.

Enthalten sind allgemeine Performanceverbesserungen und vor allem Verbesserungen und Erweiterungen des Blockeditors Gutenberg.

Dieses WordPress Update wurde nach dem am 22. Juni 1960 in Mexico-City geborenen amerikanischen Jazzpianist und bis dato 5fach mit dem Grammy ausgezeichneten Arturo O’Farrill benannt.

Wir empfehlen daher eine zeitnahe Installation des WordPress Updates, weisen aber gleichzeitig auch darauf hin eine sorgfältige Prüfung der vorhandenen PlugIns und Drittanbietertools vorzunehmen. Eventuell ist es sinnvoll bei Unsicherheiten den PlugIn Anbieter/Hersteller zu kontaktieren.

Alle Fehlerkorrekturen, Verbesserungen und Verbesserungen können unter https://core.trac.wordpress.org/query?milestone=6.0&order=priority nachgelesen werden.

Die Releasenote im Original (englische Sprache) können Sie unter https://wordpress.org/news/2022/05/arturo/ einsehen, die deutsche Version finden Sie unter https://de.wordpress.org/2022/05/wordpress-6-0-arturo/.

Erfahren Sie mehr über dieses WordPress Update in unserem News Blog auf https://seoboxx-webdesign.de/blog-news/ oder lesen Sie den vollständigen Artikel auf https://seoboxx-webdesign.de/blog-news/wordpress/wordpress-update-auf-version-6-0-arturo-am-24-mai-2022-erschienen/.

[derek-hanson]

I heard the absolute, all time best quote to validate WordPress, specifically the block editor (Gutenberg). A colleague and I were guiding a brand new WordPress user through creating new posts in the block editor. We sat and watched the user copy content from a Google Doc, pasted it into the block editor, add the Jetpack Paywall block, navigate post settings, and publish the post. During the editing process, without skipping a beat clicking around the canvas, stated, ““This is so easy. Anyone can do this.” I can’t think of a better endorsement for the block editor or WordPress. #wordpress #wp #gutenberg #blockeditor #jetpack #jetpack-newsletter

[horax]

blockeditor

dieser blockeditor in wordpress bringt mich zur verzweiflung. seltsamerweise komme ich aber in der wordpress-app beim bloßen schreiben und linksetzen damit halbwegs klar…

(25.4.2021)

[smorgasbordinvitation]

#EditorWars - #BlockEditor vs #ClassicEditor

#EditorWars – #BlockEditor vs #ClassicEditor

If you spent Thursday tearing your hair out with the new enhanced Classic Editor upgrade as I did…be thankful for those in the community who are there to help.. Head over to Marcia Meara for a quick and easy way to get your familiar interface for the classic back… life saver…You rock Marcia..