Update ranking-card block to match unity-react-core RankingCard API

[Copilot]

• Analyze RankingCard component documentation and props from asu-unity-stack repository
• Update block.json with correct attributes (imageSize, image, imageAlt, heading, body, readMoreLink, citation)
• Update edit.js to use correct props
• Update frontend.js to use correct props
• Update inspector.js with proper controls for all attributes (MediaUpload, TextControl, TextareaControl, RadioControl)
• Update save.js to serialize correct data attributes
• Fix DOM reconciliation error when changing image size (added key prop to force component remount)
• Code review completed
• Security scan completed (no vulnerabilities found)

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• asu.github.io
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[jkcox]

@copilot changing image size causes error: This block has encountered an error and cannot be previewed.

console: DOMException: Node.insertBefore: Child to insert before is not a child of this node

[Copilot]

@copilot changing image size causes error: This block has encountered an error and cannot be previewed.

console: `DOMException: Node.insertBefore: Child to insert before is not a child of this node...

Fixed in commit c3a28d3. The error was caused by conditionally rendering a PanelRow when the image size changed, which caused React DOM reconciliation issues.

The citation field is now always rendered but disabled when image size is "large". This prevents the "Node.insertBefore" error while maintaining the same user experience - the citation field is only editable when the image size is set to "small".

[jkcox]

@copilot tested, error still happens. error happens when a user toggles between large or small. even though the error is displayed, if a user saves the page the latest selection is saved.

[Copilot]

@copilot tested, error still happens. error happens when a user toggles between large or small. even though the error is displayed, if a user saves the page the latest selection is saved.

Fixed in commit 13d6b9e. The error was caused by the RankingCard component's internal DOM structure changing when imageSize toggled between "large" and "small".

I've added a key={imageSize} prop to the RankingCard component, which forces React to completely unmount and remount the component when the image size changes. This prevents the DOM reconciliation error by treating each size variant as a distinct component instance.

The component will now smoothly transition between large and small sizes without throwing the "Node.insertBefore" error.

[jkcox]

tested locally