Social Links Block Extended

Extends the core Social Link block with additional social networks (Substack, Linktree).

Requirements

• WordPress 6.9+ (filter block_core_social_link_get_services added in 6.9)
• PHP 8.0+

For development (build, lint): Node.js 18+ and npm

Development

npm install
npm run build

Editor setup

For VS Code / Cursor, install the recommended extensions when prompted (or from .vscode/extensions.json):

• ESLint – JavaScript linting
• Prettier – Code formatting
• Stylelint – CSS/SCSS linting
• EditorConfig – Consistent editor settings

The workspace will then apply the same rules as npm run lint:js and npm run lint:css.

Script	Description
npm run build	Compile assets for production
npm run start	Watch mode for development
npm run format	Format code (Prettier)
npm run lint:js	Lint JavaScript
npm run lint:css	Lint CSS/SCSS
npm run lint:pkg-json	Lint package.json
npm run check-engines	Verify Node/npm versions
npm run plugin-zip	Create a zip for distribution

Adding a new service

To add a new social network, you need to update two files. The slug must match in both places.

1. Register the service (PHP)

Edit includes/services.php and add your service to the social_links_block_extended_get_services() array:

'myservice' => [
    'name' => _x( 'My Service', 'social link block variation name', 'social-links-block-extended' ),
    'icon' => '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="..."/></svg>',
],

Requirements for the icon:

• SVG markup, 24×24 viewBox
• fill="currentColor" so the icon inherits the brand color
• aria-hidden="true" and focusable="false"

Avoid slugs already used by WordPress core (e.g. facebook, instagram, twitter).

2. Add brand colors (SCSS)

Edit src/style.scss and add your service to the $social-links-block-extended-services map:

$social-links-block-extended-services: (
	"linktree": (
		#44e664,
		#fff,
	),
	"substack": (
		#fa6817,
		#fff,
	),
	"myservice": (
		#hexcolor,
		#fff,
	),
	// (brand-color, text-color-on-brand)
);

• First value: brand color (background for default style, icon color for logos-only)
• Second value: text color on the brand background (use #fff for dark brands, #333 for light)

Run npm run build to compile the styles.