See pewresearch/pewresearch-org@61f5ea1 from refs/heads/release/5.0

blocks/grid-controller/src/block.json

@@ -3,9 +3,9 @@
 	"apiVersion": 3,
 	"name": "prc-block/grid-controller",
 	"version": "0.1.0",
-	"title": "Grid Columns",
+	"title": "Grid Controller",
 	"category": "design",
-	"description": "Display content in multiple columns using CSS grid with blocks added to each column.",
+	"description": "Layout content in columns using custom PRC grid system.",
 	"keywords": [
 		"grid",
 		"columns",

blocks/logo/build/block.json

@@ -4,7 +4,7 @@
   "name": "prc-block/logo",
   "version": "1.0.0",
   "title": "Pew Research Center Logo",
-  "description": "Contextually aware logo that has dark mode support, and will change to the alternate position logo in smaller containers. (#dark-mode, #css-container-queries)",
+  "description": "Contextually aware logo block for Pew Research Center. Can display either the standard PRC logo set or Decoded logo.",
   "category": "theme",
   "keywords": [
     "logo",
@@ -19,16 +19,16 @@
     },
     "justification": {
       "type": "string",
+      "default": "left",
       "enum": [
         "left",
         "center",
         "right"
-      ],
-      "default": "left"
+      ]
     },
     "width": {
       "type": "number",
-      "default": 360
+      "default": 280
     }
   },
   "supports": {
@@ -61,7 +61,13 @@
       "label": "Decoded"
     }
   ],
-  "example": {},
+  "example": {
+    "viewportWidth": 400,
+    "attributes": {
+      "width": 300,
+      "className": "block-editor-block-types-list__prc-logo-example"
+    }
+  },
   "usesContext": [
     "postType",
     "postId",

blocks/logo/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('classnames', 'react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-hooks', 'wp-polyfill'), 'version' => '70e46b6d760fb4aae6bb');
+<?php return array('dependencies' => array('classnames', 'prc-hooks', 'react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-hooks', 'wp-polyfill'), 'version' => 'a44452713f47297f687d');

blocks/logo/src/block.json

@@ -4,7 +4,7 @@
 	"name": "prc-block/logo",
 	"version": "1.0.0",
 	"title": "Pew Research Center Logo",
-	"description": "Contextually aware logo that has dark mode support, and will change to the alternate position logo in smaller containers. (#dark-mode, #css-container-queries)",
+	"description": "Contextually aware logo block for Pew Research Center. Can display either the standard PRC logo set or Decoded logo.",
 	"category": "theme",
 	"keywords": ["logo", "masthead", "dark-mode", "css-container-queries"],
 	"attributes": {
@@ -14,12 +14,12 @@
 		},
 		"justification": {
 			"type": "string",
-			"enum": ["left", "center", "right"],
-			"default": "left"
+			"default": "left",
+			"enum" : ["left", "center", "right"]
 		},
 		"width": {
 			"type": "number",
-			"default": 360
+			"default": 280
 		}
 	},
 	"supports": {
@@ -52,7 +52,13 @@
 			"label": "Decoded"
 		}
 	],
-	"example": {},
+	"example": {
+		"viewportWidth": 400,
+		"attributes": {
+			"width": 300,
+			"className": "block-editor-block-types-list__prc-logo-example"
+		}
+	},
 	"usesContext": ["postType", "postId", "queryId"],
 	"textdomain": "pewresearch-logo",
 	"editorScript": "file:./index.js",

blocks/logo/src/controls.jsx

@@ -5,19 +5,17 @@
 /**
  * WordPress Dependencies
  */
-import { Fragment } from '@wordpress/element';
 import {
 	BlockControls,
 	JustifyToolbar,
 	InspectorControls,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
-	ToggleControl,
 	__experimentalNumberControl as NumberControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 
-function JustificationControl({ attributes, setAttributes, clientId }) {
+function JustificationControl({ attributes, setAttributes }) {
 	const { justification } = attributes;
 	return (
 		<JustifyToolbar
@@ -28,53 +26,32 @@ function JustificationControl({ attributes, setAttributes, clientId }) {
 	);
 }
 
-function DarkModeControl({ attributes, setAttributes, clientId }) {
-	const { darkModeEnabled } = attributes;
-	return (
-		<ToggleControl
-			label="Dark Mode"
-			help="Enable this option to display the logo in white when the user has dark mode enabled, overriding any color selection."
-			checked={darkModeEnabled}
-			onChange={(value) => setAttributes({ darkModeEnabled: value })}
-		/>
-	);
-}
-
-function WidthControl({ attributes, setAttributes, clientId }) {
+function WidthControls({ attributes, setAttributes, clientId }) {
 	const { width } = attributes;
-
 	return (
-		<NumberControl
-			label="Max Width"
-			isShiftStepEnabled={true}
-			onChange={(value) => setAttributes({ width: value })}
-			shiftStep={10}
-			max={360}
-			value={width}
-		/>
+		<InspectorControls group="dimensions">
+			<ToolsPanelItem
+				label="Logo Width"
+				hasValue={() => !!width}
+				panelId={clientId}
+			>
+				<NumberControl
+					isShiftStepEnabled={true}
+					onChange={(newValue) => setAttributes({ width: newValue })}
+					shiftStep={1}
+					value={width}
+					help="Control the width of the logo inside by entering a number in pixels."
+				/>
+			</ToolsPanelItem>
+		</InspectorControls>
 	);
 }
 
 export default function Controls({ attributes, setAttributes, clientId }) {
 	return (
-		<Fragment>
-			<BlockControls>
-				<JustificationControl
-					{...{ attributes, setAttributes, clientId }}
-				/>
-			</BlockControls>
-			<InspectorControls group="styles">
-				<PanelBody title="Dynamic Logo Settings">
-					<div>
-						<DarkModeControl
-							{...{ attributes, setAttributes, clientId }}
-						/>
-						<WidthControl
-							{...{ attributes, setAttributes, clientId }}
-						/>
-					</div>
-				</PanelBody>
-			</InspectorControls>
-		</Fragment>
+		<BlockControls>
+			<JustificationControl {...{ attributes, setAttributes }} />
+			<WidthControls {...{ attributes, setAttributes, clientId }} />
+		</BlockControls>
 	);
 }