--- title: How to Use the QR Code Block in the WordPress Gutenberg Editor description: "The **QR Code block** (shown as *QR Code (Composer Pro)* in the block inserter) lets you add a fully styled, scannable QR code to any page, post, or product directly from the Gutenberg editor. You can generate a QR code…" url: "https://wordpressqrcode.com/docs/how-to-use-the-qr-code-block-in-the-wordpress-gutenberg-editor/" updated: "2026-10-08" category: WordPress QR Code --- # How to Use the QR Code Block in the WordPress Gutenberg Editor The **QR Code block** (shown as *QR Code (Composer Pro)* in the block inserter) lets you add a fully styled, scannable QR code to any page, post, or product directly from the Gutenberg editor. You can generate a QR code for the current page link, a custom link or text, a phone number, WhatsApp, WiFi, Google Maps, an event, or a vCard, and customize its colors, shapes, logo, and download button without writing any code. --- ## Requirements - WordPress with the **Gutenberg (block) editor** enabled - The **WordPress QR Code Generator** plugin installed and activated --- ## Step 1: Add the QR Code block to a page 1. In your WordPress dashboard, go to **Pages → Add Page** (or open any existing page or post). 2. Enter a page title, for example `QR Code block`. 3. Click the **+** (Block Inserter) icon, or type `/` in the editor. 4. Search for **QR Code** and select the **QR Code (Composer Pro)** block. A styled QR code appears in the editor together with a **Download QR** button. > **Tip:** The block uses your global design from **Design QR Code** in the plugin settings by default. Any change you make in the block settings overrides the global design for that QR code only. --- ## Step 2: Choose the QR Code Source Select the block, then open the **Block** tab in the right sidebar and expand **QR Code Source**. Under **Source Type**, choose what the QR code should open or do when scanned: | Source Type | What it does | Fields to fill in | | --- | --- | --- | | **Current Page Link** (default) | Automatically generates a QR code for the URL of the current page | None, it is automatic | | **Custom Link / Text / Email / Number** | Encodes any link, text, email address, or number | Text, number or link | | **Phone Number** | Lets people call the number after scanning | Phone / mobile number | | **WhatsApp** | Starts a WhatsApp chat | WhatsApp details | | **WiFi** | Lets people join a WiFi network without typing the password | WiFi name, WiFi type (for example, WPA), WiFi password | | **Google Maps** | Opens a location in Google Maps | Latitude, longitude, query | | **Event** | Lets people add an event to their calendar | Summary / title, description, start date, start time, end date and time | | **vCard** | Shares digital business card details | Contact details such as website, address, and note | The QR code in the editor updates instantly as you type. --- ## Step 3: Customize the QR code design Expand the **QR Code Design** section in the block settings. Every option here overrides the global plugin design for this block only. Leave an option on **Default (use admin setting)** to keep the global style. | Setting | Description | | --- | --- | | **Shape** | Overall QR code shape | | **Size (px)** | Width and height of the QR code. Use **Reset** to return to the default | | **Body Dot Style** | Style of the main dots, for example **Dots** | | **Body Color 1 / Body Color 2 (Gradient)** | Pick two colors to create a gradient. Use the same color twice for a solid color | | **Eye Frame Style** | Outer square of the three corner markers: **Default**, **Square**, **Dot**, or **Extra Rounded** | | **Eye Frame Color 1 / 2 (Gradient)** | Colors of the eye frame | | **Eye Ball Style** | Inner part of the corner markers, for example **Dot** | | **Eye Ball Color 1 / 2 (Gradient)** | Colors of the eye ball | | **Background Color** | Background color behind the QR code | | **Error Correction Level** | **Low (L)**, **Medium (M)**, **Quartile (Q)**, or **High (H)**. Higher levels keep the code scannable even if it is partly damaged or covered by a logo | | **Border Corner Radius** | Rounds the corners of the QR code | To change a color, click the color swatch and either drag in the color picker or enter a **Hex** value. > **Tip:** Keep strong contrast between the QR code and its background. Dark colors on a light background scan most reliably. --- ## Step 4: Add your logo 1. In **QR Code Design**, scroll to the **Logo** section. 2. Click **Upload Logo**. 3. In the **Select or Upload Media** window, choose an image from the **Media Library** (or upload a new one) and click **Select**. Your logo is placed in the center of the QR code. Use **Replace Logo** to swap it, or **Remove** to delete it. > **Tip:** When you add a logo, use a higher **Error Correction Level** (Quartile or High) so the QR code stays easy to scan. Always test it with your phone. --- ## Step 5: Set the download file name and style the Download button **Download file name** In the **Download Filename** field, enter the name for the downloaded file (without the file extension, such as `.png`). **Download Button** Expand the **Download Button** section to customize the button visitors will see: | Setting | Description | | --- | --- | | **Download Button** | Use the default setting or customize it | | **Button Label** | The text on the button, for example `Download` | | **Button Text Color** | Color of the label | | **Button Background** | Background color of the button | | **Button Border Color** | Color of the button border | | **Button Border Radius** | Roundness of the button corners | | **Button Font Size** | Size of the label text | --- ## Step 6: Publish or update the page 1. Click **Publish** (for a new page) or **Update** (for an existing page). 2. Click **View Page** to see the QR code on your website. On the frontend, visitors can choose a format from the dropdown next to the button and download the QR code as **PNG**, **SVG**, or **PDF**. For the **PDF** option, the button changes to **Print QR**. Visitors can then print the QR code or choose **Save as PDF** in the print window. --- ## Step 7: Hide the QR code on specific pages You can control where QR codes appear in two ways. **Option A: Hide it on a single page** 1. Open the page in the editor. 2. Click the **QR Code Generator** icon in the top toolbar to open the QR Code Generator panel. 3. Under **Remove QR Code from Frontend**, select **Yes**. 4. Click **Update**. The QR code no longer appears on the frontend of that page. **Option B: Hide it by post type or page (global setting)** In the plugin settings: - **Hide QR code according to post type:** select the post types where QR codes should not appear (for example Post, Page, Product, Docs, or Card). - **Hide QR code according to Page:** select specific pages where QR codes should not appear. --- ## Frequently asked questions **Can I use more than one QR code block on the same page?** Yes. Add the block as many times as you need and give each one its own source type and design. **Why does my QR code not scan?** Check that the contrast between the QR code and its background is strong, increase the **Size**, and raise the **Error Correction Level** if you are using a logo. **Will changing the block design change my other QR codes?** No. Settings in the block affect only that block. To change the default design for every QR code, use the plugin's **Design QR Code** settings. **What happens if I leave a setting on "Default (use admin setting)"?** The block uses the global design from the plugin settings.