{"id":11285942,"date":"2019-03-07T12:51:07","date_gmt":"2019-03-07T12:51:07","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11285942"},"modified":"2024-06-06T18:21:14","modified_gmt":"2024-06-06T18:21:14","slug":"media-text-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/media-text-block\/","title":{"rendered":"Media & Text block"},"content":{"rendered":"\n

Go back to the list of Blocks<\/strong><\/a><\/p>\n\n\n\n

The media & text block<\/em> allows you to place an image or video side-by-side with text.<\/p>\n\n\n\n

To create this layout, click on the block inserter icon<\/strong> to open the block library<\/strong> and select the media & text block<\/em>.<\/p>\n\n\n\n

\"Slash<\/a>
Slash command to insert the Media & Text block.<\/figcaption><\/figure>\n\n\n\n

Detailed instructions on adding blocks<\/a><\/p>\n\n\n\n

Adding content<\/strong><\/p>\n\n\n\n

To add your image or video to the block, you can use the options provided to upload a file from your computer or select from your existing Media library.<\/p>\n\n\n\n

\"How<\/a>
How to add content to the Media & Text Block.<\/figcaption><\/figure>\n\n\n\n

To add your text, simply start typing in the text box. You will be given the same text editing options as a regular paragraph block<\/a>. You can also use the block inserter and add other blocks to the content area.<\/p>\n\n\n\n

Block toolbar<\/h2>\n\n\n\n

In order to reveal the block toolbar, you can click on the block and the toolbar will display. Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The media & text block<\/em> offers the following options in its toolbar:<\/p>\n\n\n\n

\"Block<\/a>
Block toolbar for the media & text block.<\/figcaption><\/figure>\n\n\n\n

With these options, you can:<\/p>\n\n\n\n

Transform the block to a column, group, image (or video if you have a video media file instead of an image ), or cover block.<\/p>\n\n\n\n

\"Transform
Transform options for the Media & Text Block.<\/figcaption><\/figure>\n\n\n\n

Toggle the block between a none, wide-width display and a full-width display (if supported by your site’s theme).<\/p>\n\n\n\n

\"Alignment
Alignment options for the Media & Text block.<\/figcaption><\/figure>\n\n\n\n

You can align your content vertically to either the top, middle, or bottom, using the “Change vertical alignment” option.<\/p>\n\n\n\n

\"Example
Here the option is selected “Align top”<\/figcaption><\/figure>\n\n\n\n

You can use the following options to show the media content on either the left or right.<\/p>\n\n\n\n

\"Example
Here the option is selected as “Show media on left”<\/figcaption><\/figure>\n\n\n\n
\"Example
Here the option is selected as “Show media on right”<\/figcaption><\/figure>\n\n\n\n

If you attempt to upload a file that is not supported you will receive an error message at the bottom left corner of your browser.<\/p>\n\n\n\n

\"Example
Error message example<\/figcaption><\/figure>\n\n\n\n

You can insert a link to the image in the block using the link<\/strong> icon in the Block toolbar. The image can be linked to an external URL or to a page on your site. You can also link the image to its own Media file or Attachment Page.<\/p>\n\n\n\n

\"Adding
Insert link to the image <\/figcaption><\/figure>\n\n\n\n

Use the Replace<\/strong> button in the Block toolbar to replace the media file you have already inserted.<\/p>\n\n\n\n

More options <\/h3>\n\n\n\n

These controls give you the option to copy, duplicate, and edit your block as HTML.<\/p>\n\n\n\n

Read about these and other settings.<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

Block settings<\/h2>\n\n\n\n

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘setting’ icon next to the Publish or Update button.<\/em><\/p>\n\n\n\n

\"The<\/figure>\n\n\n\n

Settings tab<\/h3>\n\n\n\n
\"Media<\/figure>
\n

Stack on Mobile<\/strong><\/p>\n\n\n\n

You will be given the option to stack the media and text on top of each other for mobile phones. This is useful for people viewing your website on smaller screens.<\/p>\n\n\n\n

If the media and text in your block were to stay side-by-side on mobile, they may be too small to view on mobile devices. By enabling stack on mobile,<\/em> the content on the left will show on top of the content on the right. This provides a better experience for mobile visitors.<\/p>\n\n\n\n

Crop image to fill entire column<\/strong><\/p>\n\n\n\n

If your image does not fit the entire column width, you can turn on this option to automatically crop the image so that it fills the entire column. Additionally, you are given a circular focal point to help center the most relevant section of your photo as it is possible that some cropping may occur.<\/p>\n\n\n\n

Alt text ( alternative text)<\/strong> <\/p>\n\n\n\n

You can add alt text to the image to describe what the image is about. It is useful for accessibility (screen readers, for example) and for search engine optimization.<\/p>\n\n\n\n

Image size<\/strong><\/p>\n\n\n\n

You can choose a full, large, medium, or thumbnail image to display by selecting the size desired from the drop-down menu.<\/p>\n\n\n\n

Media width<\/strong><\/p>\n\n\n\n

You can adjust the proportion that the media takes up in the overall percentage of the Media & Text<\/em> block<\/em> by adjusting the sliders or typing in the desired proportion. The range is between 15% and 85 %. <\/p>\n<\/div><\/div>\n\n\n\n

\"Media<\/figure>
\n

Focal point picker<\/strong><\/p>\n\n\n\n

If you crop the image, you will see the focal point picker. This tool lets you identify the main point of interest in the image and highlight it. Click on the picker to drag it to the spot you want, or use the left and top position percentages below the image to set it manually.<\/p>\n<\/div><\/div>\n\n\n\n

Styles tab<\/h3>\n\n\n\n

Color<\/h4>\n\n\n\n

The media & text block<\/strong> provides color settings options to change the text, background, and link colors. Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code.<\/p>\n\n\n\n

<\/p>\n\n\n\n

See this guide for more information about changing colors.<\/a><\/p>\n\n\n\n

Typography<\/h4>\n\n\n\n

The media & text block<\/strong> provides typography settings to change the font family, appearance, line height, letter spacing, decoration, letter case, and font size. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Get more details about changing typography settings.<\/a><\/p>\n\n\n\n

Dimensions<\/h4>\n\n\n\n

The media & text block<\/strong> provides dimension settings options to add padding and margin. <\/p>\n\n\n\n

<\/a>Learn more about dimension controls.<\/a><\/p>\n\n\n\n

Advanced<\/h3>\n\n\n\n

The advanced tab gives you two options. You can add anchor text to be able to link directly to this section of your page. You are also able to add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.
<\/p>\n\n\n\n

\"Advanced<\/a>
The advanced section lets you add a CSS class to your block.<\/figcaption><\/figure>\n\n\n\n
\n

Changelog <\/strong><\/h2>\n\n\n\n
    \n
  • Updated 2023-04-03\n
      \n
    • Added information about the focal point picker for cropped images<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Updated 2022-11-22\n
        \n
      • Aligned images for mobile view <\/li>\n\n\n\n
      • replaced redundant content<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Updated 2022-11-10\n
          \n
        • Removed Color settings and added link to Color overview page<\/li>\n\n\n\n
        • Added Dimension and Typography settings and linked to their overview pages<\/li>\n\n\n\n
        • Updated a few more screenshots for 6.1.<\/li>\n\n\n\n
        • Added info about Insert link in the Block toolbar<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Updated 2022-11-01\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
            \n
          • Updated video for WP 6.1<\/li>\n\n\n\n
          • Updated images to WP 6.1<\/li>\n\n\n\n
          • Added image of content locking for Media & Text Block<\/li>\n<\/ul>\n\n\n\n
              \n
            • Updated Alt text<\/li>\n\n\n\n
            • Added transform option to “Cover”<\/li>\n\n\n\n
            • Added error message example<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Updated 2022-06-02
              • Updated images to WP 6.0Changes to Block Tool Bar
                • Added “None” to alignmentRemoved term “vertically” from alignmentAdded “columns” to transform<\/li><\/ul>Changes to more
                  • Added “Move to”Added “Lock”Added “Hide”<\/li><\/ul>Updated all instances of “Media + Text” to “Media & Text”<\/li><\/ul>\n
                      \n
                    • Changes to Text & Media block settings\n
                        \n
                      • Updated color text and background options to include gradients<\/li>\n\n\n\n
                      • Added “anchor text” <\/li>\n\n\n\n
                      • Added “cropping images”<\/li>\n\n\n\n
                      • Added “alt text”<\/li>\n\n\n\n
                      • Added “image size”<\/li>\n\n\n\n
                      • Added “media width”<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                      • Updated 2020-08-23\n
                          \n
                        • Updated images to WP 5.5<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                        • Updated 2020-06-04\n
                            \n
                          • Converted 2 reusable blocks to regular blocks<\/li>\n\n\n\n
                          • Changes to Headings<\/li>\n\n\n\n
                          • Changes to Block Toolbar\n
                              \n
                            • Added Vertical Alignment options<\/li>\n\n\n\n
                            • Added new images<\/li>\n\n\n\n
                            • Added “More Options” Block<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                              <\/div>\n","protected":false},"excerpt":{"rendered":"

                              Go back to the list of Blocks The media & text block allows you to place an image or video side-by-side with text. To create this layout, click on the block inserter icon to open the block library and select the media & text block. You can also type \/media and hit enter in a new paragraph block to add one […]<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false},"category":[80,84],"class_list":["post-11285942","helphub_article","type-helphub_article","status-publish","hentry","category-customization","category-media-blocks"],"revision_note":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285942","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/types\/helphub_article"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/comments?post=11285942"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285942\/revisions"}],"predecessor-version":[{"id":16360339,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/articles\/11285942\/revisions\/16360339"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/media?parent=11285942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.org\/documentation\/wp-json\/wp\/v2\/category?post=11285942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}