{"id":15975547,"url":"https://github.com/flexseth/bioboxfinal","last_synced_at":"2025-07-18T11:10:39.427Z","repository":{"id":189228990,"uuid":"470293318","full_name":"flexseth/bioboxfinal","owner":"flexseth","description":"Final custom Bio Box for WP Engine","archived":false,"fork":false,"pushed_at":"2022-09-27T16:03:24.000Z","size":371,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-07T03:37:30.422Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flexseth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-03-15T18:55:10.000Z","updated_at":"2023-08-18T19:38:53.000Z","dependencies_parsed_at":"2023-08-18T22:18:07.596Z","dependency_job_id":null,"html_url":"https://github.com/flexseth/bioboxfinal","commit_stats":null,"previous_names":["flexseth/bioboxfinal"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexseth%2Fbioboxfinal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexseth%2Fbioboxfinal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexseth%2Fbioboxfinal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexseth%2Fbioboxfinal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flexseth","download_url":"https://codeload.github.com/flexseth/bioboxfinal/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243365586,"owners_count":20279212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-07T22:03:00.415Z","updated_at":"2025-03-13T07:43:33.321Z","avatar_url":"https://github.com/flexseth.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Coding Challenge: WP Engine Bio Box\nAuthor box with color options.\n\n## Problem Statement \n⬜️ The goal of this coding exercise is to create a WordPress plugin that leverages React, the WordPress Block API, and the REST API of your local development site to create a custom block that, when placed in the content of a post or page, will display a user profile box.\n \n✅ While the box should, by default, display the user’s gravatar (via their email address), their display name, and their bio/description.\n \n*****************\n### Editor UI\n\n✅ editor - render a representation of what the block content will look like in the front end view.\n\n❌ The user should be able to choose the profile they want to display using a dropdown of the active accounts with a role of author, editor, or administrator. \n\n✅ The dropdown should be populated using the REST API.\n\n✅ The user should be able to choose the box background and text color using the native color picker component.\n\n❌ The user should be able to toggle on/off each of the default components: gravatar, display name, and bio/description.\n\n************************\n### Front-end UI\n\n❌ The block content should display user information (gravatar, display name, bio) as specified in the Editor UI.\n\n✅ The block content  should be rendered using the colors selected by the user in the Editor UI.\n\n✅ Other styles should be inherited from the theme.\n\n\n************************************\n### Installation Instructions\n\n### Requirements\n- Local (or some local development environment)\n- Node, NPM, NPX\n- Git\n- WordPress themes (in main folder)\n\n### Dev environment setup\n- Create a new WordPress dev environment in Local \n- In Local, right click the dev environment and select Open Site Shell\n- Navigate to the plugins directory of this install\n- `git clone` the block repo\n- `cd` into the repo directory\n- `npm install` to install dependencies\n- `npm start` - package block files and run wp-scripts (via Webpack)\n\n### Create Users, Posts, tests\nIn Local, right click the site you have installed the plugin on. Select Open Site Shell. From thecommand line, enter the following commands to generate your three users. Please note these commands will not work in the normal filesystem, you must go to the Site Shell in Local (which should load in Terminal)\n\n##### Create an administrator for your site\n`wp user create \"Software Engineer II candidate\" \"hireme@wpengine.com\" --role=\"administrator\" --user_pass=\"password\" --display_name=\"Captain Admin\" --description=\"Applicant for Software Engineer II at WP Engine\"\n`\n\n##### Create Nathan Rice via wp-cli\n`\nwp user create \"Nathan Rice\" \"Nathan.Rice@WPEngine.com\" --role=\"administrator\" --user_pass=\"password\" --nickname=\"Nathan Rice\" --description=\"Prorofessional button masher. Fiercely defensive '90s kid. Recovering political junkie. Not even internet-famous.\"\n`\n\n##### Create Brian Gardner via wp-cli\n`wp user create \"Brian Gardner\" \"Brian.Gardner@WPEngine.com\" --display_name=\"Brian Gardner\" --user_pass=\"password\" --description=\"Designer. #WordPress expert. Taylor Swift fan. Principal Developer Advocate at @WPEngine. Founder of @StudioPress. Creator of @FrostWP.\" --role=\"administrator\"\n`\n\n#### Create an Author user\n`wp user create \"Author\" \"author@wpengine.com\" --user_pass=\"password\" --role=\"author\" --display_name=\"Arthur McAuthor\" --description=\"Just an everyday WordPress writer\"\n` \n\n### Install User Switching Plugin\nThis plugin makes it easier to see how the interface works between various user roles.\n\n`wp plugin install user-switching --activate`\n\n### Install Syntax Highlighter plugin \nThis just makes the sample code a little easier to read.\n\n`wp plugin install syntaxhighlighter --activate`\n\n### Import posts, map to authors\nBack in the Site Shell for this Local site...\n- Install WordPress Importer\n- Please use the Twenty Twentytwo theme when importing\n\n`wp plugin install wordpress-importer --activate`\n\n**IMPORTANT**\nFor the demo of this with a little explanation, use the following import\n\n`wp import biobox-demo.xml --authors=\"create\"`\n\nFor the original demo \n`wp import import.xml --authors=\"create\"`\n\n\nIf for some reason the import doesn't work correctly, please create users\nBrian Gardner, Nathan Rice, and an admin. Put in names and bios, official\nemails for Brian and Nathan, and you will see their bios display. \n\nOne thing you will notice, is that old blocks lost their style (except those with a custom color) on import.\nMaybe because the styles were registered with another namespace? - add TODO\n\nCreating new bio blocks will add a default background color, which you can change or remove. \n\nTo check this, create a new block and look at how it displays by default on the home page.\n\n\n### Caveats\n**Must be admin**\nEditor preview only works for admin\n- This is a bug, it's documented in the code\n- last minute edge case, very fixable\n\n**Exclusivity:** \nOnly one bio box is allowed per page with this implementation.\nThis was done to simplify with development during the block.\nThere are use cases for including multiple bio blocks on the same page (About Us, Our Sponsors..).\n\n\n**Gravatar** \nA default avatar will display if the user has not set up their Gravatar. In order for the Gravatar to display, the block creator must have a Gravatar set up with the email they are using to log into this WordPress installation. Users that have Gravatars correctly set up will show their thumbnail in the Users page in the Dashboard. \n\nLearn more and make your Gravatar [here](http://gravatar.com)\n\n**Bio Description:** \nIn order for the bio field to show up, the block creator must have a user description in their WordPress user profile. \n\n**Bio Name:** \nTo change which name displays for your bio\n- add a nickname in your WordPress user profile\n- change your display name setting in your WordPress user profile\n\n**Tested with...**\n\nWP Engine Themes\n\n✅ Genesis Sample (Genesis Framework) \n\n✅ Genesis Block Theme (FSE)\n\n✅ Frost \n\nWordPress Themes\n\n✅ TT1 Blocks ⚠️\n\n✅ Twenty Twenty-one ⚠️\n\n✅ Twenty Twenty\n\n✅ _underscores\n\n⚠️ = blocks don't show up on home page \n\n**Edge Cases**\n\n\n************************************\n### TODO \nFunctionality requirements\n\n⬜️ Toggle controls\n- Admin only?\n\n⬜️ Dynamically display user profile  \n- `useEffect()` - re-render block when user changes\n\n⬜️ Toggle controls\n🔎 ~Audit for PII~\n\n#### Edge Cases\nFix Block Preview for non-Administrators\n\u003e This block has encountered an error and cannot be previewed.\n\nCase: Block created by any user, another user wants to edit this page. \nBlock editor breaks because this user can't access /users/ endpoint,\ndue to insufficient permissions. When fetching from the API, installed\nof assuming to fetch /me, if this block has a user set already \n\n#### Theme Improvements\n🧑‍💻 Add blocks to posts loop \n- hook block data into template part\n\n🧳 Full install instructions\n\n\n************************************\n### Troubleshooting\n\n\u003e Can't add block in block editor. \nMake sure plugin is built using NPM and the steps above.\nRequest support from plugin developer. \n\n\u003e Error: Sorry, you are not allowed to filter users by role.\nYou are trying to add the block as non admin, which currently breaks.\nIt actually adds the block, which you can see if you try to resolve the block.\nConvert it to HTML and then click Preview, it will render the user's block.\nThere may be a fix for this.\n\n\n\n\n***************\n### Features, Improvements, etc\n\n⚠️ If user doesn't have a Gravatar\n- **FALLBACK**    to uploaded profile pic on WordPress user profile\n- **DEFAULT**     to Gravatar package default monster // WordPress default user avatar\n- **FEATURE**     Allow user to upload an image to use from plugin interface\n- **FEEDBACK**    Discuss \"ratings\" for Gravatar - currently un-restricted (G, PG, F, etc)\n\n⚠️ Nothing displayed if user hasn't set their bio/description\n - **FEATURE**    Show message that no bio is set, allow to edit bio from plugin interface\n\n⚠️ Name might display username if a preferred name hasn't been set\n - **FEATURE**     Allow user to set preferred display name from plugin interface\n\n\n### HOSTING, building the plugin\nMay not work on web hosts without ssh/shell access\n- 🦺 web host would have to manually install ... or...\n\n🚀 Build package and deploy as plugin\n- Make sure to ship with polyfills for older browsers\n- This is the way... but I've never done it before\n- All the everything\n- Figure out how to bundle dependencies with plugin\non install, download, extract, include dependencies\n\n\n🕋 Shared Web Hosts \n- Use production/deployable version of plugin\n- currently web host would need to install plugin for you\n\n📦 Other local development environments, config, tools\n\n### etc\n\n💬 Language files needed for translation?\n\n*******\n### Release Notes\nVerson 1.2.3 - Code cleanup, Demo instructions with detail added\nVerson 1.2.2  - Documentation in code and post examples\nVersion 1.2.1 - Initial Block Plugin features for review.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexseth%2Fbioboxfinal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexseth%2Fbioboxfinal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexseth%2Fbioboxfinal/lists"}