Meta tags:
description=Design for Position UI;

Headings (most frequently used words):

title, 2022, maintainer, nov, dec, jameskoster, author, editor, edit, collaborator, 25, andrewserong, jasmussen, 28, 24, replies, footer, tellthemachines, 15, 19, design, for, position, ui, 46032, insert, link, comments, 30, ramonjd, controls, and, implementation, list, view, simison, 14, faton1995, jan, 2023, navigation,

Text of the page (most frequently used words):
the (196), for (62), this (59), that (58), and (55), with (39), #position (37), was (30), something (30), went (29), wrong (29), options (29), sticky (29), can (28), reply (28), feedback (27), comment (27), quote (26), 2022 (26), you (25), give (25), translation (25), helpful (25), beta (25), fixed (25), title (25), add (23), but (23), list (22), block (22), would (22), are (19), panel (18), think (18), view (18), maintainer (17), work (17), which (16), like (16), controls (15), control (15), what (15), default (14), ctrl (13), not (13), good (13), layout (13), nov (13), github (12), have (12), dec (12), more (12), make (12), might (12), jameskoster (12), from (12), there (12), all (12), blocks (12), when (11), editor (11), want (11), should (11), one (11), edit (11), will (11), design (10), way (10), top (10), positioning (10), need (10), replies (9), must (9), logged (9), vote (9), still (9), most (9), author (9), how (9), some (9), out (8), about (8), reacted (8), emoji (8), user (8), needs (8), values (8), here (8), into (8), its (8), relative (8), css (8), container (8), implementation (8), shift (7), text (7), code (7), users (7), collaborator (7), than (7), bit (7), selection (7), terms (6), far (6), these (6), then (6), right (6), jasmussen (6), preset (6), advanced (6), they (6), consider (6), has (6), likely (6), andrewserong (6), just (6), well (6), case (6), use (6), because (6), value (6), icon (6), could (6), absolute (6), set (6), content (6), area (6), page (6), your (5), sign (5), perhaps (5), get (5), bottom (5), going (5), challenge (5), support (5), also (5), quite (5), based (5), explore (5), look (5), option (5), while (5), collapsible (5), dropdown (5), idea (5), though (5), does (5), always (5), picker (5), popover (5), only (5), quick (5), making (5), starting (5), width (5), element (5), jump (5), another (4), security (4), 2023 (4), same (4), site (4), left (4), manual (4), different (4), tools (4), cases (4), part (4), being (4), yes (4), designs (4), 2em (4), properties (4), too (4), them (4), working (4), header (4), creating (4), things (4), having (4), font (4), concept (4), other (4), much (4), secondary (4), don (4), now (4), visual (4), actor (4), deleted (4), edited (4), essentially (4), browser (4), really (4), initial (4), within (4), currently (4), whole (4), actions (4), positioned (4), order (4), thanks (4), discussion (4), blocker (4), index (4), tree (4), 46032 (4), discussions (4), time (3), navigation (3), down (3), pull (3), directly (3), link (3), show (3), tell (3), integrate (3), following (3), very (3), presets (3), potentially (3), hide (3), easy (3), direct (3), least (3), deliberate (3), offset (3), etc (3), able (3), probably (3), feasible (3), positions (3), center (3), little (3), find (3), codepen (3), modals (3), effectively (3), any (3), since (3), clearly (3), moving (3), state (3), rather (3), size (3), lots (3), back (3), plus (3), toolspanel (3), click (3), feel (3), pattern (3), usability (3), own (3), space (3), group (3), better (3), settings (3), toggle (3), grid (3), thoughts (3), thing (3), foundational (3), behaviour (3), both (3), padding (3), parent (3), child (3), harder (3), supports (3), explicitly (3), first (3), expose (3), tellthemachines (3), tricky (3), solutions (3), elements (3), implement (3), separated (3), communicates (3), issues (3), gutenberg (3), wordpress (3), repository (3), signed (2), tab (2), window (2), refresh (2), session (2), reload (2), action (2), blog (2), pricing (2), footer (2), thumbs (2), task (2), numbered (2), bulleted (2), italic (2), bold (2), heading (2), already (2), account (2), conversation (2), possible (2), full (2), jan (2), config (2), without (2), transform (2), suspect (2), provides (2), context (2), revealed (2), important (2), switch (2), manually (2), centering (2), translate (2), isn (2), sure (2), suppose (2), technically (2), wip (2), been (2), looks (2), each (2), two (2), such (2), maybe (2), https (2), lot (2), flow (2), actually (2), tried (2), focused (2), those (2), allow (2), uis (2), over (2), had (2), seems (2), pretty (2), 46142 (2), quickly (2), see (2), visible (2), sort (2), similar (2), selected (2), reasoning (2), behind (2), side (2), new (2), doing (2), surface (2), concern (2), suggested (2), introduces (2), where (2), becomes (2), along (2), fairly (2), kind (2), accessibility (2), challenges (2), know (2), before (2), exposes (2), term (2), column (2), selecting (2), inline (2), positional (2), finding (2), everything (2), complex (2), dependant (2), split (2), inspector (2), graduating (2), sense (2), matrix (2), single (2), previous (2), jay (2), unit (2), taking (2), long (2), non (2), prominence (2), custom (2), inputs (2), smart (2), once (2), interface (2), omit (2), static (2), explicit (2), interesting (2), coming (2), under (2), few (2), expense (2), layer (2), details (2), challenging (2), doesn (2), require (2), great (2), appears (2), run (2), spacing (2), note (2), paragraph (2), div (2), enough (2), otherwise (2), straightforward (2), viewport (2), start (2), wondering (2), setting (2), creative (2), agree (2), throughout (2), scrollable (2), unless (2), functionality (2), our (2), designer (2), considering (2), granular (2), scroll (2), build (2), canvas (2), navigate (2), longer (2), dom (2), particularly (2), whether (2), crucial (2), separation (2), accessible (2), structure (2), many (2), magically (2), point (2), stick (2), step (2), around (2), splitting (2), track (2), decoupling (2), explorations (2), lives (2), nested (2), aids (2), required (2), given (2), comments (2), includes (2), fix (2), started (2), insights (2), projects (2), requests (2), open (2), source (2), manage (2), packages (2), web (2), capture (2), feb (2), perform, training, api, contact, docs, status, privacy, inc, eyes, rocket, heart, confused, hooray, laugh, reference, issue, request, mention, team, url, insert, participants, anything, general, labels, category, join, free, hello, remains, displayed, faton1995, choosing, assume, understand, methods, via, folks, select, using, interpret, switching, necessary, achieve, populated, flows, hack, grok, meet, conceptually, explored, output, additional, rules, allowed, anyway, utility, classnames, promising, kses, applied, combining, classes, involves, middle, alternatives, calc, aspect, apply, useful, exactly, took, stab, joen, pen, wvxlorr, editors, 1100, special, due, requirement, trigger, dismissal, components, overlay, inspiration, contribute, modal, creation, emphasised, generally, aligned, concepts, agnostic, trickier, aren, obscuring, floating, cookie, banners, simison, update, fun, separate, personally, favour, current, inferring, absence, respect, displays, themes, sizes, wanting, steps, problem, type, happy, try, complexity, affects, minus, removes, simple, supported, interaction, panels, opens, mean, drop, menu, 45833, small, departs, behavior, existing, toolspanels, style, trivial, near, put, emphasis, after, used, accordion, collapse, reduce, unwanted, distraction, guess, alongside, else, degrades, imo, warrants, takes, fair, reusing, cover, button, were, roll, beyond, did, limit, okay, consolation, wouldn, realize, useless, shortcut, inside, input, shorthand, ingredients, tweaking, place, manages, instead, highlight, close, replaced, handy, defaults, majority, vein, choices, implied, unset, goal, reimplement, ultimately, bound, salient, pieces, implementing, balancing, providing, patterns, templates, late, sorry, weather, last, week, excellent, mockups, permanently, display, emphasises, simpler, real, estate, remember, reflect, natural, therein, unstick, scrolls, worth, noting, technical, less, interact, encounter, effects, theme, dedicated, hrm, discussing, trade, offs, approaches, lean, toward, calculating, outputting, box, closer, friendly, behaving, expected, hard, relationship, whereas, behave, obvious, figuring, handle, programatic, works, hidden, whatever, simplest, unfortunately, found, ensuring, correct, taken, deals, automatically, exploration, love, avoid, depending, shipping, frontend, precedent, rabbithole, confusing, applying, height, allows, intentionally, communicate, questions, similarly, wide, yeah, phrasing, vague, meant, opposed, vary, according, hearing, separately, performing, common, proposition, provide, specific, anticipate, adding, reflects, tasks, often, depends, relatively, ancestor, absolutely, accurate, their, section, carefully, intent, mirror, document, visually, glance, solve, either, detailed, instructions, experience, particular, toggles, property, chances, won, expect, taller, itself, screen, means, template, sectioned, areas, outermost, wrapper, stay, across, increasingly, trying, take, whom, familiar, building, certainly, words, encouragement, again, imagine, attributes, acceptable, weren, flagged, indication, allowing, further, unlock, possibilities, laying, argument, image, nudge, off, aesthetic, nice, makes, pragmatic, introducing, honing, conceptual, surrounding, chatting, made, arguments, represent, tying, until, __experimentallayout, allowposition, json, helps, explain, why, reflecting, opposite, direction, thinking, loud, ace, between, strict, hierarchy, representation, sitting, face, diverge, paradigm, say, groups, enabled, assumption, represents, ramonjd, newest, oldest, let, discuss, future, specify, axis, contains, exposed, fit, change, flex, relation, condition, relate, containers, may, riff, shared, earlier, worked, originally, 44723, permutations, unlikely, settle, serve, equally, short, return, 904, star, fork, notifications, public, message, organization, results, collections, trending, topics, repositories, community, articles, readme, project, fund, developers, sponsors, resources, customer, stories, studies, devsecops, devops, automation, solution, education, startups, teams, enterprise, skills, documentation, features, collaborate, outside, plan, changes, review, write, copilot, instant, dev, environments, codespaces, vulnerabilities, host, automate, workflow, product, skip, wayback, machine, http, archive, org, 20230205104359, com, timestamps, fail, success, 2024, mar,

Text of the page (random words):
erimentallayout allowposition which i ve been doing in my explorations up until now also the idea of allowing relative absolute positioning further down the track will unlock some very creative possibilities for laying things out with blocks so that s another good argument for decoupling from container blocks e g set a group block to relative and then set a child image block to absolute and nudge it off to the side a little for a deliberate aesthetic in list view fixed position blocks are separated which essentially communicates the z index value i imagine moving things around in the list view based on position attributes could be tricky to implement though i think it s a good thing to explore would this be a blocker for the initial implementation i e in an initial implementation with sticky and top position would it be acceptable if it weren t flagged in the list view or do you think having some visual indication there is a blocker for usability thanks again for splitting out this discussion beta was this translation helpful give feedback 2 you must be logged in to vote 1 reply comment options title something went wrong quote reply jameskoster nov 25 2022 maintainer author thanks for the words of encouragement would this be a blocker for the initial implementation no certainly not a blocker beta was this translation helpful give feedback ️ 1 comment options title something went wrong quote reply tellthemachines nov 25 2022 maintainer thanks for starting this discussion i have a few thoughts to add controls and implementation with fixed sticky absolute and relative it seems increasingly like we are trying to implement a ui for css functionality is this really what we want it might be good to take a step back consider the needs of our users not all of whom are familiar with css and build from there rather than taking the implementation as a starting point and building the tools around the css properties we can expose css position sticky in particular is a tricky one if we add a control that just toggles that property on a block chances are it won t work as users expect it to because in order to stick the block needs to be in a container taller than itself and and it will only stick as far as its container is still on screen this means that if a template is sectioned into areas the sticky container will need to be in the outermost wrapper in order to stay sticky across the whole page we can solve this either with detailed instructions on how to make it work or by making it work magically with js i suspect from a user point of view a magically working experience will be much better list view with the separation of positioned blocks into their own section in list view we need to consider accessibility very carefully currently list view is the most accessible way to navigate the editor its intent to mirror the document structure is crucial particularly when the interface is visually complex enough that we can no longer tell at a glance how many blocks we have on the page i anticipate that adding fixed or otherwise positioned blocks will only make the canvas harder to navigate and edit and if list view no longer reflects the dom order that can make tasks like moving blocks much harder we should particularly consider that positioning often depends on a parent element whether a sticky container or a relatively positioned ancestor to an absolutely positioned block in which case a dom accurate list view will be crucial to make sense of the whole beta was this translation helpful give feedback 2 you must be logged in to vote 4 replies comment options title something went wrong quote reply jameskoster nov 25 2022 maintainer author as a designer i am always considering the needs of users with most of these controls we need to make performing common actions quick and easy but not at the expense of more granular control i want to make my header sticky is a different proposition to i want this one block to be fixed in position and not scroll we need solutions that work for both if we get the foundational elements right first we can build on those to provide solutions for more specific use cases i m hearing list view will be tricky so we can look into it separately beta was this translation helpful give feedback 2 comment options title something went wrong quote reply tellthemachines nov 28 2022 maintainer as a designer i am always considering the needs of users yeah that phrasing was probably a bit too vague what i meant was to consider it functionality first what controls to expose and what they should do as opposed to implementation first e g which of the css position values we should expose because implementation can vary according to our needs in this case i m wondering the following when making a block sticky should it default to be sticky throughout the whole scrollable page unless we explicitly set an area for it to be sticky within what would a control for setting the sticky area look like similarly with absolute positioning are we positioning blocks page wide or will we allow an explicit container area to be set i think fixed is likely to be the most straightforward in terms of controls because it will always be relative to the viewport perhaps we can start with that one beta was this translation helpful give feedback comment options title something went wrong quote reply edited editor s edit actor deleted this content editor s edit something went wrong andrewserong nov 28 2022 collaborator good questions when making a block sticky should it default to be sticky throughout the whole scrollable page unless we explicitly set an area for it to be sticky within i know it s likely confusing for users but i quite like the browser default of sticky applying to the height of the direct parent of the currently selected block as it allows for some quite creative designs e g intentionally making a group block sticky for only part of a page within a column etc but i agree it s a really challenging one to communicate clearly in terms of usability what would a control for setting the sticky area look like that s a really interesting idea if we tried a control for selecting a sticky area i m also wondering how would it work for an initial implementation of sticky fixed i d love it if we can avoid depending on shipping js to the site frontend since we don t have a precedent for that within the block supports so it could be a bit of a rabbithole i think fixed is likely to be the most straightforward in terms of controls because it will always be relative to the viewport perhaps we can start with that one i like the idea of starting with whatever s going to be the simplest ux but unfortunately so far i ve found fixed a bit harder to work with with fixed we run into some ux ui challenges with ensuring the correct positioning and width and that there is enough padding for the space that the element would have otherwise taken up browser default behaviour for sticky deals with the width and padding automatically here s a quick codepen for exploration browser default sticky note the the following paragraph is visible the sticky div has full width browser default fixed note the paragraph is hidden behind the fixed element the div is the width of its content because of that out of the box sticky appears to get us closer to user friendly behaviour in terms of the block behaving as it s expected to but we run into the challenge of it being a hard concept to work with parent child relationship and spacing whereas with fixed the controls might behave in more of a directly obvious way but we then have a challenge of figuring out how to handle the spacing in a programatic way that works with the site layout hrm now that we re discussing the details of the trade offs i think both approaches are going to be pretty challenging i think i d lean a little more toward starting with sticky since it doesn t require width controls or calculating and outputting site padding to account for it it d be great to be able to support both though beta was this translation helpful give feedback comment options title something went wrong quote reply jameskoster nov 28 2022 maintainer author i think the most important thing to remember is that we are essentially creating a ui for css so at the most foundational layer the controls should reflect the natural behaviour therein so yes a sticky block should unstick when its container scrolls out of view it s also worth noting that this is a fairly advanced control and non technical users less likely to interact with it more likely they will encounter its effects as a part of theme pattern selection once we get the foundational layer right we can explore creating uis for dedicated use cases beta was this translation helpful give feedback 2 comment options title something went wrong quote reply edited editor s edit actor deleted this content editor s edit something went wrong jameskoster nov 25 2022 maintainer author one other option we might consider for the fixed position would be to permanently display the position picker which emphasises the simpler way to set position at the expense of some visual real estate as before we could do the same thing for the absolute positioning option beta was this translation helpful give feedback 1 you must be logged in to vote 0 replies comment options title something went wrong quote reply jasmussen nov 28 2022 maintainer i m coming in late to this one sorry was under the weather last week lots of good thoughts here lots of excellent mockups a few quick thoughts i don t think the goal should be to reimplement css but ultimately that s still what we re bound by we can find a good ui for it by starting with the most salient pieces implementing them well balancing prominence and providing good patterns and templates for these in that vein i d omit relative and static for now as explicit choices static can be implied as a default unset and relative would be interesting to see if we could do without but add if we need to as far as the 9 grid i like that interface a lot it provides smart handy defaults for the majority of positions though i d omit the one in the center making it an 8 grid the settings toggle for custom inputs working like it does for font size is smart but i d make it a toggle instead of the popover so the grid is replaced by the inputs that way we don t need to highlight your custom position once you close the popover i don t think advanced is the right place for this i still think layout is and so long as it s a non default toolspanel control it manages its prominence there here s a quick things at taking jay s ingredients and tweaking them a bit these actually integrate another idea of jay s which is to integrate a quick shortcut dropdown inside the input it s like the unit picker a sort of shorthand just like the unit control what do you think beta was this translation helpful give feedback 1 you must be logged in to vote ️ 1 19 replies show 14 previous replies comment options title something went wrong quote reply jameskoster dec 1 2022 maintainer author i realize that a position toolspanel with only one option is kind of useless but would a collapsible panel be better there it s not much consolation but it wouldn t be a single option if we use a collapsible panel then we ll be back in the position of having to surface a default value it might work beta was this translation helpful give feedback comment options title something went wrong quote reply jasmussen dec 1 2022 maintainer that might work yes but it would still be dependant on the split inspector graduating at least if we were to roll it out beyond the group but if we did limit it to that then maybe a position panel might be okay about the inline positional picker how would you feel about finding a way to make it into a popover it takes up a fair bit of space and i think there s some sense in reusing the pattern from the cover matrix button which is a popover as well beta was this translation helpful give feedback comment options title something went wrong quote reply jameskoster dec 1 2022 maintainer author that might work yes but it would still be dependant on the split inspector graduating i guess this design could go in the advanced panel as well but alongside everything else in there the usability degrades quite a bit imo position is complex and warrants its own space about the inline positional picker how would you feel about finding a way to make it into a popover in this context i feel that pattern would put too much emphasis on the dropdown after selecting that you want a fixed position the dropdown effectively becomes secondary if we used the accordion panel you can always just collapse it to reduce unwanted distraction there might be other options though like a two column layout beta was this translation helpful give feedback comment options title something went wrong quote reply andrewserong dec 2 2022 collaborator but i have a small concern that it departs in behavior from existing toolspanels it s effectively a new panel style which would not be trivial for the near term i have the same concern similar to when the concept was suggested for the layout panel in 45833 comment in that it introduces a complexity to the concept of the panel where the plus icon becomes an action that affects block state along with the minus icon that removes block state while the ui looks fairly simple this isn t something supported by the toolspanel and introduces a different kind of interaction with panels than what we already have in the editor ui which opens up some accessibility challenges e g what does it mean to add a position how does a user know what they re about to do before they click on the plus icon when in other cases the plus icon is a drop down menu that exposes options if we use a collapsible panel then we ll be back in the position of having to surface a default value it might work i quite like the collapsible panel idea for position though and it side steps the problem of creating a new panel type i d be happy to try doing that personally i m still in favour of having a default value in the ui so that a user can quickly see what the current state is rather than inferring it based on the absence of a control being visible in that respect it s sort of similar to how the font size dropdown displays default when no font size is selected on themes with lots of font sizes what s the reasoning behind wanting to hide it beta was this translation helpful give feedback comment options title something went wrong quote reply andrewserong dec 2 2022 collaborator update for fun over in the wip pr i ve had a go at moving the control over to a separate collapsible position panel seems to work pretty well so far 46142 comment beta was this translation helpful give feedback 1 comment options title something went wrong quote reply simison dec 8 2022 collaborator while your use case is clearly focused more on the header woul...