Title: Design Share #62 (Aug 12-Aug 23) Author: Joen Asmussen Published: August 26, 2024 --- [ ](https://profiles.wordpress.org/joen/) [Joen Asmussen](https://profiles.wordpress.org/joen/) 7:01 am _on_ August 26, 2024 Tags: [design ( 217 )](https://make.wordpress.org/design/tag/design/), [design-share ( 70 )](https://make.wordpress.org/design/tag/design-share/)    # Design Share #62 (Aug 12-Aug 23) This is a bi-weekly update of work [the design group](https://make.wordpress.org/design/handbook/about-the-team/) contributed to. Work happens in [overview issues](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Needs+Design+Feedback%22), and in [needs design](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Needs+Design%22+), or [needs design feedback](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Needs+Design+Feedback%22+) issues. If you have updates you’d like to include in the next Design Share, drop a note in [the #design channel](https://make.wordpress.org/chat/). If you have questions, you can also ask them there, or as a comment on this post. **Useful Figma files** * [WordPress Design System](https://www.figma.com/file/804HN2REV2iap2ytjRQ055/System?type=design&node-id=2799%3A26256&mode=design&t=y8LLmFJzGbaZBmIx-1) * [WordPress.org Design Library](https://www.figma.com/file/HOJTpCFfa3tR0EccUlu0CM/WordPress.org-Design-Library?type=design&node-id=0%3A1&mode=design&t=VhQXPDBb4RaXW4dv-1) * [Post Graphics](https://www.figma.com/file/yamKWsKnab3UBbhznomnJE/Gutenberg-Post-Graphics?type=design&node-id=0%3A1&mode=design&t=inoNIxBrtbqgpvCy-1) * [Gutenberg Project Folder](https://www.figma.com/files/project/1339415/Gutenberg?fuid=671631862080240454)( requires [view](https://make.wordpress.org/design/handbook/get-involved/tools-figma/#how-to-get-figma-access)) **Useful Tracking Issues** * [Customization Ongoing Roadmap](https://github.com/WordPress/gutenberg/issues/52128) * [All tracking issues](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BType%5D+Tracking+Issue%22) * [All overview issues](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22%5BType%5D+Overview%22) **Design work** * [Needs design feedback](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Needs+Design+Feedback%22+) * [Needs design](https://github.com/WordPress/gutenberg/issues?q=is%3Aopen+is%3Aissue+label%3A%22Needs+Design%22+) --- ## Systematising typography styles in the admin UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. **Status:** _In progress_ [[ An exploration in establishing a set of tokenized typographic styles that can be utilized throughout the admin interface as we embark on the wider [admin redesign](https://github.com/WordPress/gutenberg/issues/53322). Follow along in [https://github.com/WordPress/gutenberg/issues/64340](https://github.com/WordPress/gutenberg/issues/64340). ## Text-Wrap Controls **Status:** _Needs dev_ [[ [The issue](https://github.com/WordPress/gutenberg/issues/55190#issuecomment-2284036715) for adding text-wrapping controls to Global Styles → Typography is ready for a dev. ## Small Placeholders **Status:** _Needs dev_ [[ Continuing to refine the Placeholder component so it works as intended in wide contexts, but doesn’t break apart in narrow contexts such as columns or small grids. [Issue](https://github.com/WordPress/gutenberg/issues/64288). ## Styling States in the Style Book **Status:** _Needs feedback_ [[ How should pseudo states like active/hover/focus be styled? How about the current menu item? And can it be done in a way that’s intuitive for theme developers, but not prominent in the regular UI given it’s not likely to be a common task? Share your thoughts on [the issue](https://github.com/WordPress/gutenberg/issues/38277). ## WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. 󠀁[https://wordpress.org/](https://wordpress.org/)󠁿: Sign-in **Status:** _Needs dev_ [[ The WordPress admin-bar is still shown on a few pages of the site, solely to support a log-in link. By moving that to the secondary navigation, it can be both contextual and avoid the layout shift of the admin-bar appearing. [Issue](https://github.com/WordPress/wporg-main-2022/issues/420). ## “Add New” **Status:** _Needs feedback_ [[ Mockup that explores how it would look if the +New button was added in the site editor. [Issue](https://github.com/WordPress/gutenberg/issues/63378#issuecomment-2306395633). ## Image Cropping **Status:** _In progress/Needs feedback_ ![](https://i0.wp.com/make.wordpress.org/design/files/2024/08/Image-Block-Toolbar- proposed-cropping.png?resize=776%2C486&ssl=1) Work is underway to improve the image cropping tools. As part ofthat, we could use the opportunity to simplify the cropping flow to have a more predicatable blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. toolbar with a modal behavior. [PR](https://github.com/WordPress/gutenberg/pull/63335#issuecomment-2295879615). ## Font Library in Classic Themes **Status:** _Exploration/Needs feedback_ ![](https://i0.wp.com/make.wordpress.org/design/files/2024/08/classic-font-library. png?resize=776%2C512&ssl=1) Very early exploration on how the Font Library might be made available to classic themes. [Share your thoughts here](https://github.com/WordPress/gutenberg/issues/64409#issuecomment-2286138743). ## Expand `ItemGroup` for greater flexibility and a more consistent UI **Status:** _Exploration_ ![](https://i0.wp.com/make.wordpress.org/design/files/2024/08/itemgroup.png?resize =776%2C331&ssl=1) In recent times `ItemGroup` instances have been extended ad hoc to accommodate required features. This inevitably leads to inconsistencies and maintenance headaches down the road. In [#64445](https://github.com/WordPress/gutenberg/issues/64445) we’re exploring how we might expand the component scope to cater to more advanced use cases. ## Update `Modal` animation **Status:** _Exploration_ [[ Current modal animation ![](https://i0.wp.com/make.wordpress.org/design/files/2024/08/modal.gif?resize=776% 2C527&ssl=1) Proposed modal animation PR [#64580](https://github.com/WordPress/gutenberg/pull/64580) explores a simplified animation, with the modal originating from the center of the viewport. ## Update `ToggleGroupControl` appearance **Status:** _Exploration_ [[ Current design ![](https://i0.wp.com/make.wordpress.org/design/files/2024/08/Screenshot-2024-08- 23-at-09.44.15.png?resize=686%2C388&ssl=1) Proposed design When multiple instances of this component appear in quick succession the heavy active state adds a lot of noise and can be overwhelming. In [#64439](https://github.com/WordPress/gutenberg/issues/64439) we’re exploring alternative approaches. ## Five for the Future refresh **Status:** _Exploration_ [[ [[ [[ We began tackling [the refresh of Five for the Future](https://www.figma.com/design/cwsZHx6NpLnFhuzKaco7Jq/Five-For-the-Future?node-id=1072-1912). The update involves shifting from the expressive idea explored in the previous project stage to syncing the design with other site sections by reusing layouts and block groups. --- [#design](https://make.wordpress.org/design/tag/design/), [#design-share](https://make.wordpress.org/design/tag/design-share/) ### Share this: * [ Threads ](https://make.wordpress.org/design/2024/08/26/design-share-62-aug-12-aug-23/?share=threads) * [ Mastodon ](https://make.wordpress.org/design/2024/08/26/design-share-62-aug-12-aug-23/?share=mastodon) * [ Bluesky ](https://make.wordpress.org/design/2024/08/26/design-share-62-aug-12-aug-23/?share=bluesky) * [ Facebook ](https://make.wordpress.org/design/2024/08/26/design-share-62-aug-12-aug-23/?share=facebook) * [ X ](https://make.wordpress.org/design/2024/08/26/design-share-62-aug-12-aug-23/?share=x) * [ Reddit ](https://make.wordpress.org/design/2024/08/26/design-share-62-aug-12-aug-23/?share=reddit) * [ Email ](https://make.wordpress.org/design/2024/08/26/design-share-62-aug-12-aug-23/?subject=%5BShared%20Post%5D%20Design%20Share%20%2362%20%28Aug%2012-Aug%2023%29&body=https%3A%2F%2Fmake.wordpress.org%2Fdesign%2F2024%2F08%2F26%2Fdesign-share-62-aug-12-aug-23%2F&share=email) 1. ![](https://secure.gravatar.com/avatar/a436ab0e9c96432f9852e6c89a6efba387bbbd837e6f3eb29d1c97edad80f6ec? s=32&d=mm&r=g) 2. [Drivingralle](https://profiles.wordpress.org/drivingralle/) 9:19 am _on_ August 27, 2024 3. Can’t wait for the Text-Wrap Controls to get to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. 4. Adding the Font Library to Classic Themes is a great idea. 5. ![](https://secure.gravatar.com/avatar/d2ef87f1155f8d6e46209f9edb45caa31e0c7533019cf821cd364c8db0a9d5d3? s=32&d=mm&r=g) 6. [Ylli Pylla](https://profiles.wordpress.org/yllipylla/) 7:34 pm _on_ August 27, 2024 7. I hope the **ToggleGroupControl** appearance changes as proposed. It is nicer to the eyes especially when there are many toggles. 8. * ![](https://secure.gravatar.com/avatar/d713f015eb18c24451e980cb0cbda4b03f7e841cf4dc34a68069f509b5bf6a5a? s=32&d=mm&r=g) * [rakah](https://profiles.wordpress.org/rakah/) 12:32 pm _on_ September 10, 2024 * Let’s hope for the best! Comments are closed. # Post navigation [← Design Share #61 (Jul 15-Aug 9)](https://make.wordpress.org/design/2024/08/09/design-share-61-jul-15-aug-9/) [Advancing the WordPress Design System →](https://make.wordpress.org/design/2024/09/05/advancing-the-wordpress-design-system/)