몇 년 동안 WordPress(WordPress) 를 사용해 왔다면 WordPress 직원 이 2018년 에 WordPress 5.0 에서 (WordPress 5.0)Gutenberg 편집기를 출시 했을 때를 기억할 것입니다.
이 새로운 기본 편집기는 사이트의 게시물과 페이지를 모두 편집하기 위한 대대적인 점검이었습니다. 웹 사이트 소유자에게 익숙한 큰 텍스트 상자를 매우 다른 블록 기반 편집 플랫폼으로 변환했습니다.
일부 웹 사이트 소유자는 WordPress 5.0(WordPress 5.0) 으로의 업그레이드를 피하고 가능한 한 오랫동안 고전적인 기본 편집기를 유지 하기 위해 그것을 싫어했습니다 . 다른 웹 사이트 소유자는 단순성과 사용 편의성을 위해 변경 사항을 수용했습니다.
전환하는 중이고 무엇을 기대해야 하는지 궁금하다면 이 WordPress Gutenberg 튜토리얼에서 알고 이해해야 하는 주요 기능을 안내합니다. 이렇게 하면 전환이 최대한 쉬워집니다.
WordPress 구텐베르크(WordPress Gutenberg) 에서 기대할 수 있는 것
Gutenberg 편집기 에 대해 알아야 할 주요 사항은 블록 기반이라는 것입니다. 이것은 추가해야 하는 모든 것이 블록을 통해 관리된다는 것을 의미합니다. 구텐베르크(Gutenberg) 의 블록 에는 다음이 포함됩니다(단, 이에 국한되지 않음).
거의 사용되지 않는 몇 가지 다른 고급 블록도 있습니다. 편집기에 새 WordPress 플러그인(new WordPress plugins) 을 설치하면 추가 블록이 표시될 수 있습니다 .
블록을 추가하는 것은 가장 최근에 추가한 블록 아래 오른쪽에 있는 + 아이콘을 선택하는 것만큼 간단합니다.
팝업 창에서 블록을 선택하면 해당 블록이 페이지 또는 게시물의 다음 섹션으로 추가됩니다.
이 블록에 도달하기 전에 처음부터 시작하여 WordPress 의 (WordPress)Gutenberg 를 사용하여 새 게시물을 작성해 보겠습니다 .
게시물 생성 및 블록 추가
게시물 추가는 WordPress(WordPress) 의 마지막 버전에서 변경되지 않은 상태로 유지됩니다 . 왼쪽 탐색 모음에서 게시물(Posts) 을 선택 하고 그(Just) 아래 에서 새로 추가 를 선택하기만 하면 됩니다.(Add New)
그러면 게시물 편집기 창이 열립니다. 이것은 또한 모든 것이 다른 곳입니다. 기본 Gutenberg WordPress 편집기가 표시됩니다.
구텐베르크 편집기(Gutenberg Editor) 에서 블록 항목(Block Items) 추가
제목 필드에 게시물 제목을 입력할 수 있습니다. 그런 다음 오른쪽 의 +
단락 블록(Paragraph Blocks)
사람들이 제목 다음에 추가하는 가장 일반적인 첫 번째 블록은 단락 블록입니다. 이렇게 하려면 팝업 창에서 단락 을 선택합니다.(Paragraph)
이렇게 하면 게시물의 첫 번째 단락을 입력할 수 있는 블록 필드가 삽입됩니다. 단락(Paragraph) 블록 의 서식은 사이트 단락 블록 의 기본 글꼴(the default font) 을 따릅니다 .
다음은 구텐베르크(Gutenberg) 편집기에서 단락 블록을 추가하기 위한 몇 가지 팁입니다.
- 단락은 원하는 만큼 길어질 수 있습니다. 텍스트는 클래식 편집기에서처럼 자동으로 다음 줄로 줄바꿈됩니다.
- Enter 키 를 누르면 구텐베르크(Gutenberg) 편집기가 자동으로 새 단락 블록을 생성하지만 단락 나누기가 있는 두 번째 단락처럼 보입니다.
- 단락의 텍스트를 강조 표시하면 해당 텍스트의 서식을 변경하거나 블록을 목록이나 다른 블록 유형으로 수정할 수 있는 서식 지정 창이 표시됩니다.
- 세 개의 점을 선택하고 블록 제거(Remove block) 를 선택 하여 단락 블록을 삭제하고 다른 것으로 교체합니다.
이미지 블록(Image Blocks)
이미지(Image) 블록을 선택하면 업로드 버튼을 선택하여 컴퓨터에서 게시물로 이미지를 업로드할 수 있는 이미지 상자(Upload) 가 표시 됩니다(Image) . 미디어 라이브러리(Media Library) 링크를 선택 하여 기존 미디어 라이브러리의 이미지를 사용하거나 URL(Insert from URL) 에서 삽입을 선택하여 다른 사이트의 이미지에 연결합니다.
그러면 새 이미지(Image) 블록 을 추가한 기사에 이미지가 삽입됩니다 . 이미지 바로 아래에 이미지 캡션을 입력할 수 있습니다.
일반 단락 텍스트에서와 같이 캡션 텍스트에 동일한 서식 옵션을 사용할 수 있습니다.
블록 나열(List Blocks)
새 블록을 추가하고 목록(List) 을 선택 하면 기사의 해당 지점에 목록 블록이 삽입됩니다.
하나의 글머리 기호가 표시되지만 입력하고 Enter 키를 누르면 각각(Enter) 의 새 글머리 기호가 필요할 때마다 나타납니다.
목록 형식은 또한 테마(your theme) 에 정의된 글꼴 스타일과 크기를 따르므로 목록의 글꼴이 단락 블록과 다르게 보이더라도 놀라지 마십시오.
목록 블록에서 텍스트를 강조 표시할 수 있으며 변경하려는 경우 이 텍스트에 대한 서식 옵션이 표시됩니다. 여기서 글꼴 스타일을 변경할 수는 없지만 굵게, 기울임꼴, 하이퍼링크를 추가하거나 블록 유형을 완전히 변경할 수 있습니다.
기타 블록(Other Blocks)
사용 가능한 모든 블록을 보려면 + 를 선택하여 블록을 추가한 다음 모두 찾아보기(Browse all) 를 선택 하여 전체 목록을 봅니다.
이 목록은 실제로 꽤 깁니다. 메뉴 시스템을 통해 클래식 편집기에서 사용할 수 있었던 것으로 기억하는 모든 항목이 여기에 포함됩니다. 여기에는 다음과 같이 일반적으로 사용되는 다른 블록이 포함됩니다.
- 테이블
- 파일 및 미디어
- 비디오
- "더보기" 태그
- 페이지 나누기 및 구분 기호
- 소셜 아이콘, 태그 클라우드, 캘린더(calendar) 및 WordPress 플러그인 위젯과 같은 위젯
- (Embed)소셜 사이트, YouTube 및 Spotify 와 같은 미디어 사이트 등을 위한 코드 삽입
기타 구텐베르크 기능
추가한 블록을 어디에서나 추가할 필요가 없습니다. 게시물에서 위로 스크롤 하고 기존 블록 사이에 있는 +이렇게 하면 기존 블록 사이에 새 블록을 삽입할 수 있습니다.
당신은 또한 당신의 블록의 배치에 집착하지 않습니다. 고전적인 WordPress 편집기에서 이미지와 같은 것을 때때로 배경 코딩을 엉망으로 만들지 않고 게시물의 다른 섹션으로 옮기는 것이 항상 쉬운 것은 아닙니다.
구텐베르그(Gutenberg) 에서 이미지와 같은 요소를 이동하는 것은 블록을 선택한 다음 팝업 메뉴 막대에서 위 또는 아래 화살표를 선택하여 게시물에서 블록을 위 또는 아래로 이동하는 것처럼 간단합니다.
화살표를 선택할 때마다 선택한 방향으로 해당 블록이 한 위치로 이동합니다.
WordPress 에서 Glutenberg 편집기(Glutenberg Editor) 사용하기
게시물 영역은 새 블록을 추가하는 유일한 장소가 아닙니다. 편집기 상단에 + 아이콘을 사용하여 블록을 추가할 수 있는 매우 간단한 아이콘 메뉴가 있음을 알 수 있습니다.
이 메뉴의 다른 아이콘을 사용하면 다른 구텐베르크(Gutenberg) 기능에 빠르게 액세스할 수 있습니다.
- 펜 편집(Edit) 아이콘을 사용하면 선택 모드로 전환하여 블록을 더 쉽게 선택할 수 있습니다. 블록을 두 번 클릭 하여 (Double-click)편집(Edit) 모드 로 돌아 갑니다.
- 실행 취소(Undo) 또는 다시 실행(Redo) 아이콘(왼쪽 및 오른쪽 곡선 화살표)은 마지막 편집을 실행 취소하거나 다시 실행합니다.
- i (세부 정보) 아이콘 은 게시물의 문자, 단어, 제목, 단락 및 블록 수를 보여줍니다.
- 개요(Outline) 아이콘을 사용하면 게시물 개요의 순서에 따라 게시물의 블록을 빠르게 탐색할 수 있습니다 .
많은 사람들에게 WordPress 의 (WordPress)Gutenberg 편집기는 익숙해지는 데 시간이 걸립니다. 그러나 게시물에서 요소 블록을 생성, 편집 및 조작하는 것이 얼마나 쉬운지 경험하고 나면 게시물과 페이지를 만드는 프로세스가 더 빠르고 생산적이라는 것을 알게 될 것입니다.
WordPress Gutenberg Tutorial: How to Use the New Editor
If you’ve been using WordPress for quite a few years, then you remember when the folks at WоrdPress rolled оut the Gutenberg edіtor in WordPress 5.0 back in 2018.
This new default editor was a major overhaul for editing both posts and pages on your site. It transformed the large text box that website owners were accustomed to into a very different block-based editing platform.
Some website owners hated it so much that they avoided upgrading to WordPress 5.0 and stayed with the classic default editor as long as possible. Other website owners embraced the change for its simplicity and ease-of-use.
If you’re making the transition and are curious what to expect, this WordPress Gutenberg tutorial will walk you through the main features you need to know and understand. This should make your transition as easy as possible.
What to Expect in WordPress Gutenberg
The main thing to know about the Gutenberg editor is that it’s block based. This means anything you need to add is managed via blocks. Blocks in Gutenberg include (but are not limited to):
- Paragraph
- Header
- Image
- List
- Quote
- Code
- Preformatted
- Pullquote
- Table
There are also a few other advanced blocks that are rarely used. You may see additional blocks if you install new WordPress plugins to the editor.
Adding blocks is as simple as selecting the + icon to the right under the most recent block you’ve added.
Selecting any of the blocks from the pop-up window adds that block as the next section in your page or post.
Before we get to these blocks, let’s start from the beginning and create a new post using Gutenberg in WordPress.
Creating Posts and Adding Blocks
Adding a post remains unchanged from the last version of WordPress. Just select Posts from the left navigation bar, and select Add New underneath it.
This will open the post editor window. This is also where everything is different. You’ll see the default Gutenberg WordPress editor.
Adding Block Items in the Gutenberg Editor
You can type the title for your post in the title field. Then select the + icon on the right to add the first block.
Paragraph Blocks
The most common first block people add after the title is a paragraph block. To do this, select Paragraph from the pop-up window.
This will insert a block field where you can start typing the first paragraph of your post. Formatting for the Paragraph block follows the default font for your site’s paragraph blocks.
Here are some tips for adding paragraph blocks in the Gutenberg editor.
- Your paragraph can be as long as you like. The text will automatically wrap into the next line, just like in the classic editor.
- If you press Enter, the Gutenberg editor automatically creates a new paragraph block, however it just looks like a second paragraph with a paragraph break.
- Highlighting any text in the paragraph will show a formatting window where you can alter the formatting for that text, or modify the block into a list or some other block type.
- Select the three dots and select Remove block to delete a paragraph block and replace it with something else.
Image Blocks
If you select the Image block, you’ll see an Image box where you can select an Upload button to upload an image into your post from your computer. Select the Media Library link to use an image from your existing media library, or Insert from URL to link to an image from another site.
This will insert the image into the article where you added the new Image block. You’ll notice that you can type the caption for the image directly under the image itself.
You can use the same formatting options on the caption text as you can on the regular paragraph text.
List Blocks
When you add a new block and select List, it’ll insert the list block at that point in the article.
It’ll show one bullet, but as you type and press Enter, each new bullet will appear as you need them.
List formatting also follows the font style and size as defined by your theme, so don’t be surprised if the font in your list looks different than your paragraph blocks.
You can highlight text in the list block and you’ll see formatting options for this text if you want to change it. You can’t change the font style here, but you can bold, italics, add a hyperlink, or change the block type entirely.
Other Blocks
If you want to see all the blocks that are available, select + to add a block, then select Browse all to see the entire list.
This list is actually quite long. Anything you remember being available in the classic editor via its menu system will be included here. These include other commonly used blocks like:
- Tables
- Files and media
- Videos
- The “More” tag
- Page breaks and separators
- Widgets like social icons, tag clouds, calendar, and WordPress plugin widgets
- Embed code for social sites, media sites like YouTube and Spotify, and more
Other Gutenberg Features
You don’t have to stick with the blocks you’ve added wherever you added them. You can scroll back up in your post and select the + icon between any of the existing blocks. This will let you insert new blocks between existing ones.
You also aren’t stuck with the placement of your blocks either. In the classic WordPress editor, it wasn’t always easy moving things like images to other sections of your post without sometimes messing up the background coding.
In Gutenberg, moving elements like images is as simple as selecting the block and then selecting the up or down arrows in the pop-up menu bar to move the block up or down in the post.
Each time you select the arrow it’ll slide that block one position in whatever direction you’ve selected.
Using the Glutenberg Editor in WordPress
The post area isn’t the only place to add new blocks. You’ll notice there’s a very simple icon menu at the top of the editor where you can use the + icon to add blocks as well.
The other icons in this menu give you quick access to other Gutenberg features.
- The pen Edit icon lets you switch to select mode to more easily select blocks. Double-click a block to go back to Edit mode.
- Undo or Redo icons (left and right curved arrows) will undo or redo your last edit.
- The i (Details) icon shows you the number of characters, words, headings, paragraphs, and blocks in your post.
- The Outline icon lets you quickly navigate to blocks in your post based on their order in your post outline.
For many people, the Gutenberg editor in WordPress does take some getting used to. But after experiencing how easy it is to create, edit, and manipulate blocks of elements in your posts, you’ll find that your process of creating posts and pages is faster and more productive.
