Social Icons

Display icons linking to your social media profiles or sites.

This block is available in the latest version of WordPress and does not require the Gutenberg plugin.

Category:

For developers

Block Grammar & Markup

<!-- wp:social-links -->
<ul class="wp-block-social-links"><!-- wp:social-link {"service":"mastodon","url":"https://mastodon.social/@marcuskaz"} /--></ul>
<!-- /wp:social-links -->

Context

Context is used to pass values from a block to a descendant block; for example, a query and post template passing the query ID to the inner blocks.

Documentation

Provides context. Optional. Type: Object.

{
  "openInNewTab": "openInNewTab",
  "showLabels": "showLabels",
  "iconColorValue": "iconColorValue",
  "iconBackgroundColorValue": "iconBackgroundColorValue"
}

Block Attributes

Optional. Type: Object.

Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.

Documentation

{
  "iconColor": {
    "type": "string"
  },
  "customIconColor": {
    "type": "string"
  },
  "iconColorValue": {
    "type": "string"
  },
  "iconBackgroundColor": {
    "type": "string"
  },
  "customIconBackgroundColor": {
    "type": "string"
  },
  "iconBackgroundColorValue": {
    "type": "string"
  },
  "openInNewTab": {
    "type": "boolean",
    "default": false
  },
  "showLabels": {
    "type": "boolean",
    "default": false
  },
  "size": {
    "type": "string"
  },
  "layout": {
    "type": "object"
  },
  "anchor": {
    "type": "string",
    "source": "attribute",
    "attribute": "id",
    "selector": "*"
  }
}

Block Supports

Optional. Type: Object.

A set of options that enables or disables block controls in the editor, for example gradient colors or padding.

Documentation

{
  "align": [
    "left",
    "center",
    "right"
  ],
  "anchor": true,
  "__experimentalExposeControlsToChildren": true,
  "__experimentalLayout": {
    "allowSwitching": false,
    "allowInheriting": false,
    "allowVerticalAlignment": false,
    "default": {
      "type": "flex"
    }
  },
  "color": {
    "enableContrastChecker": false,
    "background": true,
    "gradients": true,
    "text": false,
    "__experimentalDefaultControls": {
      "background": false
    }
  },
  "spacing": {
    "blockGap": [
      "horizontal",
      "vertical"
    ],
    "margin": true,
    "padding": true,
    "units": [
      "px",
      "em",
      "rem",
      "vh",
      "vw"
    ],
    "__experimentalDefaultControls": {
      "blockGap": true
    }
  }
}