Logo (Pew Research Center Logo)

Block Name & Description

Title: Pew Research Center Logo Description: The Pew Research Center logo, available in primary, alternate, decoded, symbol, and Pew Knight styles. Dark mode aware.

Block Namespace

prc-block/logo

Supports

Feature	Enabled	Details
HTML editing	No
Interactivity	Yes	Enables Interactivity API directives on frontend
Color	Partial	Background and gradients enabled; text color disabled
Spacing	Yes	`padding`, `margin`

Attributes

Attribute	Type	Default	Description
`justification`	`string`	`"left"`	Horizontal alignment: `"left"`, `"center"`, `"right"`
`width`	`number`	`361`	Logo width in pixels

Available Styles

Style	Label	Default	SVG Asset	Light Mode Asset (Safari)	Dark Mode Asset (Safari)
`primary-only`	Primary	Yes	`primary.svg`	`primary-light.svg`	`primary-white.svg`
`primary-stable-white`	Primary (Stable White)	No	`primary-white.svg`	`primary-white.svg`	`primary-white.svg`
`alt-only`	Alternate	No	`alternate.svg`	`alternate-light.svg`	`alternate-white.svg`
`alt-stable-white`	Alternate (Stable White)	No	`alternate-white.svg`	`alternate-white.svg`	`alternate-white.svg`
`symbol-only`	Symbol Only	No	`symbol.svg`	`symbol-light.svg`	`symbol-white.svg`
`symbol-stable-white`	Symbol (Stable White)	No	`symbol-white.svg`	`symbol-white.svg`	`symbol-white.svg`
`decoded-only`	Decoded	No	`decoded.svg`	`decoded-light.svg`	`decoded-white.svg`
`pew-knight-only`	Pew Knight	No	`pew-knight.svg`	`pew-knight-light.svg`	`pew-knight-logo-dark.svg`

"Stable White" variants always show the white version regardless of color scheme. Standard variants switch between dark and light versions from prefers-color-scheme on Chromium/Firefox. Safari/WebKit swaps dedicated light/dark files so the dark-mode toggle can force light artwork while the OS stays in dark mode.

Inner Blocks

None. This is a leaf block.

Parent / Ancestor Requirements

None. Can be placed anywhere. The block also registers itself as an allowed block inside core/navigation via a block filter.

Context

Uses context: postType, postId, queryId

Usage Instructions

Insert the Pew Research Center Logo block.
Choose a style variation from the block styles panel:
- Primary — Full wordmark, dark mode aware
- Primary (Stable White) — Always white wordmark
- Alternate — Alternate wordmark layout, dark mode aware
- Alternate (Stable White) — Always white alternate
- Symbol Only — Just the PRC symbol mark, dark mode aware
- Symbol (Stable White) — Always white symbol
- Decoded — Decoded sub-brand logo
- Pew Knight — Pew Knight wordmark; adaptive SVG (pew-knight.svg) on Chromium/Firefox. Safari/WebKit swaps pew-knight-light.svg / pew-knight-logo-dark.svg so the dark-mode toggle can force light artwork.
Justification — Use the block toolbar to align the logo left, center, or right.
Width — Resize the logo by dragging the resize handles when the block is selected, or enter a precise pixel width in the Dimensions inspector panel.
The logo links to the site's home URL. The "Decoded" style links to /decoded instead.

Block Markup Example

<div
	class="wp-block-prc-block-logo is-style-primary-only item-justified-left"
	data-wp-interactive='{"namespace":"prc-block/logo"}'
	data-wp-context='{"srcLight":".../primary-light.svg","srcDark":".../primary-white.svg","currentSrc":".../primary.svg"}'
	data-wp-init="callbacks.setupSafariColorScheme"
	data-wp-watch--safari-scheme="callbacks.applySafariColorScheme"
>
	<div class="wp-block-prc-block-logo__dimensions" style="max-width: 361px;">
		<div class="wp-block-prc-block-logo__inner">
			<a
				href="https://alpha.pewresearch.org/pewresearch-org"
				class="wp-block-prc-block-logo__link"
			>
				<img
					src=".../primary.svg"
					alt="Return to Home"
					loading="eager"
					data-wp-bind--src="context.currentSrc"
				/>
			</a>
		</div>
	</div>
</div>

Asset Location

Logo SVG assets live in the shared images/logos/ directory (wp-content/images/logos/ at runtime) rather than inside the plugin. Both the editor (via window.prcBlockLogoAssets, localized from PHP) and the PHP render reference that single location. If the assets directory is missing the block silently skips registration.

PHP Rendering

Server-side rendered via render_block_callback in Logo. The PHP:

Determines the active style from the block's className attribute (defaults to primary-only).
Maps the style to the appropriate SVG file using the STYLE_TO_ASSET constant.
Also maps to a light-mode variant via STYLE_TO_LIGHT_ASSET and a dark-mode variant via STYLE_TO_DARK_ASSET. Light assets have no prefers-color-scheme media query, so they stay dark-on-light when the visitor forces light mode while the OS is dark.
Outputs Interactivity API attributes on the block wrapper: data-wp-interactive (namespace prc-block/logo), data-wp-context (srcLight, srcDark, currentSrc), data-wp-init pointing at setupSafariColorScheme, and data-wp-watch--safari-scheme pointing at applySafariColorScheme.
Generates the <img> tag with data-wp-bind--src="context.currentSrc" (initial src / currentSrc is the adaptive asset; Safari/WebKit then swaps to srcLight or srcDark).
Wraps the image in an anchor tag linking to the site home (or /decoded for the decoded style).
Applies the width constraint via inline max-width style on the dimensions wrapper.
Adds justification classes (item-justified-left, item-justified-center, item-justified-right).

The block has no save function — it is entirely dynamic/server-rendered.

Frontend Interactivity

view.js (registered as viewScriptModule) — WordPress Interactivity API store prc-block/logo.

SVGs loaded via <img> tags do not receive the page color-scheme override or prefers-color-scheme on Safari/WebKit (macOS and iOS). The view module:

Returns immediately on non-Safari/WebKit browsers (dark mode continues to use each SVG's internal CSS where applicable).
On Safari/WebKit, sets context.currentSrc from the effective scheme, not the OS media query alone. That scheme comes from the prc-block/dark-mode-toggle store when present, then document.documentElement.style.colorScheme (only light / only dark), then localStorage key prc-color-scheme-preference, then the OS prefers-color-scheme query.
setupSafariColorScheme (data-wp-init) applies once and subscribes to OS media-query changes plus a MutationObserver on the <html> style attribute so a toggle click is picked up.
applySafariColorScheme (data-wp-watch--safari-scheme) re-applies when toggle store state changes.

The <img> uses data-wp-bind--src="context.currentSrc". Safari/WebKit swaps to dedicated srcLight / srcDark files so forced light mode cannot keep a white wordmark on a light background.

prc-block/icon — Another SVG-rendering block for Font Awesome icons
core/navigation — The logo block registers itself as an allowed block inside navigation