From f4406ede83dec9c99bc3edde8e1783ebe68d2d3d Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Fri, 6 Sep 2019 20:31:53 +0300 Subject: [PATCH] Block: social links. (#16897) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added social links. * Applied changes suggested by Marcus Kazmierczak. * Add social list of icons, SVGs in stylsheets Initially add SVG as background images to get UX down. We probably will want to use real SVGs if possible to give more control over the color, fill, stroke, etc... Add listing of icons and associated matching domain/text. Automatically check if URL entered matches and select icon. * Add fixture files * Alignment cleanup * Add icon picker, to pick icon * Move attributes to block.json * Move singular social-link to top-level * Pass parameter, dont use data-icon I went done the wrong path, and took far too long to realize it. * Move social-link CSS to own scss * Switch inner-blocks to flex to inline * Add social inks to block transforms e2e tests * Show icons when block inserted, click to select Removes switching icon based on URL typed because someone is selecting the icon first. This makes it harder to change an icon after the fact, will require delete and insert. * Improve inserting slightly - Remove text link, just use icon button (+) - Start with template, so you dont have to click (+) after inserting block, you immediately select the icon * Display URLInput Popover on insert Switches URLInput field to Popover so it can be controlled to display on insert. This allows the user to know they have to fill in the URL for the icon and removes an extra click on initial insert to set. * Make progress towards minimal UI. - This removes margins, paddings, and lots of UI from child blocks. It also adds comments that we should look at refactoring this away in a separate PR that makes it a prop on a parent container. - This tweaks the layout a little bit, so frontend and backend match, and adds a circle around the social icons. * Refactor Social Links to create individual blocks Creates individual blocks for each social site. This uses the standard InnerBlocks appender and display to show icon/site to select. Not only does this use a standard widget, it benefits by getting search capabilities. Modeled after the embed include, however each of the sites are not a "public" block shown in the inserter, but only seen when using the Social Links block. There would be confusion using the inserter with two entries for example adding a link to Twitter vs. embedding a Tweet * Add is-incomplete class for empty URL - Adds wp-social-icon__is-incomplete class to social icon block if the URL is not set. - Checks for URL on save and does not include icon if not set * Show default icon, set icon attribute fixes save * Polish appender and inactive state. * Remove unnecessary fragment * Convert icons over to React components, show in inserter * Clean up - standardize on social-link naming, fix CSS - use icon attribute set as default in register * Tidy things up, rename, consistent - Update icon names to component case - Use IconComponents in edit view - Updates variables so site is for sites, icon is for icons ;-) - Switch to use